S3にウェブサイトをホスティングする
この記事は最終更新日から1年以上が経過しています。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fs3-1.webp?alt=media&token=a9dc46ee-4978-4d2e-a350-22eeade4b470)
S3に新規サイトをホスティングすることになりましたので、作業ログを残しました。
公式のドキュメントを見ながら作業しました。(https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteHosting.html)
まずはAWSのS3にバケットを作成しました。ユニークなバケット名を入力し設定はそのままで作成します。
(*バケット名にドメインを当てる場合はバケット名とドメインを同じにする必要がありますのでこの段階でドメイン名にするのがおすすめです。)
そして下記のドキュメントの「ウェブサイトのホスティングの有効化」の「S3 コンソールの使用」を参考に作成していきました。
作成したバケットの名前を選択し、プロパティタブを選択します。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fs3-2.webp?alt=media&token=4951f25d-a38c-4f7a-a331-7b22127c2b62)
ページの下部にある「静的ウェブサイトホスティング」の編集を選択します。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fs3-3.webp?alt=media&token=993ffb0b-8b80-423e-bd7d-7dbb08c73c5b)
静的ウェブサイトホスティング欄の有効にするを選択します。
インデックスドキュメント欄に「index.html」を入力します。エラードキュメント - オプション欄に「404.html」を入力します。変更を保存します。
ページの下部を確認すると、バケットウェブサイトエンドポイントが作成されました。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fs3-4.webp?alt=media&token=33c02207-30ef-4a1d-baf5-ecba95b1a6c8)
バケットにindex.htmlをアップロードし生成されたバケットウェブサイトエンドポイントをブラウザで開きます。
すると、403エラーでindex.htmlにアクセスできません。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fs3-5.webp?alt=media&token=51e6aff1-5c56-426a-8265-1ca69c2bf580)
ウェブサイトアクセスのアクセス許可の設定をしていきます。
下記のドキュメントを参考にします。(https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html)
まず、S3 のパブリックアクセスのブロック設定を編集します。
作成したバケットの名前を選択し、アクセス許可タブを選択します。
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fs3-6.webp?alt=media&token=3a7100df-ca49-4094-b80e-c8b93e05d288)
パブリックアクセスのブロック (バケット設定) の編集を選択します。
「パブリックアクセスをすべて ブロック」のcheckboxを外し変更の保存を選択します。
次に、バケットポリシーを追加します。
作成したバケットの、アクセス許可タブにある、バケットポリシー欄を編集します。
下記のコードのResourceの「Bucket-Name」を作成したバケット名に更新し編集を選択しコードを貼り付けます。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::XXXXXXX/*"
]
}
]
}
![](https://firebasestorage.googleapis.com/v0/b/webdevelopers-1886f.appspot.com/o/images%2Fs3-7.webp?alt=media&token=f94e262e-1a46-4f35-b780-aacbc1cf14f7)
無事に静的ファイルをホスティングすることができました。
次回はこのバケットにドメインを当てたいと思います。