AWS
S3
JAWS-UG

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

More than 1 year has passed since last update.


概要


何ができるのか

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. 不倫謝罪程度のことではびくともしないようです