Table of Contents [expand]
この記事は Marshall Huss によって執筆され、Lee Reilly からの寄稿が含まれています。Lee は、GitHub Enterprise のプログラマーハッキングです。
静的サイトは、動的なサーバー側の機能またはアプリケーションロジックが含まれていないサイトです。この例として、完全に HTML と CSS で構成されているパンフレットサイトや、サーバーコンポーネントと対話しない Flash に組み込まれたクライアント側の対話型ゲームなどがあります。これらのサイトにはユーザーへのコンテンツ配信のためにのみ Web サーバーが必要ですが、Heroku のようなプラットフォームの使用が、すばやいプロビジョニングとこのようなインフラストラクチャへのデプロイのために引き続き有効です。
Rack フレームワークを使用すると、静的サイトを Heroku にすばやくデプロイできます。
この記事のサンプルアプリケーションのソースは、GitHub で入手できます。
前提条件
このガイドは、次のものが用意されていることを前提としています。
- Heroku アカウント。無料ですぐにサインアップできます。
- インストールされた Heroku CLI。
- インストールされた Ruby と Bundler gem。
ディレクトリ構造の作成
静的ファイルを処理するための 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