day3: S3でのWebサイトホスティング構成


【手順】

  1. S3バケットの作成と静的ウェブサイトホスティング設定
  2. HTML/CSSファイルをS3バケットにアップロード
  3. バケットポリシーの設定
  4. CloudFrontディストリビューションの作成
  5. HTTPS対応のための証明書取得(ACM
  6. 独自ドメインの設定
  7. HTTP → HTTPSへのリダイレクト設定
  8. 動作確認

【実践したこと】

新しいS3バケットを作成し、静的ウェブサイトホスティングを有効化。 index.htmlとエラーページ(error.html)を設定。

ホスティングの有効化画像

Webサイトのコンテンツファイル(HTML/CSSなど)をアップロード。 パーミッション設定も忘れずに確認。

ファイルアップロードの画像

パブリックアクセスが許可されるように、バケットポリシーを記述・反映。

バケットポリシーの記述画像

オリジンにS3バケットを指定し、ディストリビューションを作成。

ディストリビューション

AWS Certificate Managerを使って独自ドメイン用のSSL証明書を取得。 DNS認証のため、Route 53にCNAMEレコードを追加。

CloudFrontディストリビューションにカスタムドメインを設定し、ACM証明書を適用。

レコード追加

CloudFrontのビューワープロトコルポリシーで「Redirect HTTP to HTTPS」に設定。

Redirect HTTP to HTTPSに設定する画像

【結果】

CloudFrontとS3を用いた独自ドメイン(www.sharkfreeness.com)での静的Webサイトの公開に成功しました。

独自ドメインで静的webサイトの公開に成功した画像

【苦戦したこと】

証明書の発行が確定されるまでが一番大変でした。

最初はレコードを作成したのに、なぜ証明書が保留中になっているのか分からず、原因の特定に時間がかかりました。

調べた結果、作成したレコードのタイプがAだったことが原因と判明しました。

そこで、レコードタイプCNAMEに変更し、再度DNS設定を行ったところ、無事に証明書の取得が完了しました。

【今後の活用】

今回の作業を通じて、証明書の取得に必要なDNS設定の重要性を学びました。

ACMでの証明書発行にはタイプCNAMEのDNSレコードが必要であること、また正しい手順を理解しておくことの大切さを実感しました。

今後同様の作業を行う際には、事前にレコードタイプやDNS設定内容を確認し、スムーズに作業を進められるようにしていきたいです。

また、コストを抑えるためにCloudFrontの一部オプション設定(標準ログ記録など)を今回は省略しましたが、次回以降のプロジェクト規模や目的に応じて、必要な機能を適切に選択していきたいと考えています。