独自ドメインを使ってAmazon S3で静的Webサイトをホストする

  • 190
    Like
  • 0
    Comment

概要

何ができるのか

Direct Hosting Pattern.png

  • S3バケットをまるごとWeb公開することができます
  • Web公開できるのは静的コンテンツに限ります
  • 独自ドメインも使用可能です。ただしZone Apex(サブドメインなし)の利用はドメインをRoute 53でホストしてる場合のみ可能です
  • LinuxなどでWebサーバを立てる場合のように、サイジングやサーバ運用を行う必要はありません
  • ある程度までのスパイクには耐えますが、xx砲1対策などにはCloudFrontを併用しましょう

<公式ドキュメント>
http://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/hosting-websites-on-s3-examples.html
<分かりやすいスライド>
http://www.slideshare.net/horiyasu/amazon-s3web-27138902

前提条件

料金

S3の料金のみでWeb公開が利用できます。
また、サインアップ後1年間の無料利用枠があります。
https://aws.amazon.com/jp/s3/pricing/

S3 BacketをWeb公開する

  • Web公開に使用する独自ドメインを用いたFQDNを決めておく
    ex) s3.jaws-ug.tk
  • AWSにサインインする
  • S3コンソールを開く
    ※ 英語画面で説明するので日本語表示になっている場合は、画面左下の言語選択を「English」に変更する AWS Management Console 2017-06-24 10-38-08.png

  • [+ Create bucket]をクリックする
  • 上記独自ドメインのFQDNを[Backet Name]に入力する。独自ドメインをもっていない場合は、任意のバケット名でOK。リージョンはお好みで良いが、日本人向けサイトであれば東京リージョンが最もパフォーマンスが良い
    独自ドメインでWeb公開する場合、バケット名=FQDNでなければならない
  • [Next]をクリックする S3 Management Console 2017-06-24 10-42-43.png

  • [Next]を2回クリックする
  • [Create Backet]をクリックしてバケットを作成する
    S3 Management Console 2017-06-24 10-47-34.png

  • 作成したバケットを開く
    スクリーンショット 2017-06-24 10.56.13.png

  • [Properties]タブを開き[Staticwebsite hosting]を展開する
  • [Use this bucket...]を選択する
  • [Index document]にindex.htmlを入力する
  • [Save]をクリックする S3 Management Console 2017-06-24 11-07-00.png

  • [Permission]タブを開き[Bucket Policy]をクリックする
  • 画像下のJSONをコピペする
  • [Save]をクリックする S3 Management Console 2017-06-24 11-28-06.png

BucketPolicy
{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"AddPerm",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::s3.jaws-ug.tk/*"]
    }
  ]
}
  • 何か文字を書き込んだテキストファイルをindex.htmlの名前で作成し、Web公開するバケットにファイルをアップロードする S3 Management Console 2017-06-24 12-40-52.png

  • Endpointのリンクをクリックして先ほどTXTファイルに書き込んだ文字が表示されたら成功
    S3 Management Console 2017-06-24 12-46-12.png

独自ドメインでアクセスできるようにする

独自ドメインをRoute 53でホストしている場合

あらかじめ決めておいたFQDNでAレコードAliasを登録する
http://qiita.com/Ichiro_Tsuji/items/8471fe0b3d4d17cde146#aレコードaliasの登録

独自ドメインをRoute 53 以外のDNSでホストしている場合

あらかじめ決めておいたFQDNでDNSにCNAMEレコードを作成し、先ほどクリックしたS3バケットのEndpointを登録する

APIアクセス用のKeyを作成する

他のアプリケーションからS3バケットにAPIでアクセスするために、IAM Access Keyを作成します
今回作成するのは下表のユーザーおよびそれにひも付くKeyです。画像内の入力文字列はサンプルですので、説明文で指定した文字列を入力してください。

ユーザー名 アクセス権
s3 AmazonS3FullAccess
  • AWSにサインインする
  • Identity and Access Management(IAM)コンソールを開く
    ※ 英語画面で説明するので日本語表示になっている場合は、画面左下の言語選択を「English」に変更する
    AWS Management Console 2017-02-05 15-21-17.png

  • 「s3」というUser nameでProgrammatic accessユーザーを作成する
    IAM Management Console 2017-02-05 15-25-26.png

    IAM Management Console 2017-02-05 15-27-19.png

  • [Attach existing policies directly]をクリックし、[s3]で検索して、[AmazonS3FullAccess]にチェックを入れる
  • [Next: Review]をクリックする
    IAM Management Console 2017-02-05 15-36-54.png

  • [Create user]をクリックする
    IAM Management Console 2017-02-05 15-38-24.png

  • 認証情報の書かれたCSVをダウンロードし、[Close]をクリックする
    IAM Management Console 2017-02-05 15-41-43.png

参考

S3バケットのコンテンツを管理するには、専用アプリを利用すると便利です。バケットへのアクセスには先ほど作成したIAM Access Keyを使用します。
<Mac用>
Cyberduck
https://cyberduck.io/index.ja.html?l=ja

<Windows用>
CloudBerry Explorer
http://www.cloudberrylab.com/free-amazon-s3-explorer-cloudfront-IAM.aspx


  1. 不倫謝罪程度のことではびくともしないようです