🚀

静的サイトをAWSと独自ドメインでHTTPSデプロイする完全ガイド

に公開
AWS
S3
CloudFront
Route 53
https
tech

はじめに

静的サイトとWordpressを公開していたのですが、契約していたサーバーが契約更新の時期になったため、そのまま継続するかどうか迷っていました。

ソフトウェアエンジニアになり、フロントエンド、バックエンドに携わるようになって、今後インフラも触る機会が出てくることがあるのかなと思っています。

そこで、AWSで静的サイトとWordpressで公開できないのかな？と調べていたらできるということなので、まずは静的サイトをAWSでデプロイしてみました。

結構沼ったので、次やる時に沼らないように記録しておきたいと思います。

構成

今回構築する構成は以下の通りです：

ユーザー
  ↓
独自ドメイン（お名前.com取得）
  ↓
Route 53（DNS）
  ↓
CloudFront（CDN + HTTPS）
  ↓
S3バケット（静的ファイル格納）

使用するAWSサービス

  • Amazon S3: 静的ファイルの保存
  • CloudFront: CDN配信とHTTPS化
  • Certificate Manager (ACM): SSL証明書の発行
  • Route 53: DNSサーバー（ホストゾーン管理、レコード設定）

※今回はお名前.comで取得した独自ドメインを使用し、DNSサーバーをRoute 53に切り替えます。

Step 1: ACM（SSL証明書）の作成

CloudFrontでHTTPSを使うためには、SSL証明書が必要です。

⚠️ 超重要: 必ず us-east-1 で作成

CloudFront用の証明書はバージニア北部（us-east-1）リージョン限定です。
他のリージョンで作成すると、後でCloudFrontにアタッチできません。

手順

  1. AWSコンソールの右上でリージョンを us-east-1 に変更
  2. サービスから「Certificate Manager」を開く
  3. 「証明書をリクエスト」をクリック
  4. 「パブリック証明書をリクエスト」を選択
  5. ドメイン名を入力
    • 例: middle.example.com（サブドメイン）
    • または *.example.com（ワイルドカード）
  6. 検証方法: DNS検証を選択
  7. 「リクエスト」をクリック

ACMの証明書リクエスト画面
ACMの証明書リクエスト画面（ドメイン名入力欄）

ACMのDNS検証待ち画面
検証待ちの画面（CNAME情報が表示されている部分）

Route 53でDNS検証

ACMで表示されるCNAMEレコードを、Route 53に追加します。

⚠️ 注意: この時点では、お名前.comのネームサーバーをまだAWSに変更していなくても問題ありません。Route 53にレコードを追加しておけば、後でネームサーバーを切り替えた時に検証が完了します。

方法1: Route 53で自動追加（簡単・推奨）

  1. ACMの証明書詳細画面で「Route 53でレコードを作成」ボタンをクリック
  2. 自動的にRoute 53にCNAMEレコードが追加される

ACMのRoute 53レコード作成ボタン
ACMの「Route 53でレコードを作成」ボタン

方法2: Route 53で手動追加

  1. Route 53サービスを開く（後で作成するホストゾーンを先に作成しておく必要があります）
  2. 対象ドメインのホストゾーンを開く
  3. 「レコードを作成」をクリック
  4. 以下のように入力:
    • レコード名: ACMで表示されたCNAME名（例: _abcdefg1234567890.middle.example.com.）
    • レコードタイプ: CNAME
    • 値: ACMで表示された値（例: _xyz123.acm-validations.aws.）
    • TTL: 300（デフォルトでOK）
  5. 「レコードを作成」をクリック

Route 53のCNAME検証レコード追加画面
Route 53のCNAME検証レコード追加画面

数分〜1時間ほどでACMのステータスが「発行済み」になります（ネームサーバー切り替え後）。

Step 2: Route 53ホストゾーンの作成

独自ドメインのDNS管理をRoute 53で行うため、ホストゾーンを作成します。

手順

  1. Route 53サービスを開く
  2. 「ホストゾーンの作成」をクリック
  3. 以下のように設定:
    • ドメイン名: 取得したドメイン名（例: example.com）
    • タイプ: パブリックホストゾーン
  4. 「ホストゾーンの作成」をクリック

Route 53ホストゾーン作成画面
Route 53ホストゾーン作成画面

NSレコードの確認

