🌐 まとめと発展内容紹介

― Route 53 での独自ドメイン設定／S3＋CloudFront構成例 ―

🎯 学習目的

AWS Route 53 を利用して 独自ドメインを取得／設定 できるようになる
WordPress サイトを HTTPS＋独自ドメインで運用できるようにする
S3＋CloudFront の構成を理解し、静的コンテンツ高速配信の仕組みを把握する

第1部　Route 53での独自ドメイン設定

🧭 Route 53とは？

項目	内容
サービス名	AWS Route 53
役割	DNS（ドメイン名管理・ルーティング）サービス
主な機能	ドメイン登録／ゾーン管理／トラフィックルーティング
メリット	AWSサービス（EC2／S3／CloudFront）との連携が簡単・高速

🧪 実習①：独自ドメインの登録または移管

方法1：新規取得（AWS Route53上で購入）

AWSコンソール → Route 53
左メニュー → 「ドメインの登録」
希望ドメインを検索（例：mycompany.jp）
購入・支払い完了（※登録完了まで数分～数時間）

方法2：既存ドメイン（お名前.comなど）をRoute53に移管

現在のレジストラで Auth Code（認証コード） を取得
Route 53 → 「ドメインの移管」 → 指示に従って設定

🧩 Hosted Zone（ホストゾーン）の作成

ドメインを管理するための“DNSレコード置き場”を作成します。

実習手順

AWSコンソール → Route 53
左メニュー → 「ホストゾーン」 → 「ホストゾーンを作成」
ドメイン名：example.com
タイプ：パブリックホストゾーン
作成完了後、下記4つの NSレコード（ネームサーバ） が自動生成される ns-123.awsdns-45.com ns-678.awsdns-12.net ns-789.awsdns-34.org ns-890.awsdns-56.co.uk
この4つのネームサーバを、ドメイン管理元（お名前.comなど）で登録変更する

🕒 ネームサーバ変更反映まで最大48時間（通常1〜3時間）

🧪 実習②：EC2へのAレコード設定

レコードタイプ	内容
Aレコード	ドメイン名 → EC2のIPアドレス
CNAME	サブドメイン → 別名（CloudFront／S3など）

手順

作成したホストゾーンを開く
「レコードを作成」クリック
下記のように入力：

項目	設定例
名前	（空白または`www`）
レコードタイプ	A – IPv4アドレス
値	EC2のElastic IP（例：`13.114.xxx.xxx`）
TTL	300（秒）
ルーティングポリシー	シンプル

保存
ブラウザで http://example.com を開く
　→ WordPressサイトが表示されればOK

🧩 実習③：HTTPSリダイレクト確認

Let’s Encrypt（前章で導入）済みなら、
https://example.com でもアクセス可。
HTTPからHTTPSに自動転送されているか確認。

⚙️ よくあるDNSトラブル

症状	原因	対処
ドメインが開かない	ネームサーバ変更が未反映	時間を置く／NS設定再確認
IP入力で開くがドメインで開かない	Aレコード未設定／Elastic IP変更	Route53 Aレコード修正
HTTPSで警告	証明書ドメイン不一致	certbotで `-d example.com -d www.example.com` 再発行

第2部　S3＋CloudFront構成例紹介

🌍 S3＋CloudFrontとは

コンポーネント	役割
S3 (Simple Storage Service)	静的コンテンツ（画像、CSS、JS、HTMLなど）を保管するストレージ
CloudFront	CDN（コンテンツ配信ネットワーク）。世界中にキャッシュを分散配信
目的	WordPressなどの負荷軽減・高速表示・セキュリティ強化

🧩 構成イメージ

ユーザー
   │
   ▼
CloudFront（CDN）───> キャッシュされた画像/CSS/JSを配信
   │
   ▼
S3（静的ファイル保存）  
   │
   ▼
EC2（WordPress本体：PHP/DB処理のみ）

🧪 実習④：S3バケットの作成と公開設定

1️⃣ S3バケット作成

AWSコンソール → S3
「バケットを作成」
- 名前：example-static-files
- リージョン：EC2と同じ（例：ap-northeast-1）
- 「すべてのパブリックアクセスをブロック」をオフ
- 確認チェックを入れて作成

2️⃣ ファイルアップロード

例）ロゴ画像、CSSファイルなどをアップロード
/wp-content/uploads/
/wp-content/themes/yourtheme/assets/

3️⃣ バケットポリシー設定（静的サイト公開）

「アクセス許可」タブ → 「バケットポリシー」クリック
以下を貼り付け、BUCKET_NAME を置換：

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": ["s3:GetObject"],
      "Resource": ["arn:aws:s3:::example-static-files/*"]
    }
  ]
}

保存。

4️⃣ 静的サイトホスティング有効化

