概要

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の力を活用してください！

初心者ですので、誤りがございましたら、ご指摘をお願いいたします。