Zenn
😘

AWSで独自ドメインをCloudFront + HTTPSで公開するまでの手順まとめ

に公開
AWS
S3
CloudFront
Route53
記事投稿コンテスト「TypeScriptでやってみた挑戦・学び・工夫」
tech

概要

自分のホームページを作成して、AWSのサービスを使って「https://www.hirotakagroup.com」で公開するまでの実践ログをまとめました。

  • ドメイン購入: Route 53
  • SSL証明書: ACM
  • CDN + HTTPS: CloudFront
  • DNS設定: Route 53
  • 配信元: S3 static hosting
用户访问 → 自定义域名（www.kanpo.jp）
         ↓
      Route 53 DNS → CloudFront CDN（绑定 ACM SSL 证书）
                               ↓
                             S3 静态页面托管

実装手順

1. Route53でドメインを購入

  • 例: hirotakagroup.com
  • Hosted Zone は自動生成される

2. 証明書(SSL)をACMで申請

  • 部署地域は必ず us-east-1 (バージニア北部)を選択
  • 証明書には以下を追加
    • hirotakagroup.com
    • www.hirotakagroup.com
  • DNS検証を選択
  • 「Route 53 でレコードを作成」を抽出し、CNAME を追加
  • ACMステータス：「発行済み」
【問題1】ACMの状態が保留中の検証から変わらない
  原因:
  - Hosted Zone のネームサーバーがドメイン側に設定されていない
  解決:
  - Route 53 のドメイン管理画面 (ドメインズ)に行き、ネームサーバーをHosted Zoneに合わせて設定

3. CloudFront で配信サービスを作成

  • Origin: S3 static website hosting(.s3-website-...amazonaws.com）
  • Alternate Domain Names (CNAME): www.hirotakagroup.com
  • SSL certificate: ACM で発行済みのもの
  • Default root object：index.html

4. Route53でDNS Aレコードを追加

  • 名前: www
  • タイプ: A - エイリアス
  • リソース: CloudFront を選択
  • TTL: 300 (default)
【問題2】AレコードにCloudFrontのURLを直接入力してエラー
原因:
- CloudFrontのURL(dxxx.cloudfront.net)を直接入れるのはエイリアスでは不正
解決:
- 「エイリアス」をON
- リストに表示されるCloudFrontを選択

5. S3側の設定

  • 「すべての公開アクセスをブロック」 を OFF にする
  • Bucket Policy を以下のように追加
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowPublicRead",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}
  • index.html が格式のルートにあることを確認

結果

https://www.hirotakagroup.com
の通信が CloudFront 経由 + HTTPS で公開され、ブラウザから問題なくアクセスできるようになりました。
自作サイトの公開を考えている方や、AWSでのドメインマネージメントを使ってみたい方の参考になれば幸いです！

Discussion