AWS S3で静的ページ(SPA)をホスティングする

今回のゴール

S3のバゲットに静的ページを配置してRoute53を使用して独自ドメインでアクセスできるようになる

S3バゲットを作成

AWSのコンソールのS3メニューよりバケットを作成するボタンをクリックします。

バケット名をFQDNで入力します。
今回は、www.afuro.bizで入力しました。

オプションの設定をそのままスルーして、
アクセス許可の設定で「パブリックアクセスをすべてブロック」のチェックを外し「現在の設定により、このバケットと中のオブジェクトがパブリックになる可能性があることを了承します。」にチェックをつけます。

「バケットを作成」をクリックします。

引き続き設定していきます。
作成されたバケットをクリックします。

「プロパティー」メニューで、「Static wesite Hosting」を選択して、”このバケットを使用してウェブサイトをホストする”を選択して「インデックスドキュメント」を入力します。
今回は「index.html」としました
※SPAの時は「エラードキュメント」に「インデックスドキュメント」と同じ値を入力します。そうしないと実際にないファイルを表示しようとしてエラーとなります。

次に「アクセス権限」メニューより「バケットポリシー」を選択して、バケットポリシーを入力します。

 {
  "Version":"2012-10-17",
  "Statement":[{
	"Sid":"PublicReadGetObject",
        "Effect":"Allow",
	  "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::www.afuro.biz/*"
      ]
    }
  ]
}

動作確認用にindex.htmlファイルをバケットにアップロードします。（適当に作成してください）
「概要」メニューから「アップロード」ボタンを押します。