【概要】AWSでWordPressの表示速度を上げる方法｜CloudFront CDN導入の全体像

2026-05-27

【概要】AWSでサイトの表示速度を上げる方法

EC2で運用しているWordPressの表示速度を上げるために、CloudFrontを使ってCDNを設定する手順を紹介します。

この記事はAWS CloudFront導入４部作です。

【概要】AWSでサイトの表示速度を上げる方法｜CloudFrontでCDNを設定する手順 ← 今ここ
【AWS CloudFront導入①】Route53でDNS管理をAWSに統一する方法
【AWS CloudFront導入②】CloudFrontをドメインに紐付ける方法
【AWS CloudFront導入③】CloudFrontで403エラーが出るときの対処

CloudFrontとは？

CloudFrontはAWSが提供するCDN（コンテンツデリバリーネットワーク）サービスです。

CDNとは何かを出前で例えると、東京にある1つのお店から全国に配達するのではなく、全国各地に支店を作って近くから届けるイメージです。

CloudFrontは世界450か所以上にサーバー（エッジロケーション）を持っていて、サイトにアクセスしてきた人の一番近い場所からデータを届けてくれます。

小学生でもわかり易く身近なものに例えて説明

CloudFrontでCDNを設定するとは

CloudFront = 世界中に置いた出前の拠点

例えばあなたのサーバーが東京にあるとします。アメリカの人がサイトを見ようとすると、データが東京からアメリカまで往復するので時間がかかります。

CloudFrontは世界中の色んな場所にデータのコピーを置いておいて、アクセスしてきた人の一番近い場所からデータを届けるサービスです。

出前で例えると「東京本店から全国に届けるのではなく、全国に支店を作って近くから届ける」イメージです。サイトが速くなります。

CloudFrontを使うメリット

サイトの表示が速くなる
EC2サーバーへの負荷が減る
大量アクセスやDDoS攻撃に強くなる
AWS同士の連携なのでS3やEC2との相性が良い

事前準備

以下が完了していることを確認してください。

EC2インスタンスが起動している
WordPressが公開されている
ドメインが取得済みで、EC2のIPアドレスに向いている

STEP 1｜CloudFrontのディストリビューションを作成する

AWSコンソール（ https://console.aws.amazon.com ）の検索バーで「CloudFront」と検索してクリックします。

「ディストリビューションを作成」をクリックします。

ステップ1：Get started

以下のように設定します。

項目	設定値
Distribution name	サイト名（例：mysite）
Distribution type	Single website or app
Domain	空欄のまま（Route53を使っていない場合）

「Next」をクリックします。

ステップ2：Specify origin

Origin typeで「Other」を選択します。

⚠️ EC2はS3でもLoad Balancerでもないので「Other」を選びます。

「Custom origin」の入力欄に自分のドメイン（例：mysite.com）を入力します。

それ以外はデフォルトのまま「Next」をクリックします。

つまずきポイント①｜Origin typeで「Other」を選ぶ

「Specify origin」の画面を開くと、最初に「Amazon S3」が選択された状態になっています。

今回はEC2でWordPressを運用しているので「Amazon S3」ではありません。必ず「Other」を選択してください。

選択肢は以下の6つあります。

選択肢	使う場面
Amazon S3	S3に静的サイトを置いている場合
Elastic Load Balancer	複数のEC2をロードバランサーで管理している場合
API Gateway	API GatewayでAPIを公開している場合
Elemental MediaPackage	動画配信をしている場合
VPCオリジン	プライベートVPC内のEC2を使う場合
Other	EC2に直接ドメインで接続している場合（今回はこれ）

「Other」を選択すると「Custom origin」という入力欄が表示されます。ここに自分のドメイン（例：mysite.com）を入力します。

✅ 入力後はデフォルトのまま「Next」を押してOKです。

ステップ3：Enable security

「セキュリティ保護を有効にしないでください」を選択します。

⚠️ 「セキュリティ保護を有効にする」を選ぶとWAF（ファイアウォール）が有効になり月額約14ドル（約2,200円）かかります。個人ブログには不要です。

「Next」をクリックします。

つまずきポイント②｜WAFの設定で課金されないように注意

「Enable security」の画面を開くと、最初から「セキュリティ保護を有効にする」が選択された状態になっています。

この状態で「Next」を押すと月額約14ドル（約2,200円）のWAF料金が発生します。

画面の下に小さく「この AWS WAF 設定では、1か月あたり1,000万件のリクエストに対して14USDの費用がかかると推定されます」と書いてありますが、見落としやすいです。

