LoginSignup
342

More than 3 years have passed since last update.

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

Last updated at Posted at 2016-02-07

概要

何ができるのか

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回クリックする
  • 今回はWeb公開(パブリックアクセスを許可)するので[Block all public access]のチェックを外し、[I acknowledge...]にチェックを入れ、[Next]をクリックする
    スクリーンショット 2020-05-26 17.31.29.png
  • [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をコピペする。バケット名(s3.jaws-ug.tk)は修正すること
  • [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 スクリーンショット 2020-05-27 9.02.48.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用>
WinSCP
https://forest.watch.impress.co.jp/library/software/winscp/

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


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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
342