エラーページとメンテナンスページのカスタマイズ
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ページのソースコードをコピーして、「レスポンス」フィールドに貼り付けます。
-
ページの上部にある「アップロード」を選択して、カスタマイズしたHTMLソースを Fastly サーバーにアップロードします。
-
ページ上部の「設定を保存」を選択して、更新した設定ファイルを保存します。
-
キャッシュを更新します。
-
ページ上部の通知で、「キャッシュ管理」リンクを選択します。
-
キャッシュ管理ページで、「Magentoキャッシュをフラッシュ」を選択します。
-
WAF エラーページのカスタマイズ
WAF ブロッキングイベントが原因で 403 Forbidden エラーが発生して Fastly オリジンへのリクエストが失敗すると、デフォルトの 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>
WAF エラーページを編集するには:
-
ストア/設定/設定/詳細/システム を選択します。
-
右側のパネルで、フルページキャッシュ / Fastly 設定 / カスタム合成ページ を展開します。
-
WAF ページを編集 を選択します。
-
フィールドに入力して、HTMLを更新します。
- ステータス:
403 Forbiddenのステータスを選択します。 - MIME タイプ - タイプ
text/html。 - コンテンツ - デフォルトのHTML応答を編集してカスタム CSS を追加し、必要に応じてタイトルとメッセージを更新します。
- ステータス:
-
ページの上部にある「アップロード」を選択して、カスタマイズしたHTMLソースを Fastly サーバーにアップロードします。
-
ページ上部の「設定を保存」を選択して、更新した設定ファイルを保存します。
-
キャッシュを更新します。
-
ページ上部の通知で、「キャッシュ管理」リンクを選択します。
-
キャッシュ管理ページで、「Magentoキャッシュをフラッシュ」を選択します。
-
エラーレポート番号を表示
デフォルトでは、Fastly は、503 Service Unavailable エラーの背後にあるすべてのAdobe Commerce エラーを非表示にします。 エラーログレポートの番号を表示して、ログでエラーの詳細を確認できるようにするには、次の手順に従って、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}ファイルを見つけます。