「プロパティ」タブ → 下部「静的ウェブサイトホスティング」
「有効化」 → インデックスドキュメントに index.html
表示される エンドポイントURL（例：
http://example-static-files.s3-website-ap-northeast-1.amazonaws.com）
にアクセスし、表示確認。

🧪 実習⑤：CloudFrontディストリビューション作成

1️⃣ CloudFrontコンソール → 「ディストリビューション作成」

設定項目	内容
オリジンドメイン名	`example-static-files.s3.amazonaws.com`
オリジンアクセス制御 (OAC)	有効化（S3への署名付きアクセス推奨）
ビヘイビア	キャッシュポリシー「CachingOptimized」
HTTPS通信	有効（デフォルト）
カスタムドメイン	`static.example.com`（Route53でCNAME登録予定）
SSL証明書	ACMで発行済みの証明書（例：`*.example.com`）を選択
価格クラス	「Price Class 200（アジア・北米・欧州）」推奨

2️⃣ デプロイ完了確認

ステータス「Enabled」
ドメイン名例：d1a2b3c4d5.cloudfront.net

3️⃣ Route 53 に CNAME レコード追加

名前	タイプ	値
static.example.com	CNAME	d1a2b3c4d5.cloudfront.net

🧱 WordPressとの連携例（発展）

方法①：プラグイン（例：WP Offload Media）

メディアアップロード先をS3に変更
CloudFront経由で配信（URL自動置換）

方法②：CDN URL 直指定

wp-config.php に追加：

define('WP_CONTENT_URL', 'https://static.example.com/wp-content');

⚡ CloudFrontのメリット

効果	内容
表示速度向上	世界各地にキャッシュ（遅延低減）
セキュリティ	DDoS対策・署名付きURL
負荷分散	EC2のリクエストを軽減
コスト	転送料金削減（キャッシュヒット率高）

🧰 運用時のベストプラクティス

項目	推奨設定
キャッシュ更新	ファイル更新時にCloudFrontのInvalidationを実施
CloudFrontログ	S3へ配信ログ保存
HTTPS統合	ACMで`*.example.com`証明書を発行・適用
バージョン管理	`/v1/style.css` → `/v2/style.css` のようにバージョンを明示

✅ チェックリスト

確認項目	完了
Route 53 でホストゾーンを作成	☐
AレコードをElastic IPに設定	☐
独自ドメインでEC2サイト表示確認	☐
S3バケットを作成し静的ホスティング有効化	☐
CloudFrontディストリビューション作成	☐
CNAMEレコードでCloudFrontと連携	☐
HTTPSアクセス（`https://static.example.com`）確認	☐

📚 まとめ

学びのポイント	内容
Route 53	AWS内でDNS設定が完結。独自ドメイン運用が容易
S3	静的コンテンツの保存・配信に最適
CloudFront	CDNとして世界中に高速配信。WordPress負荷軽減
ACM	無料のSSL証明書を発行しHTTPS運用を実現

💬 発展課題

CloudFront＋WAF（Web Application Firewall）による防御
CloudFront Functions／Lambda@Edge での動的ヘッダ制御
S3＋CloudFront＋Route53 の3層構成で 完全サーバレス静的サイト 構築

🌐 まとめと発展内容紹介

― Route 53 での独自ドメイン設定／S3＋CloudFront構成例 ―

🎯 学習目的

第1部 Route 53での独自ドメイン設定

🧭 Route 53とは？

🧪 実習①：独自ドメインの登録または移管

方法1：新規取得（AWS Route53上で購入）

方法2：既存ドメイン（お名前.comなど）をRoute53に移管

🧩 Hosted Zone（ホストゾーン）の作成

実習手順

🧪 実習②：EC2へのAレコード設定

手順

🧩 実習③：HTTPSリダイレクト確認

⚙️ よくあるDNSトラブル

第2部 S3＋CloudFront構成例紹介

🌍 S3＋CloudFrontとは

🧩 構成イメージ

🧪 実習④：S3バケットの作成と公開設定

1️⃣ S3バケット作成

2️⃣ ファイルアップロード

3️⃣ バケットポリシー設定（静的サイト公開）

4️⃣ 静的サイトホスティング有効化

🧪 実習⑤：CloudFrontディストリビューション作成

1️⃣ CloudFrontコンソール → 「ディストリビューション作成」

2️⃣ デプロイ完了確認

3️⃣ Route 53 に CNAME レコード追加

🧱 WordPressとの連携例（発展）

方法①：プラグイン（例：WP Offload Media）

方法②：CDN URL 直指定

⚡ CloudFrontのメリット

🧰 運用時のベストプラクティス

✅ チェックリスト

📚 まとめ

💬 発展課題

第1部　Route 53での独自ドメイン設定

第2部　S3＋CloudFront構成例紹介