エラーページとメンテナンスページのカスタマイズ

Fastly オリジンへのリクエストが失敗した場合、Fastly は、ユーザーにとって混乱を招く可能性のある、基本的な形式と一般的なメッセージングを含むデフォルトの応答ページを返します。 例えば、Fastly オリジンへのリクエストが 503 エラーが原因で失敗した場合、Fastly は次のデフォルトのエラーページを返します。

Fastly デフォルトエラーページ

次の例に示すように、Adobe Commerce ストアの設定を更新して、デフォルトの応答ページの一部を、より使いやすいメッセージ機能と改善されたHTMLスタイルを持つページに置き換えることができます。

Fastly カスタムエラーページ

現在、クラウドインフラストラクチャプロジェクト上のAdobe Commerceについて、次の Fastly 応答ページをカスタマイズできます。

HTMLのコーディング要件:

カスタムページのHTMLコードは、次の要件を満たす必要があります。

  • コンテンツには、最大 65,535 文字を含めることができます。
  • HTMLソース内のすべての CSS をインラインで指定します。
  • Fastly がオフラインでも表示されるように、base64 を使用してHTMLページに画像をバンドルします。 css-tricks サイトのデータ URI を参照してください。

503 エラーページのカスタマイズ

次の場合、デフォルトの 503 エラーページが表示されます。

  • Fastly オリジンへのリクエストが 500 より大きい応答ステータスを返す場合
  • タイムアウト、メンテナンスアクティビティ、正常性の問題など、Fastly オリジンがダウンしている場合

デフォルトページをカスタマイズするには、以下のHTMLコードを適応させて、Adobe Commerce Store のテーマに合わせたスタイル設定を行い、必要に応じてタイトルとメッセージングを変更します。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
         <title>503</title>
   </head>
   <body>
      <p>Service unavailable</p>
   </body></html>

変更したソースがブラウザーに正しく表示されていることを確認します。 次に、カスタマイズしたHTMLコードを Fastly 設定に追加します。

Fastly 設定にカスタム応答ページを追加するには:

  1. 管理者に ログインします。

  2. ストア/設定/設定/詳細/システム を選択します。

  3. 右側のパネルで、フルページキャッシュ / Fastly 設定 / カスタム合成ページ を展開します。

    503 エラーページを編集

  4. HTMLを設定 を選択します。

  5. カスタムHTMLページのソースコードをコピーして、「レスポンス」フィールドに貼り付けます。

    更新 503 エラーページ

  6. ページの上部にある「アップロード」を選択して、カスタマイズしたHTMLソースを Fastly サーバーにアップロードします。

  7. ページ上部の「設定を保存」を選択して、更新した設定ファイルを保存します。

  8. キャッシュを更新します。

    • ページ上部の通知で、「キャッシュ管理」リンクを選択します。

    • キャッシュ管理ページで、「Magentoキャッシュをフラッシュ」を選択します。

WAF エラーページのカスタマイズ

WAF ブロッキングイベントが原因で 403 Forbidden エラーが発生して Fastly オリジンへのリクエストが失敗すると、デフォルトの WAF エラーページが表示されます。

WAF エラーページ

次のコードサンプルに、デフォルトページのHTMLソースを示します。

<html>
  <head>
    <title>Magento 403 Forbidden</title>
  </head>
  <body>
    <p>The requested URL was rejected.</p>
    <p>For additional information, please contact support and provide this reference ID:</p>
    <p>"} req.http.x-request-id {"</p>
    <p><button onclick='history.back();'>Go Back</button></p>
  </body>
</html>

Fastly 設定メニューの カスタム合成ページ/WAF ページを編集 オプションを使用して、クラウドインフラストラクチャプロジェクト上のAdobe Commerceのデフォルトコードをカスタマイズすることができます。 コードを編集する際は、WAF ブロッキングイベントの参照 ID を提供する次の行を保持します。

<p>"} req.http.x-request-id {"</p>
NOTE
「WAF を編集」オプションを使用できるのは、Managed Cloud WAF サービスがクラウドインフラストラクチャプロジェクト上のAdobe Commerceで有効になっている場合のみです。

WAF エラーページを編集するには:

  1. 管理者にログインします

  2. ストア/設定/設定/詳細/システム を選択します。

  3. 右側のパネルで、フルページキャッシュ / Fastly 設定 / カスタム合成ページ を展開します。

    「WAF エラーページを編集」オプション

  4. WAF ページを編集 を選択します。

  5. フィールドに入力して、HTMLを更新します。

    WAF エラーページの更新

    • ステータス:403 Forbidden のステータスを選択します。
    • MIME タイプ - タイプ text/html
    • コンテンツ - デフォルトのHTML応答を編集してカスタム CSS を追加し、必要に応じてタイトルとメッセージを更新します。
  6. ページの上部にある「アップロード」を選択して、カスタマイズしたHTMLソースを Fastly サーバーにアップロードします。

  7. ページ上部の「設定を保存」を選択して、更新した設定ファイルを保存します。

  8. キャッシュを更新します。

    • ページ上部の通知で、「キャッシュ管理」リンクを選択します。

    • キャッシュ管理ページで、「Magentoキャッシュをフラッシュ」を選択します。

エラーレポート番号を表示

デフォルトでは、Fastly は、503 Service Unavailable エラーの背後にあるすべてのAdobe Commerce エラーを非表示にします。 エラーログレポートの番号を表示して、ログでエラーの詳細を確認できるようにするには、次の手順に従って、Fastly を省略して web サイトを開きます。

  1. ストアの IP アドレスを取得します。

    • ステージング環境および実稼動環境の場合:

      code language-bash
      nslookup {your_project_id}.ent.magento.cloud
      
    • Pro 統合環境およびスターター環境の場合:

      code language-bash
      nslookup gw.{your_region}.magentosite.cloud
      
  2. ローカルワークステーションの hosts ファイルにアプリケーションドメインと IP アドレスを追加します。

    code language-text
    {server_IP} {store_domain}
    
  3. ブラウザーのキャッシュと Cookie をクリアします(または匿名モードに切り替えます)。

  4. ストアの web サイトを再度開いて、エラーコードを表示します。

  5. エラーコードを使用して、エラーレポートファイルの詳細を見つけます。

recommendation-more-help
05f2f56e-ac5d-4931-8cdb-764e60e16f26