ホストゾーンが作成されると、4つのNSレコードが自動的に生成されます。

  1. 作成したホストゾーンを開く
  2. 「NSレコード」の値を確認（4つのネームサーバーが表示される）
    • 例:
      • ns-1234.awsdns-56.org.
      • ns-789.awsdns-12.com.
      • ns-345.awsdns-67.net.
      • ns-890.awsdns-34.co.uk.

Route 53のNSレコード一覧画面
Route 53のNSレコード一覧画面（4つのネームサーバーが表示されている）

お名前.comでネームサーバーを変更

Route 53をDNSサーバーとして使うため、お名前.comのネームサーバー設定をAWSのものに変更します。

  1. お名前.com Navi にログイン
  2. 「ドメイン一覧」→ 対象ドメインを選択
  3. 「ネームサーバーの変更」をクリック
  4. 「他のネームサーバーを利用」を選択
  5. Route 53で確認した4つのNSレコードを入力
    • ネームサーバー1: ns-1234.awsdns-56.org
    • ネームサーバー2: ns-789.awsdns-12.com
    • ネームサーバー3: ns-345.awsdns-67.net
    • ネームサーバー4: ns-890.awsdns-34.co.uk
    • ※末尾のピリオドは削除して入力
  6. 「確認」→「設定する」をクリック

お名前.comのネームサーバー変更画面
お名前.comのネームサーバー変更画面（4つのNSを入力した状態）

⚠️ ネームサーバー変更の反映には最大48時間かかることがあります。

Step 3: S3バケットの作成

静的ファイル（HTML/CSS/JS）を保存するS3バケットを作成します。

手順

  1. S3サービスを開く
  2. 「バケットを作成」をクリック
  3. 以下のように設定:
    • バケット名: 任意（例: my-static-site-bucket）
    • リージョン: 東京（ap-northeast-1）でOK
    • パブリックアクセスをすべてブロック: ✅ オン（重要）
    • バケットのバージョニング: オフでOK
  4. 「バケットを作成」をクリック

S3バケット作成画面
S3バケット作成画面（パブリックアクセスのブロック設定）

ファイルをアップロード

  1. 作成したバケットを開く
  2. 「アップロード」をクリック
  3. index.html や CSS、JSファイルをアップロード
  4. 「アップロード」をクリック

S3バケット内ファイル一覧
ファイルアップロード後のバケット内ファイル一覧

Step 4: CloudFrontディストリビューションの作成

ここが最も重要で、最も沼りやすいポイントです。

手順

  1. CloudFrontサービスを開く
  2. 「ディストリビューションを作成」をクリック

Origin（オリジン）設定

  1. Origin domain: 作成したS3バケットを選択

    • ⚠️ 重要: 通常のS3エンドポイントを選択（xxx.s3.ap-northeast-1.amazonaws.com）
    • ❌ Website endpoint は選ばない

  2. Origin access: 「Origin access control settings (recommended)」を選択

  3. 「Create control setting」をクリック

    • 名前: そのままでOK
    • 「Create」をクリック

  4. Origin access control で作成したOACを選択

CloudFrontのOrigin設定画面
Origin設定画面（S3バケット選択とOAC設定）

Default cache behavior

  1. Viewer protocol policy: 「Redirect HTTP to HTTPS」を選択
  2. Allowed HTTP methods: GET, HEAD（静的サイトなのでこれでOK）
  3. Cache policy: CachingOptimized（そのままでOK）

CloudFrontのCache behavior設定画面
Cache behavior設定画面

Settings

  1. Alternate domain name (CNAME): 独自ドメインを追加
    • 例: middle.example.com
  2. Custom SSL certificate: Step 1で作成したACM証明書を選択
  3. Default root object: index.html と入力

CloudFrontのSettings画面
Settings画面（CNAME、SSL証明書、Default root object）

  1. 「ディストリビューションを作成」をクリック

作成後、5〜15分でステータスが「Enabled」になります。

S3バケットポリシーの更新（重要）

CloudFront作成後、警告メッセージが表示されます。
「S3バケットポリシーを更新してください」という内容です。

  1. CloudFrontのディストリビューション詳細画面を開く
  2. 「Origins」タブ → オリジンを選択 → 「Edit」
  3. 表示されるバケットポリシーをコピー
  4. S3サービスを開く
  5. バケットを選択 → 「アクセス許可」タブ
  6. 「バケットポリシー」→「編集」
  7. コピーしたポリシーを貼り付け
  8. 「変更を保存」

