S3の静的webサイトホスティング機能を使ってサイトを確認できるまでの手順

2024/08時点

前提：

awsアカウントがある
http接続で良い
- （静的webサイトホスティング機能を使う = S3単独でやる場合）
- CloudFrontも活用することでhttps接続も可能
  - 参考：【AWS】S3でバケットを公開せずHTTPSのみで静的サイトを公開する方法
    - 一次情報については後述の補足を参照

公開URLの取得まで：
3. コンソールからs3バケットを作る
4. ローカルでindex.htmlを作成する
5. コンソールから作成したindex.htmlをS3にアップロード
6. コンソールからs3バケットで静的webサイトホスティング機能を有効化する
7. コンソールからサイトのURLが取得可能になる

トラブル対応

URLにアクセスすると403エラーになる
2. バケットポリシー設定を見直す
3. ブロックパブリックアクセス設定を見直す

参考

ふじしろ

このチュートリアルのとおりにやればエラーにならずに進める（はず）

ふじしろ

補足

CloudFrontからS3の静的webサイトを公開する方法

アクセス元（ビューワー）とCloudFrontの間の通信をhttpsにする方法

ふじしろ

S3の静的webサイトホスティング機能でページを公開するまで（セキュリティ等無視なので練習用であることに注意）：
コンソールからs3バケットを作る
ローカルでindex.htmlを作成する
コンソールから作成したindex.htmlをS3にアップロード
コンソールからs3バケットで静的webサイトホスティング機能を有効化する
バケットポリシーでgetObjectを許可する（やらないと403）
ブロックパブリックアクセス設定でパブリックアクセスを許可する（やらないと403）
コンソールで確認したサイトのURLにアクセスする
index.htmlが確認できる
他のhtmlをバケットに追加すればパス指定でアクセスできる

CloudFront経由でページにアクセスできるようにするまで
CloudFrontディストリビューションを作成する
オリジンとしてS3バケットを設定する
ディストリビューションのURLにアクセスする
2で設定したS3バケットの対象オブジェクトのpathをリクエストする