👋

AWS S3を使って静的ウェブサイトホスティングをします

2023/09/15に公開

記事を書くきっかけ

AWS S3を使って静的ファイルを公開しようとしたところ403 Forbiddenになってしまった。
その解決方法が分かったので記事にしました。

静的ウェブサイトをホスティングする。

マネジメントコンソールでS3のページを開いて、「バケットを作成」をクリックする。
バケット名を入力するのですが、こちらはユニークである必要があります。その他の設定はデフォルトのままで、右下の「バケットを作成」をクリックする。これでバケットを作成することができました。

念のため次のコマンドで先程作成したバケットを確認します。

aws s3 ls

アップロードしたいファイルが存在するディレクトリに移動して、次のコマンドを実行します。

aws s3 sync . s3://バケット名

マネジメントコンソールでファイルがアップロードされていることを確認できる。

先程作成したバケットを選択し、プロパティをクリックする。
下の方までスクロールすると「静的ウェブサイトホスティング」が無効になっているので編集する。

静的ウェブサイトホスティングを有効にする。
ホスティングタイプは静的ウェブサイトをホストするを選択。
インデックスドキュメントはindex.htmlとしてその他の設定はそのままで「変更の保存」をクリックする。

以上の設定が反映されるとつぎのようなURLが表示される。

こちらのURLをクリックすると次のような画面が表示される。

S3で静的ウェブサイトをホスティングするにはアクセス許可の設定が必要になるようです。

上記のページに設定方法が記載されていました。

先程作成したバケットを選択して、アクセス許可をクリックする。
ブロックパブリックアクセス (バケット設定)という項目があるのでこちらの編集をクリックする。
次の画像のようにチェックを全て外した状態で変更の保存をクリックして、確認とする。

ウェブサイトアクセスのアクセス許可の設定に記載されているバケットポリシーをコピーして、作成したバケットのアクセス許可のバケットポリシーに貼り付ける。このときに、ResourceのBucket-Nameの部分は作成したバケット名に変更する。

以上で設定が完了したはずなので、プロパティから先程のURLにアクセスしてみると、次のように画面が表示されることを確認できた。

AWS S3を使って静的ウェブサイトをホスティングすることができました！