2012年4月6日金曜日

[AWS]S3 で静的な Web サイトを構築する方法

S3 に静的な Web サイトを構築してみる。十分な帯域を持ち、大量アクセスにも耐えられ、一瞬で準備できるということでキャンペーンサイトなどに向いていると思う。

とりあえず、ドメイン名を取得しよう。レジストラはどこでもいい。とりあえず、僕は legna.org というドメイン名をもっているのでそれを使用する。

1. Web サーバーを作成 (Amazon S3)
  1. Amazon Management Console にアクセス
  2. Amazon S3 タブをクリック
  3. Create Bucket をクリック
  4. Bucket Name に取得したドメイン名に www を付けたサブドメイン名を入力
    (例:example.com を取得している場合、www.example.com を入力する。)
  5. Region で Tokyo を選択
  6. Create をクリック
  7. Bucket パネルの Actions > Properties をクリック
  8. Properties パネルの Website タブをクリック
  9. Enabled をチェック
  10. Index Document にインデックスドキュメント名を入力
    (例:index.html)
  11. Error Document にエラードキュメント名を入力
    (例:error.html)
  12. Endpoint をメモ
  13. Save をクリック
2. Web サイトをアップロード (Amazon S3)
  1. Objects and Folders パネルの Upload をクリック
  2. インデックスドキュメントとエラードキュメントを Add Files をクリックして追加
  3. Set Details をクリック
  4. Set Permissions をクリック
  5. Make Everything Public をチェック
  6. Start Upload をクリック
  7. Endpoint の URL にアクセスし、インデックスドキュメントが表示されることを確認
  8. Endpoint に存在しないファイル名を付けた URL にアクセスし、エラードキュメントが表示されることを確認
3. DNS のゾーンを作成 (Amazon Route 53)
  1. Amazon Route 53 タブをクリック
  2. Create Hosted Zone をクリック
  3. 取得したドメイン名を Domain Name に入力
  4. 適宜コメントを Comment に入力
  5. Create Hosted Zone をクリック
  6. Delegation Set のネームサーバー名をメモ
  7. レジストラのドメイン名管理画面でネームサーバー名を登録
4. DNS のレコードを作成 (Amazon Route 53)
  1. 作成したゾーンをチェック
  2. Go to Record Sets をクリック
  3. Create Record Set をクリック
  4. Name に www を入力
  5. Type で CNAME を選択
  6. Value に Endpoint のホスト名部分を入力
    (例:www.example.com.s3-website-ap-northeast-1.amazonaws.com)
5. ブラウザからアクセスして確認
(例:http://www.example.com)
補足1. Web サーバーへのアップロードに Enhanced Uploader を使用する方法 (Mac OS X Lion)
これを使用するとフォルダごとアップロードできる。
  1. アプリケーション > ユーティリティ > Java Preferences を起動
  2. 「アプレットプラグインおよび Web Start アプリケーションを有効にする」をチェック
  3. Java Preferences を終了
  4. Safari を再起動(起動していた場合)
  5. S3 の Upload ポップアップウィンドウで Enable Enhanced Uploader をクリック
  6. アプレットの実行について警告が出るので、許可をクリック
これだけで、静的な Web サイトのための Web サーバーが準備できる。また、アカウントのアクセスキーを新しめのバージョンの Cyberduck に設定すれば、Cyberduck からもアップロードできるので試してみてほしい。