概要
AWS S3を使った静的ウェブサイトホスティングは、簡単かつ低コストで実現可能なウェブサイト構築手法です。本記事では、CloudFrontやRoute 53を組み合わせてHTTPS化および独自ドメイン設定を行う具体的な手順を徹底解説します。また、運用上の注意点やトラブルシューティング方法も網羅しています。
1.AWS S3静的ウェブサイトホスティングとは
AWS S3の静的ウェブサイトホスティング機能は、HTML、CSS、JavaScriptなどの静的ファイルを配信するためのコスト効率に優れたソリューションです。
利用する理由：
- 簡単な設定でグローバル配信が可能
- サーバーレスで運用：サーバー管理不要
- 自動スケーリングに対応し、アクセス量に応じて適切なパフォーマンスを提供
2. 手順詳細
Step 1: S3バケットの作成
- AWSコンソールでS3サービスにアクセス
- 「バケットの作成」をクリック
名前：example-website（一意の名前）
地域：任意 - 「パブリックアクセスをすべてブロック」のチェックを外す
バケットポリシー設定例：
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::example-website/*"
}
]
}
4.「静的ウェブサイトホスティング」を有効にし、以下を入力：
インデックス文書：index.html
エラードキュメント：error.html
Step 2: CloudFrontの設定（HTTPS対応）
- CloudFrontディストリビューションの作成
1.1 オリジン：
1.1.1 オリジンタイプ：S3バケット
1.1.2 「オリジンパス」：空白のまま
1.2 キャッシュ動作：
1.2.1 GET と HEAD メソッドを有効にする。
1.2.2 キャッシュポリシー：「CachingOptimized」を選択。 - SSL/TLS設定
デフォルト証明書を使用する場合：「CloudFrontが提供する証明書」を選択。
独自ドメインを使う場合：「ACMで証明書を発行」を選択。 - ディストリビューションの作成
Step 3: Route 53で独自ドメインを設定
- ドメインを購入するか、既存のドメインを使用
- ホストゾーンでAレコードを追加
レコード名：wwwまたは@
タイプ：A - IPv4アドレス
エイリアスターゲット：CloudFrontディストリビューションを指定
Step 4: HTMLファイルのアップロード
S3 CLIを使用してHTMLファイルをアップロード：
aws s3 cp ./index.html s3://example-website --acl public-read
静的サイトのアクセス確認：
http://example-website.s3-website-<リージョン>.amazonaws.com
CloudFrontのURLをHTTPSで確認：
https://<CloudFrontのドメイン名>
3. 注意点
-
パブリック設定
S3バケットはプライバシーやセキュリティリスクを考慮し、意図的に公開しない限り安全なままにしておく。
デフォルトのパブリックブロックは慎重に外す。 -
CloudFrontキャッシュの削除 ファイルを更新後、以下のコマンドでキャッシュをクリア：
aws cloudfront create-invalidation --distribution-id <ディストリビューションID> --paths "/*"
- HTTPS対応 SSL証明書をACMで発行し、CloudFrontに適用
4. トラブルシューティング
- 403 Forbidden
原因：S3バケットポリシーが適切でない。
解決：s3:GetObjectの権限を確認。 - ドメインが解決しない
原因：Route 53の設定が未完了、またはDNS伝播が遅延。
解決：設定を再確認し、最大72時間待機。
最後
AWS S3の静的ホスティングは、設定が簡単で非常に実用的です。特にCloudFrontやRoute 53と連携することで、セキュアでスケーラブルなWebサイトを構築可能です。本記事を参考にして、ぜひAWSの力を活用してください！
初心者ですので、誤りがございましたら、ご指摘をお願いいたします。