Lightsail WordPress高速化|CloudFront導入手順とキャッシュ設定の落とし穴
LightsailでWordPressを運用していると、ある日突然「なんかページの表示が遅いな」という瞬間が来ます。記事が増えて画像が多くなってきた頃によく起きます。
そこで試してほしいのがCloudFrontの導入です。設定に少し手間はかかりますが、効果は体感できるレベルで変わります。ただしWordPressとCloudFrontの組み合わせには「キャッシュの落とし穴」がいくつかあって、知らずに進めると管理画面にログインできなくなったり、記事を更新しても反映されないといったトラブルにはまります。
今回はLightsail+WordPress+CloudFrontの構成を、実際につまずきやすいポイントも含めて解説します。
CloudFrontとは何か:CDNの仕組みをざっくり理解する
CloudFrontはAWSが提供するCDN(コンテンツデリバリネットワーク)サービスです。世界中に分散配置されたエッジロケーションにコンテンツをキャッシュして、ユーザーに最も近い場所から配信する仕組みです。
通常のWordPressサイトはこういう流れです。
ユーザー → Lightsailサーバー(東京)→ コンテンツを返す
CloudFrontを挟むとこうなります。
ユーザー → 最寄りのエッジロケーション → キャッシュがあればそこから返す
↓ キャッシュがない場合のみ
Lightsailサーバーに取りに行く
海外からのアクセスが多いサイトや、画像が多いページで特に効果が出やすいです。実際にCloudFrontを導入したサイトでは、トップページの表示完了時間が平均2秒以上短縮されたケースもあります。
Lightsail+CloudFrontの組み合わせが優れている理由
Lightsailは月額数ドルから使える手軽さが魅力ですが、スペックの上限が決まっているため、アクセスが集中するとサーバーが重くなりやすいです。CloudFrontを前段に置くことでこの問題を解消できます。
- 表示速度の向上:エッジロケーションからのキャッシュ配信により、ユーザーの待ち時間が減ります
- サーバー負荷の軽減:静的ファイルのリクエストをCloudFrontが肩代わりするため、Lightsailへの負荷が下がります
- セキュリティの強化:AWS WAFと連携してDDoS攻撃対策が可能です
- コスト最適化:Lightsailのデータ転送量を節約できるため、月額コストを抑えられます
- SSL証明書の無料化:ACM(AWS Certificate Manager)と連携することでSSL証明書を無料で発行・管理できます
月間5万件程度のアクセスがあるサイトにこの構成を適用した場合、従来のレンタルサーバー構成と比較して月額運用コストを約35%削減できるケースがあります。
CloudFrontディストリビューションの作成手順
それでは実際の設定手順を説明します。前提としてLightsailに静的IPアドレスをアタッチしておく必要があります。ここをケチると後で詰みます。
# Lightsailで静的IPをアタッチする手順
1. Lightsailコンソール → インスタンスを選択
2. 「ネットワーキング」タブ → 「静的IPを作成してアタッチ」
3. 静的IPアドレスが割り当てられたことを確認する
静的IPの準備ができたらCloudFrontの設定に進みます。
- ディストリビューションの作成:AWSコンソール → CloudFront → 「ディストリビューションを作成」をクリック
- オリジンの設定:オリジンドメインにLightsailの静的IPアドレスを入力。オリジンプロトコルポリシーは「HTTPS Only」を選択
- ビュワープロトコルポリシー:「Redirect HTTP to HTTPS」を選択。HTTPアクセスを自動的にHTTPSにリダイレクトできます
- SSL証明書の設定:ACMで事前に発行した証明書をアタッチ。ACMの証明書はus-east-1(バージニア北部)リージョンで発行する必要があります。他のリージョンで発行してもCloudFrontには使えないので注意してください
よくあるつまずきポイントとして、静的IPをアタッチする前の動的IPをオリジンに設定してしまうケースがあります。この場合SSL証明書が適用できないエラーが発生します。必ず静的IPを先にアタッチしてからオリジンを設定してください。
WordPressのキャッシュ設定:ここが一番の鬼門
CloudFrontの設定で最も時間がかかるのがキャッシュポリシーの調整です。WordPressは動的なCMSなので、何も考えずにキャッシュを有効にすると色々と問題が起きます。
よくあるトラブルはこちらです。
- WordPress管理画面にログインできない:管理画面までキャッシュされてしまうと認証情報が正しく処理されずログインできなくなります
- 記事を更新してもサイトに反映されない:キャッシュが残っているため古いコンテンツが表示され続けます
- フォームや動的機能が動かない:動的なコンテンツがキャッシュされると正常に動作しなくなります
これらを解決するために、以下のパスをキャッシュ対象から除外する設定が必要です。
# CloudFrontのキャッシュ除外設定(ビヘイビアで設定)
除外するパスパターン:
/wp-admin/*
/wp-login.php
/wp-cron.php
/?* (クエリ文字列を含むリクエスト)
# Cookieの設定
wordpress_* などのWordPress関連Cookieはオリジンへフォワードする
記事を更新した際にキャッシュを手動で削除するには、CloudFrontの「無効化」機能を使います。
# CloudFrontキャッシュの無効化
対象パス:/*(全てのキャッシュを削除する場合)
または
対象パス:/category/news/*(特定ページのみ削除する場合)
# AWS CLIで実行する場合
aws cloudfront create-invalidation \
--distribution-id XXXXXXXXXXXXXX \
--paths "/*"
HTTPS化:WordPressのURL設定を忘れずに
CloudFrontでHTTPS化した後、WordPressの管理画面でURLを更新しないと無限リダイレクトが発生します。設定後にサイトが開かなくなるトラブルの多くはここが原因です。
# WordPressのURL設定変更手順
1. WordPress管理画面 → 設定 → 一般
2. 「WordPressアドレス(URL)」をhttps://に変更
3. 「サイトアドレス(URL)」もhttps://に変更
4. 変更を保存する
# wp-config.phpで設定する場合
define('WP_HOME', 'https://yourdomain.com');
define('WP_SITEURL', 'https://yourdomain.com');
ACMでSSL証明書を取得する際は、ドメインの所有確認(DNS検証またはメール検証)が必要です。Route 53でドメインを管理している場合はDNS検証が自動化できるので楽です。
導入後の確認:本当に速くなったかチェックする
設定が完了したら実際に速度改善を確認しましょう。以下のツールで測定するのがおすすめです。
- Google PageSpeed Insights:モバイルとデスクトップそれぞれのスコアが確認できます
- GTmetrix:詳細なウォーターフォールチャートで、どのリソースの読み込みに時間がかかっているか確認できます
- WebPageTest:世界各地のサーバーからの速度を測定できるので、CDNの効果を実感しやすいです
CloudFrontのレスポンスヘッダーに「X-Cache: Hit from cloudfront」が含まれていればキャッシュが正常に機能している証拠です。
# curlでキャッシュの動作確認
curl -I https://yourdomain.com
# レスポンスヘッダーの確認ポイント
X-Cache: Hit from cloudfront ← キャッシュが効いている
X-Cache: Miss from cloudfront ← オリジンから取得している
まとめ
LightsailとCloudFrontの組み合わせは、コストを抑えながらWordPressサイトのパフォーマンスを大幅に向上させられる構成です。
設定で一番手間がかかるのはキャッシュポリシーの調整ですが、管理画面と動的機能を除外する設定さえ正しく行えば後は快適に動きます。
特にやらかしやすい2点をおさらいします。
- 静的IPのアタッチ忘れ:オリジン設定前に必ずアタッチ
- WordPress側のURL更新忘れ:HTTPS化後は管理画面でURLを変更する
この順番を守って進めれば、ほとんどのトラブルは回避できます。