S3バケットポリシー編集画面
バケットポリシー編集画面（ポリシーが貼り付けられた状態）

これで、CloudFrontからS3へのアクセスが許可されます。

Step 5: Route 53でDNS設定

独自ドメインをCloudFrontに向けるため、Route 53にCNAMEレコードを追加します。

手順

  1. CloudFrontのディストリビューション詳細画面で、Distribution domain nameをコピー
    • 例: d123abc456def.cloudfront.net

CloudFrontのDistribution domain name
CloudFrontのDistribution domain name

  1. Route 53サービスを開く
  2. Step 2で作成したホストゾーンを開く
  3. 「レコードを作成」をクリック
  4. 以下のように設定:
    • レコード名: サブドメイン部分のみ（例: middle）
    • レコードタイプ: CNAME
    • 値: CloudFrontのDistribution domain name（例: d123abc456def.cloudfront.net）
    • TTL: 300（デフォルトでOK）
    • ルーティングポリシー: シンプルルーティング
  5. 「レコードを作成」をクリック

Route 53のCNAMEレコード作成画面
Route 53のCNAMEレコード作成画面

CNAME追加後のレコード一覧
CNAME追加後のレコード一覧

DNS反映まで数分〜数時間かかることがあります。

Step 6: 動作確認

ブラウザでアクセス

https://middle.example.com にアクセスして、サイトが表示されるか確認します。

確認ポイント:

  • ✅ HTTPSで接続されている（鍵マークが表示される）
  • ✅ 独自ドメインでアクセスできる
  • ✅ index.htmlの内容が正しく表示される

ブラウザでHTTPSアクセス成功
ブラウザでHTTPSアクセスできている画面（URLバーと鍵マーク）

もし表示されない場合

1. CloudFrontのキャッシュをクリア

  1. CloudFront → ディストリビューション → 「Invalidations」タブ
  2. 「Create invalidation」
  3. Object paths: /* と入力
  4. 「Create invalidation」

2. DNSが反映されているか確認

ターミナルで以下のコマンドを実行:

nslookup middle.example.com

CloudFrontのドメインが返ってくればOK。

3. S3バケットポリシーを再確認

CloudFrontからS3へのアクセスが許可されているか、バケットポリシーを確認します。

沼ったポイントまとめ

実際にデプロイして沼ったポイントをまとめます。

沼りポイント1: ACMの証明書リージョン

症状:
CloudFrontで証明書を選択しようとしても、リストに表示されない。

原因:
ACM証明書を東京リージョン（ap-northeast-1）で作成していた。

解決:
us-east-1で証明書を作り直しました。

沼りポイント2: ドメインでサイトが表示されない

症状:
https://middle.example.com にアクセスしても403 Forbiddenエラーが出る。

原因:

  • S3バケットポリシーが正しく設定されていなかった
  • CloudFrontのOrigin設定で「Website endpoint」を選んでいた

解決:

  • S3バケットポリシーをCloudFrontの指示通りに更新
  • CloudFrontのディストリビューションを作り直し、通常のS3エンドポイントを選択

沼りポイント3: キャッシュが残って更新されない

症状:
ファイルを更新してS3にアップロードしても、古いファイルが表示される。

原因:
CloudFrontのキャッシュが残っていた。

解決:
Invalidationで /* を指定してキャッシュをクリア。

まとめ

AWSでの静的サイトHTTPSデプロイは、以下の点に注意すれば成功します：

チェックリスト

  • ✅ ACM証明書は us-east-1 で作成
  • ✅ Route 53でホストゾーンを作成
  • ✅ お名前.comのネームサーバーをAWS（Route 53）のNSに変更
  • ✅ S3バケットは非公開（パブリックアクセスブロック）
  • ✅ CloudFrontのOriginは通常のS3エンドポイントを選択
  • ✅ OAC（Origin Access Control）を設定
  • ✅ S3バケットポリシーを更新
  • ✅ CloudFrontの「Alternate domain name」に独自ドメインを追加
  • ✅ Route 53でCNAMEレコードを追加してCloudFrontに向ける

この記事が、同じように沼っている人の助けになれば幸いです！

Discussion