S3での静的ウェブサイトホスティングの設定方法を解説します。
静的ウェブサイトホスティングを設定するバケットを作成する
「バケットを作成」をクリックします。
![](https://ootkblog.com/wp-content/uploads/2024/01/aws-s3-static-web-hosting-setting-1-1024x385.png)
バケットを作成します。
![](https://ootkblog.com/wp-content/uploads/2024/01/aws-s3-static-web-hosting-setting-2-281x1024.png)
静的ウェブサイトホスティングを設定する
静的ウェブサイトホスティングしたいバケットに移動し、「プロパティ」に移動します。
![](https://ootkblog.com/wp-content/uploads/2024/01/aws-s3-static-web-hosting-setting-3-1024x231.png)
静的ウェブサイトホスティングの「編集」をクリックします。
![](https://ootkblog.com/wp-content/uploads/2024/01/aws-s3-static-web-hosting-setting-4-1024x487.png)
静的ウェブサイトホスティングを有効にします。インデックスドキュメントに「index.html」、エラードキュメントに「error.html」を設定します。
![](https://ootkblog.com/wp-content/uploads/2024/01/aws-s3-static-web-hosting-setting-5-766x1024.png)
htmlファイルのアップロード
静的ウェブサイトホスティングを設定したバケットに、index.htmlファイルとerror.htmlファイルをアップロードします。
![](https://ootkblog.com/wp-content/uploads/2024/01/aws-s3-static-web-hosting-setting-6-1024x351.png)
![](https://ootkblog.com/wp-content/uploads/2024/01/aws-s3-static-web-hosting-setting-7.png)
ACLとバケットポリシーを設定する
ファイルを選択した状態で、「アクション」→「ACLを使用して公開する」をクリックします。
![](https://ootkblog.com/wp-content/uploads/2024/01/aws-s3-static-web-hosting-setting-8-1024x646.png)
アクセス許可に移動し、バケットポリシーの「編集」をクリックします。
![](https://ootkblog.com/wp-content/uploads/2024/01/aws-s3-static-web-hosting-setting-9-1024x493.png)
以下のバケットポリシーを設定します。
※”Resource”の「Bucket-Name」はS3バケットの名前に書き換えてください。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::Bucket-Name/*"
]
}
]
}
![](https://ootkblog.com/wp-content/uploads/2024/01/aws-s3-static-web-hosting-setting-10-1024x673.png)
参考:チュートリアル: Amazon S3 での静的ウェブサイトの設定
静的ウェブサイトホスティングができているか確認する
静的ウェブサイトホスティングを設定したバケットのプロパティに移動します。
![](https://ootkblog.com/wp-content/uploads/2024/01/aws-s3-static-web-hosting-setting-11.png)
静的ウェブサイトホスティングのバケットウェブサイトエンドポイントをコピーします。
![](https://ootkblog.com/wp-content/uploads/2024/01/aws-s3-static-web-hosting-setting-12-1024x485.png)
ブラウザに貼り付け、Enterキーを押すとindex.htmlの内容が表示されました。
![](https://ootkblog.com/wp-content/uploads/2024/01/aws-s3-static-web-hosting-setting-13-1024x495.png)