個人ブログには不要なので必ず「セキュリティ保護を有効にしないでください」を選択してから「Next」を押してください。

選択肢	料金	個人ブログ向け？
セキュリティ保護を有効にする	月約14ドル〜	✗
セキュリティ保護を有効にしないでください	無料	✅

⚠️ デフォルトが有料の方になっているので必ず確認してください。見落とすと毎月2,200円が請求されます。

ステップ4：Review and create

内容を確認して「ディストリビューションを作成」をクリックします。

作成完了すると以下のようなURLが表示されます。

xxxxxxxxxxxx.cloudfront.net

デプロイ完了まで5〜10分かかります。「デプロイ」→「有効」に変わるまで待ちます。

✅ デプロイ中でも次のステップに進めます。

STEP 2｜SSL証明書を取得してドメインを紐付ける

このままでは xxxxxxxxxxxx.cloudfront.net というURLでしかCloudFrontにアクセスできません。自分のドメイン（mysite.com）でCloudFrontを使えるようにするためにSSL証明書を取得します。

CloudFront → ディストリビューション → 作成したディストリビューションをクリック →「Add domain」をクリックします。

ステップ1：Configure domains

入力欄に自分のドメインを入力します。

mysite.com

「Next」をクリックします。

ステップ2：Get TLS certificate

「Create certificate」をクリックします。

すると以下のようなDNS検証用のCNAMEレコードが表示されます。

項目	内容
Record type	CNAME
Name	`_xxxxxxxxxxxxxxxx.mysite.com`
Value	`_xxxxxxxxxxxxxxxx.acm-validations.aws`

このCNAMEレコードをお名前.comのDNS設定に追加します。

STEP 3｜お名前.comにCNAMEレコードを追加する

お名前.com管理画面 → DNS設定 → DNSレコード設定 →「レコード追加」タブ

以下のように入力して「追加」→「確認画面へ進む」→「設定する」をクリックします。

ホスト名	TYPE	VALUE
`_xxxxxxxxxxxxxxxx`（Nameの値）	CNAME	`_xxxxxxxxxxxxxxxx.acm-validations.aws`（Valueの値）

⚠️ VALUEの末尾に「.」がある場合は取り除いて入力してください。お名前.comでは末尾のドットは自動で設定されます。

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

STEP 4｜証明書を検証してドメインを追加する

⚠️ ここで迷いやすい！「Refresh certificates」ボタンの場所

証明書の検証状況を確認する「Refresh certificates」ボタンは、CloudFrontのトップ画面には表示されません。以下の手順で画面を開く必要があります。

CloudFront → ディストリビューション → 作成したディストリビューションをクリック
「Add domain」をクリック
ドメインを入力して「Next」
「Get TLS certificate」の画面に「Refresh certificates」ボタンが表示される

DNS反映前に押しても証明書は表示されません。お名前.comにCNAMEレコードを追加してから数分〜数時間待ってから押してみてください。

CloudFrontの画面に戻って「Validate certificate」をクリックします。

DNS反映が完了していると証明書が「Available certificates」に表示されます。表示されない場合は「Refresh certificates」をクリックして更新してみてください。

証明書が表示されたら選択して「Next」→「Add domains」をクリックします。

「Distribution updated successfully」と表示されれば完了です！

注意点｜ルートドメインはCloudFrontに直接向けられない

mysite.com のようなルートドメインにはCNAMEレコードが設定できないというDNSの仕様があります。

これはお名前.comに限らずどのドメイン会社でも同じ制限です。

ルートドメインをCloudFrontに向けるにはRoute53（AWSのDNSサービス）を使う必要があります。Route53では「ALIASレコード」という特殊なレコードが使えるため、ルートドメインでもCloudFrontに向けることができます。

✅ 急ぎでない場合はサブドメイン（www.mysite.com）でCloudFrontを使う方法もあります。

CloudFrontの料金

項目	料金
データ転送（最初の1TB/月）	$0.114/GB
HTTPSリクエスト（最初の1000万件）	$0.0100/1万件
無料枠	1TB/月・1000万リクエスト/月（1年間）

✅ 個人ブログであれば無料枠内に収まることがほとんどです。

まとめ

CloudFrontを設定することでサイトの表示速度を上げEC2への負荷を減らせます。設定自体は難しくありませんが、ルートドメインへの紐付けにはRoute53が必要になります。まずは xxxxxxxxxxxx.cloudfront.net のURLで動作確認をして、余裕があればRoute53への移行を検討してみてください。