Amazon CloudFront
Amazon CloudFrontは、安全でプログラミング可能なコンテンツデリバリネットワーク(CDN)です。こちらのページでは、MyKinstaでサイトを立ち上げた後、弊社CDNの代わりにAmazon CloudFrontを使用する手順をご紹介します。
フィールドレベル暗号化、DDoS攻撃からのネットワークとアプリケーション層の保護などのセキュリティ機能も備わっています。
独自SSL証明書の申請
CloudFront ディストリビューションの設定には、独自SSL証明書の適用が必要です。この作業には、数分から長くて数時間かかる可能性がありますので、ディストリビューションの作成を始める前に、独自SSL証明書を申請することをおすすめします。
AWSのアカウントを持っていない場合は、アカウントの作成を行ってください。AWSアカウントにログイン後、メニューバーの検索ボックスで「certificate manager」と検索し、「サービス」の「Certificate Manager」をクリックしてください。
![CloudFrontアカウントの「サービス」にある「AWS Certificate Manager」をクリックする](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Faws-search-certificate-manager.jpg&w=3840&q=75)
「Certificate Manager」で「証明書のリクエスト」ボタンをクリックします。
![AWS Certificate Managerで「証明書のリクエスト」ボタンをクリックする](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Facm-request-certificate.jpg&w=3840&q=75)
次のページで、「パブリック証明書のリクエスト」を選択して、「証明書のリクエスト」をクリックします。
![「パブリック証明書のリクエスト」を選択して、「証明書のリクエスト」をクリックする](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Facm-request-public-certificate.jpg&w=3840&q=75)
ドメイン名の追加
「証明書のリクエスト」画面で、ドメイン名(Kinstaサイトのプライマリドメイン)をドメイン名リスト(ルートドメインを追加する場合は、必ず非wwwとwwwの両方のドメインを追加するか、*.example.comのようなワイルドカードのドメインを追加してください)に追加し、「次へ」をクリックします。
![AWS Certificate ManagerのSSL証明書リクエストにドメインを追加する](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Facm-add-domain.jpg&w=3840&q=75)
ドメイン認証
次の画面で、SSL証明書のDNS認証またはメール認証のいずれかを選びます。必要に応じて選択してください。
ドメイン登録に、WHOIS検索から連絡先を隠すプライバシー保護機能がない場合、または、プロキシのメールアドレスに送信されたメールが、あなたの本当のメールアドレスに転送される場合には、メール認証が可能です。
WHOIS検索で表示されるメールアドレスでメールを受信できない場合は、DNS認証のみ有効です。
メール認証
「メール認証」を選び、「次へ」をクリックして認証を行います。
![AWS SSL証明書のメール認証を開始する](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Facm-email-validation-selected.jpg&w=3840&q=75)
追加したドメインごとに最大8通のメールが届きます。各ドメインにつき少なくとも1通のメールを確認して、認証を完了させてください。
DNS認証
この場合は「DNS認証」を選び、「次へ」をクリックします。
![AWS SSL証明書のDNS認証を開始する](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Facm-dns-validation-selected.jpg&w=3840&q=75)
「タグを追加」ページで、必要に応じて任意のタグを追加してから「確認」をクリックして次に進みます。
![SSL証明書のリクエストを確認する](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fcloudfront-review-ssl-request.jpg&w=3840&q=75)
「確認」ページにある「確定とリクエスト」ボタンをクリックして認証を進めます。
![SSL証明書のリクエストを確定する](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Facm-confirm-request.jpg&w=3840&q=75)
次のページで、ドメイン名の横に表示される矢印アイコンをクリックすると、検証用のCNAMEレコードの情報が表示されます。これを元に、ドメインのCNAMEレコードを作成しましょう。
![ドメイン認証用CNAMEレコードの情報](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Facm-dns-validation-cname-details.jpg&w=3840&q=75)
CNAMEレコードを追加するには、ドメインのDNSを管理していサービスの管理画面にログインします。今回は、弊社DNSでCNAMEレコードを追加する方法をご紹介します。別のDNSプロバイダー(ドメインのネームサーバーを指定した場所によっては、レジストラまたは別のDNSホストである可能性があります)を使用している場合は、手順が少し異なるかもしれません。
- MyKinstaの左側サイドバーにある「DNS」をクリックします。
- DNSレコードを追加したいドメインの「管理」リンクをクリックします。
- 「DNSレコードの追加」をクリックします。
- 「CNAMEタブ」をクリックし、「ホスト名」(CloudFrontの名前フィールドのドメインより前にあるすべて)と「指定先」(CloudFrontの値)を追加します。「DNSレコードを追加する」をクリックしてCNAMEレコードを保存します。
補足)DNSレコードのTTL設定によっては、DNSレコードの反映に数分から数時間かかる場合があります。
![AWS SSL認証用のCNAMEレコードを追加する](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2023%2F11%2Fwordpress-add-cloudfront-dns-cname-1024x468.png&w=2048&q=75)
CloudFrontの認証ページにもどり、「続行」をクリックします。
![DNS認証の続行](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Facm-dns-validation-cname-continue.jpg&w=3840&q=75)
CNAMEレコードが反映され、認証されると、SSL証明書のステータスは「検証保留中」から「発行済み」に切り替わります。
![Amazon Certificate Managerで発行されたSSL証明書](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Faws-ssl-issued.jpg&w=3840&q=75)
これで、CloudFront ディストリビューション用のSSL証明書の準備が整いました。
CloudFront ホストゾーンの設定とデプロイ
次は、CloudFront ホストゾーンの設定とデプロイを行います。AWSアカウントにて、メニューバーの検索ボックスで「CloudFront」と検索し、「サービス」の「CloudFront」をクリックします。
![AWSの「サービス」から「CloudFront」を選択する](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Faws-search-cloudfront.jpg&w=3840&q=75)
その後、「Create a CloudFront distribution(CloudFront ディストリビューションを作成する)」をクリックします。
![CloudFront ディストリビューションを作成する](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Faws-create-cloudfront-distribution.jpg&w=3840&q=75)
ホストゾーンの詳細は、ディストリビューションの作成ページで設定することができます。Cloudflare統合との互換性を最大化するために、以下の構成を推奨します。
オリジン
「オリジン」の設定は以下をお勧めします。
- オリジンドメイン:サイトのcloudドメイン(例: myawewsomesite.kinsta.cloud)。CloudFrontはオリジンとしてIPアドレスを受け付けないため、フィールドにサイトのkinsta.cloudドメインを使用します。
オリジンドメインを入力すると、以下の3つのフィールドが表示されます。- プロトコル:HTTPSのみ
- HTTPSポート:443
- 最小限のオリジン SSL プロトコル:TLSv1
- オリジンのパス:空欄
- 名前(任意):オリジンに名前をつけられますが、必須ではありません
- Origin Shield を有効にする:No
![CloudFront ディストリビューション オリジンの推奨設定](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fcloudfront-distribution-origin.jpg&w=3840&q=75)
デフォルトのキャッシュ動作の設定
キャッシュの動作設定を行う際に、CloudFrontの2つのポリシー(キャッシュポリシーとリクエストポリシー)を作成する必要があります。以下、概要をご紹介します。
「デフォルトのキャッシュ動作の設定」の推奨設定値は以下のとおりです。
- パスパターン: デフォルト
- オブジェクトを自動的に圧縮する: Yes
- ビューワープロトコルポリシー: Redirect HTTP to HTTPS
- 許可される HTTP メソッド: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
- ビューワーのアクセス制限: No
- キャッシュキーとオリジンリクエスト: キャッシュポリシーとオリジンリクエストポリシー
- キャッシュポリシー: 作成したキャッシュポリシーを選択します(以下の作成手順を参照してください)
- オリジンリクエストポリシー: 作成したオリジンリクエストポリシーを選択します(以下の作成手順を参照してください)
![CloudFront ディストリビューション キャッシュ動作の推奨設定](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fcloudfront-distribution-default-cache-behavior.jpg&w=3840&q=75)
CloudFront キャッシュポリシー作成方法
「キャッシュポリシー」セクションにある「ポリシーの作成」をクリックすると、ブラウザの新規タブにキャッシュポリシー作成ページが表示されます。
![CloudFrontにキャッシュポリシーを作成する](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fcloudfront-create-cache-policy.jpg&w=3840&q=75)
「詳細」セクションで、キャッシュポリシーの名前(例: KinstaCachePolicy)を指定します。
「TTL設定」は以下を推奨します。
- 最小TTL:0
- 最大TTL:31536000
- デフォルトTTL:86400
「キャッシュキー設定」は以下を推奨します。
- ヘッダー:None
- クエリ文字列:All
- Cookies:All
「圧縮サポート」セクションで「Gzip」と「Brotli」にチェックを入れて有効にし、「作成」をクリックしてください。
![CloudFront キャッシュポリシー推奨設定](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fcloudfront-cache-policy-settings.jpg&w=3840&q=75)
このブラウザタブを閉じ、CloudFront ディストリビューションを作成しているタブに戻ります。
「キャッシュポリシー」のドロップダウン横にある更新ボタンをクリックし、作成したキャッシュポリシーを選択します。
![作成したキャッシュポリシーを選択する](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fcloudfront-select-custom-cache-policy.jpg&w=3840&q=75)
CloudFront オリジンリクエストポリシー作成方法
「オリジンリクエストポリシー」セクションで、「ポリシーの作成」をクリックすると、ブラウザの新規タブにオリジンリクエストポリシー作成ページが表示されます。
![CloudFrontにオリジンリクエストポリシーを作成する](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fcloudfront-create-request-policy.jpg&w=3840&q=75)
「詳細」セクションで、キャッシュポリシーの名前(例: KinstaOriginPolicy)を指定します。
「オリジンリクエスト設定」セクションは、それぞれ以下に設定してください。
- ヘッダー:All viewer headers
- クエリ文字列:All
- Cookies:All
「作成」をクリックして、リクエストポリシーを確定します。
![CloudFront オリジンリクエストポリシーの設定](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fcloudfront-origin-request-policy-settings.jpg&w=3840&q=75)
このブラウザタブを閉じ、CloudFront ディストリビューションを作成しているタブに戻ります。
「オリジンリクエストポリシー」ドロップダウン横にある更新ボタンをクリックし、ドロップダウンから作成したオリジンリクエストポリシーを選択します。
![作成したオリジンリクエストポリシーを選択する](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fcloudfront-select-origin-request-policy.jpg&w=3840&q=75)
関数の関連付け
関数の関連付けとは、リクエストのライフサイクル内の異なるトリガー(ビューワーリクエスト、ビューワーレスポンス、オリジンリクエストなど)にAWS Lambdaのサーバーレス関数を割り当てることができるというものです。基本的には、関数の関連付けは推奨されません。
弊社CDNと並行して関数の関連付けを使用することは可能ですが、Lambda関数は弊社CDNが競合する可能性があります。独自のLambda関数をサイトで使用したい場合、万が一問題が発生した際のトラブルシューティングを考慮し、開発者と一緒に作業を行うことをお勧めします。
設定
「設定」の設定は、以下がお勧めです。
- 価格クラス:サイトで使用するCloudFrontリージョンを選択してください
- AWS WAF ウェブ ACL:ファイアウォールのルールでACLを作成する必要がある場合、弊社CDNとの競合を避けるために、AWSのプロの力を借りながら作業することをおすすめします
- 代替ドメイン名:「項目の追加」をクリックし、ドメイン(Kinstaサイトのプライマリドメイン)を指定してください
- SSL 証明書:こちらのページ冒頭で作成したSSL証明書を選択してください
SSL証明書を選択した後に、以下の追加オプションが表示されます。- レガシークライアントサポート:チェックなし、または無効
- セキュリティーポリシー:TLSv1.2_2021
- サポートされる HTTP バージョン:HTTP/2
- 標準ログ記録:オフ
- IPv6:オン
![ディストリビューションの設定を保存し、CloudFront ホストゾーンを作成する](/_next/image/?url=https%3A%2F%2Fkinsta.com%2Fwp-content%2Fuploads%2F2022%2F02%2Fcloudfront-distribution-settings.jpg&w=1920&q=75)
「ディストリビューションを作成」をクリックすると、CloudFront ホストゾーンの作成が完了します。
CloudFront よくある問題のトラブルシューティング
502エラー
CloudFront ディストリビューションの作成後、502エラーが表示された場合は、オリジン設定のオリジンドメインを再確認してください。このドメインはメインのドメインではなく、お客様のサイトのkinsta.cloudドメインでなくてはいけません。
変更内容がサイトに反映されない
CloudFrontに合わせてサイトを設定すると、キャッシュの追加レイヤーが作成され、これはキャッシュのクリアが必要になるときにその都度合わせて削除しなくてはいけません。プラグインをインストール、または再インストールした後、サイトの変更がうまく表示されない、もしくはプラグインがうまく動作しない場合は、以下を含むすべての階層でキャッシュをクリアしてください。
- プラグイン(該当する場合)
- テーマ(該当する場合)
- Kinstaサイトまたはサーバーキャッシュ(MyKinstaまたはKinsta MUプラグイン)
- CloudFrontのキャッシュ(オブジェクトを無効化します。無効化するオブジェクトパスに /* を使用すると、すべてのキャッシュがクリアされます)
- ブラウザのキャッシュ
誤検出でブロックされたIPアドレス
CloudFrontでDDoS攻撃の軽減や、ボットコントロールを有効にした結果、お客様、または訪問者がサイトへのアクセスを不正にブロックされる場合には、誤検出が疑われます。この問題が発生した際には、AWSサポートと弊社カスタマーサポートの両方に連絡を取り、ブロックが発生している場所を特定する必要があります。
HTTPからHTTPSへのリダイレクトループ
HTTPからHTTPSへのリダイレクトループが発生した場合、ドメインのCloudFront オリジン設定で、プロトコルが「HTTPSのみ」に設定されていることを確認してください。
IPジオロケーションリダイレクトが正しく動作しない
CloudFrontで、デフォルトで有効になっているページキャッシュは、MyKinstaで設定したIPジオロケーションのリダイレクトに干渉する場合があります。これが発生した際は、CloudFrontでのキャッシュを無効にするか、キャッシュポリシーで特定の場所にないファイルのみをキャッシュするように設定する必要があります。
WordPress管理画面にログインできない
POST対応がないとログインができず、ウェブサイト内の他の機能にも影響が出る恐れがあります。「デフォルトのキャッシュ動作の設定」の「許可されるHTTPメソッド」が、「GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE」に設定されていることを確認してください。
詳細設定と互換性
署名付きURLと署名付きCookieによるビューワーのアクセス制限
独自のオリジンでファイルへのアクセスを制限するなどのオプションは、Cloudflareが常に静的なリクエストをキャッシュすることが原因で機能しない場合があります。