This article was contributed by a member of the Heroku community

Its contents might not always reflect updates to the Heroku platform.

Rack を使用した Ruby での静的サイトの作成

最終更新日 2021年02月02日(火)

この記事は Marshall Huss によって執筆され、Lee Reilly​ からの寄稿が含まれています。Lee は、GitHub Enterprise​ のプログラマーハッキングです。

静的サイトは、動的なサーバー側の機能またはアプリケーションロジックが含まれていないサイトです。この例として、完全に HTML と CSS で構成されているパンフレットサイトや、サーバーコンポーネントと対話しない Flash に組み込まれたクライアント側の対話型ゲームなどがあります。これらのサイトにはユーザーへのコンテンツ配信のためにのみ Web サーバーが必要ですが、Heroku のようなプラットフォームの使用が、すばやいプロビジョニングとこのようなインフラストラクチャへのデプロイのために引き続き有効です。

Rack​ フレームワークを使用すると、静的サイトを Heroku にすばやくデプロイできます。

この記事のサンプルアプリケーションのソースは、GitHub​ で入手できます。

前提条件

このガイドは、次のものが用意されていることを前提としています。

ディレクトリ構造の作成

静的ファイルを処理するための Rack のディレクトリ構造を作成するには、次のコマンドを実行します。

$ mkdir -p site/public/{images,js,css}
$ touch site/{config.ru,public/index.html}
$ cd site && bundle init

これにより、次のディレクトリ構造が作成されます。

- site
  |- config.ru
  |- Gemfile
  |- public
    |- index.html
    |- images
    |- js
    |- css

依存関係の指定

多くの動的アプリケーションを実行するには、多数のサードパーティライブラリやフレームワークが必要です。ただし、静的サイトに、他のライブラリからのサポートはほとんど必要ありません。この場合、必要なのは rack​ gem のみです。Gemfile​ ファイルに次の行を追加します。

source 'https://rubygems.org'
gem 'rack'

次に、bundle​ コマンドを実行して、Rack の依存関係をダウンロードして解決します。

$ bundle install
Using rack (1.4.1)
Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed.

ファイルサーバーの設定

Rack に、どのファイルを静的アセットとして処理するかを指示する必要があります。これは config.ru​ ファイルを編集して行うため、このファイルに次の行を含めます。

use Rack::Static,
  :urls => ["/images", "/js", "/css"],
  :root => "public"

run lambda { |env|
  [
    200,
    {
      'Content-Type'  => 'text/html',
      'Cache-Control' => 'public, max-age=86400'
    },
    File.open('public/index.html', File::RDONLY)
  ]
}

このテンプレートでは、画像、JavaScript ファイル、CSS ファイルをそれぞれ images​、css​、js​ ディレクトリに格納し、HTML でそれらのファイルへの相対的な参照を使用することを前提としています。

ローカルでの実行

Heroku にデプロイする前にサイトをローカルで実行し、すべての変更を表示するには、site​ ディレクトリで次のコマンドを実行します。

$ rackup
>> Thin web server (v1.5.0 codename Knife)
>> Maximum connections set to 1024
>> Listening on 0.0.0.0:9292, CTRL+C to stop

ブラウザに移動して http://localhost:9292​ を開き、ロードされた静的サイトを表示します。サイトに変更を加えたとき、その変更を表示するにはブラウザをリロードするだけです。サーバーを再起動する必要はありません。

Heroku へのデプロイ

サイトを Heroku にデプロイする前に、Heroku CLI の一部として自動的にインストールされた Git バージョン管理システム​にコードを保存する必要があります。site​ ルートディレクトリの内部にいる場合は、次のコマンドを実行します。

$ git init
$ heroku create
$ git add .
$ git commit -m "Initial static site template app"

Heroku にデプロイする場合も Git を使用します。

$ git push heroku master
Counting objects: 6, done.
Delta compression using up to 4 threads.
...

-----> Heroku receiving push
-----> Ruby app detected
...
-----> Launching... done, v1
       http://blazing-galaxy-997.herokuapp.com deployed to Heroku

この時点で、サイトが Heroku にデプロイされ、自動生成された URL が割り当てられています。heroku open​ コマンドを使用してサイトを開きます。

$ heroku open
Opening blazing-galaxy-997... done

更新

サイトに変更を加える場合は、必要なファイルをローカルで編集した後、それを Git にコミットし、Heroku にプッシュしてデプロイされた変更を表示します。

$ git commit -m "Update landing page"
$ git push heroku master