エラーおよびメンテナンスページのカスタマイズ
Fastly オリジンへのリクエストが失敗した場合、Fastlyは、ユーザーにとって混乱しやすい基本的なフォーマットと汎用的なメッセージを含むデフォルトの応答ページを返します。 例えば、Fastlyは、503 エラーが原因でFastly オリジンへのリクエストが失敗した場合、次のデフォルトのエラーページを返します。
次の例に示すように、Adobe Commerce ストア設定を更新して、一部のデフォルトのレスポンスページを、より使いやすいメッセージングとHTMLのスタイルを改善したページに置き換えることができます。
現在、Adobe Commerce on cloud infrastructure プロジェクトに対して、次のFastly応答ページをカスタマイズできます。
HTMLのコーディング要件：
カスタムページのHTML コードは、次の要件を満たす必要があります。
- コンテンツには、最大65,535文字を含めることができます。
- HTML ソース内のすべてのCSS インラインを指定します。
- Fastlyがオフラインの場合でも表示されるように、base64を使用してHTML ページの画像をバンドルします。 css-tricks サイトの データ URIを参照してください。
503 エラーページのカスタマイズ
顧客には、次の場合にデフォルトの503 エラーページが表示されます。
- Fastly オリジンへのリクエストが500を超える応答ステータスを返す場合
- タイムアウト、メンテナンスアクティビティ、健康上の問題など、Fastlyの生成元が停止している場合
デフォルトページをカスタマイズするには、次のHTML コードを調整して、Adobe Commerce ストアのテーマに合わせてスタイルを設定し、必要に応じてタイトルとメッセージを変更します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>503</title>
</head>
<body>
<p>Service unavailable</p>
</body></html>
変更されたソースがブラウザーに正しく表示されていることを確認します。 次に、カスタマイズしたHTMLコードをFastly設定に追加します。
Fastly設定にカスタム応答ページを追加するには：
-
管理者に ログインします。
-
Stores > Settings > Configuration > Advanced > Systemを選択します。
-
右側のペインで、フルページキャッシュ > Fastly設定 > カスタム合成ページを展開します。
-
「HTMLを設定」を選択します。
-
カスタムレスポンスページのソースコードをコピーして、HTML フィールドに貼り付けます。
-
ページの上部にある「アップロード」を選択して、カスタマイズした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>
Fastly設定メニューの「カスタム合成ページ > WAFページを編集」オプションを使用して、Adobe Commerce on cloud infrastructure プロジェクトのデフォルトコードをカスタマイズできます。 コードを編集する場合は、WAF ブロックイベントの参照IDを提供する次の行を保持します。
<p>"} req.http.x-request-id {"</p>
WAF エラーページを編集するには:
-
管理者にログインします。
-
Stores > Settings > Configuration > Advanced > Systemを選択します。
-
右側のペインで、フルページキャッシュ > Fastly設定 > カスタム合成ページを展開します。
-
「WAF ページを編集」を選択します。
-
HTMLを更新するには、フィールドに入力します。
- ステータス —
403 Forbiddenステータスを選択します。 - MIME タイプ — タイプ
text/html。 - コンテンツ — カスタム CSSを追加し、必要に応じてタイトルとメッセージを更新するには、デフォルトのHTML応答を編集します。
- ステータス —
-
ページの上部にある「アップロード」を選択して、カスタマイズした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
-
-
アプリケーションドメインとIP アドレスをローカルワークステーションのhosts ファイルに追加します。
code language-text {server_IP} {store_domain} -
ブラウザーのキャッシュとCookieを消去します（またはシークレットモードに切り替えます）。
-
もう一度ストアサイトを開いて、エラーコードを表示します。
-
エラーコードを使用して、エラーレポートファイルの詳細を確認します。
-
./var/report/{error_number}ファイルを探します。