エラーページとメンテナンスページのカスタマイズ
Fastly オリジンへのリクエストが失敗した場合、Fastly は、ユーザーにとって混乱を招く可能性のある、基本的な形式と一般的なメッセージングを含むデフォルトの応答ページを返します。 例えば、Fastly オリジンへのリクエストが 503 エラーが原因で失敗した場合、Fastly は次のデフォルトのエラーページを返します。
次の例に示すように、Adobe Commerce ストアの設定を更新して、デフォルトの応答ページの一部を、より使いやすいメッセージ機能と改善されたHTMLスタイルを持つページに置き換えることができます。
現在、クラウドインフラストラクチャプロジェクト上の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 設定にカスタム応答ページを追加するには：
-
ログイン を管理者に送信します。
-
を選択 ストア > 設定 > 設定 > 詳細 > システム.
-
右側のパネルで、を展開します フルページキャッシュ > Fastly 設定 > カスタム合成ページ.
-
を選択 HTMLを設定.
-
カスタムHTMLページのソースコードをコピーして、「レスポンス」フィールドに貼り付けます。
-
を選択 Upload ページの上部で、カスタマイズしたHTMLソースを Fastly サーバーにアップロードします。
-
を選択 設定を保存 ページの上部で、更新した設定ファイルを保存します。
-
キャッシュを更新します。
-
ページ上部の通知で、 キャッシュ管理 リンク。
-
キャッシュ管理ページで、 Magentoキャッシュのフラッシュ.
-
WAF エラーページのカスタマイズ
Fastly オリジンへのリクエストがで失敗した場合、お客様には次のデフォルトの WAF エラーページが表示されます。 403 Forbidden エラーの原因： 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>
を使用できます カスタム合成ページ > WAF ページの編集 fastly 設定メニューの「」オプションを使用して、クラウドインフラストラクチャプロジェクト上のAdobe Commerceのデフォルトコードをカスタマイズします。 コードを編集する際は、WAF ブロッキングイベントの参照 ID を提供する次の行を保持します。
<p>"} req.http.x-request-id {"</p>
WAF エラーページを編集するには:
-
を選択 ストア > 設定 > 設定 > 詳細 > システム.
-
右側のパネルで、を展開します フルページキャッシュ > Fastly 設定 > カスタム合成ページ.
-
を選択 WAF ページの編集.
-
フィールドに入力して、HTMLを更新します。
- ステータス – を選択します。
403 Forbiddenステータス。 - MIME タイプ — タイプ
text/html. - コンテンツ — デフォルトのHTML応答を編集してカスタム CSS を追加し、必要に応じてタイトルとメッセージを更新します。
- ステータス – を選択します。
-
を選択 Upload ページの上部で、カスタマイズしたHTMLソースを Fastly サーバーにアップロードします。
-
を選択 設定を保存 ページの上部で、更新した設定ファイルを保存します。
-
キャッシュを更新します。
-
ページ上部の通知で、 キャッシュ管理 リンク。
-
キャッシュ管理ページで、 Magentoキャッシュのフラッシュ.
-
エラーレポート番号を表示
デフォルトでは、Fastly はAdobe Commerce エラーをすべて 503 サービスを利用できません エラー。 エラーログレポートの番号を表示して、ログでエラーの詳細を確認できるようにするには、次の手順に従って、Fastly を省略して web サイトを開きます。
-
ストアの IP アドレスを取得します。
-
ステージング環境および実稼動環境の場合：
code language-bash nslookup {your_project_id}.ent.magento.cloud -
Pro 統合環境およびスターター環境の場合：
code language-bash nslookup gw.{your_region}.magentosite.cloud
-
-
ローカルワークステーションの hosts ファイルにアプリケーションドメインと IP アドレスを追加します。
code language-text {server_IP} {store_domain} -
ブラウザーのキャッシュと Cookie をクリアします（または匿名モードに切り替えます）。
-
ストアの web サイトを再度開いて、エラーコードを表示します。
-
エラーコードを使用して、エラーレポートファイルの詳細を見つけます。
-
を見つけます。
./var/report/{error_number}ファイル。