Anpassen von Fehler- und Wartungsseiten
Wenn eine Anfrage an den Fastly-Ursprung fehlschlägt, gibt Fastly Standardantwortseiten mit grundlegender Formatierung und allgemeiner Benachrichtigung zurück, die für Benutzer verwirrend sein können. Beispielsweise gibt Fastly die folgende standardmäßige Fehlerseite zurück, wenn eine Anfrage an die Fastly-Herkunft aufgrund eines 503-Fehlers fehlschlägt.
Sie können Ihre Adobe Commerce Store-Konfiguration aktualisieren, um einige standardmäßige Antwortseiten durch Seiten mit benutzerfreundlicheren Nachrichten und verbessertem HTML-Stil zu ersetzen, wie im folgenden Beispiel gezeigt.
Derzeit können Sie die folgenden Schnellantwortseiten für Ihr Adobe Commerce-Projekt in der Cloud-Infrastruktur anpassen.
HTML-Kodierungsanforderungen:
Der HTML-Code für die benutzerdefinierte Seite muss die folgenden Anforderungen erfüllen:
- Der Inhalt kann bis zu 65.535 Zeichen enthalten.
- Geben Sie alle CSS-Inline-Elemente in der HTML-Quelle an.
- Bundle Bilder auf der HTML-Seite mit base64, damit sie auch dann angezeigt werden, wenn Fastly offline ist. Siehe Daten-URIs auf der CSS-Tricks-Site.
Anpassen der Fehlerseite 503
Kunden wird in den folgenden Fällen die standardmäßige 503-Fehlerseite angezeigt:
- Wenn eine Anfrage an den Fastly-Ursprung einen Antwortstatus von mehr als 500 zurückgibt
- Wenn die schnelle Herkunft ausfällt, z. B. eine Zeitüberschreitung, eine Wartungsaktivität oder Gesundheitsprobleme
Sie können die Standardseite anpassen, indem Sie den folgenden HTML-Code anpassen, um die Formatierung an Ihr Adobe Commerce Store-Design anzupassen, und den Titel und die Nachricht nach Bedarf ändern.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>503</title>
</head>
<body>
<p>Service unavailable</p>
</body></html>
Stellen Sie sicher, dass die geänderte Quelle im Browser korrekt angezeigt wird. Fügen Sie dann den angepassten HTML-Code zur Schnellkonfiguration hinzu.
So fügen Sie der Fastly-Konfiguration die benutzerdefinierte Antwortseite hinzu:
-
Melden Sie sich beibeim Administrator an.
-
Wählen Sie Stores > Einstellungen > Konfiguration > Erweitert > System.
-
Erweitern Sie im rechten Bereich den Eintrag Vollständiger Seiten-Cache > Fastly Configuration > Benutzerdefinierte synthetische Seiten.
-
Wählen Sie HTML festlegen aus.
-
Kopieren Sie den Quellcode für Ihre benutzerdefinierte Antwortseite und fügen Sie ihn in das HTML-Feld ein.
-
Wählen Sie oben auf der Seite die Option Hochladen aus, um die angepasste HTML-Quelle auf den Fastly-Server hochzuladen.
-
Wählen Sie oben auf der Seite Konfiguration speichern aus, um die aktualisierte Konfigurationsdatei zu speichern.
-
Aktualisieren Sie den Cache.
-
Wählen Sie in der Benachrichtigung oben auf der Seite den Link Cache-Verwaltung aus.
-
Wählen Sie auf der Seite "Cachemanagement"die Option Magento-Cache leeren.
-
Anpassen der WAF-Fehlerseite
Kunden sehen die folgende standardmäßige WAF-Fehlerseite, wenn eine Anfrage an den Fastly-Ursprung mit einem 403 Forbidden -Fehler fehlschlägt, der durch ein WAF -Blockierungsereignis verursacht wird.
Das folgende Codebeispiel zeigt die HTML-Quelle für die Standardseite:
<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>
Sie können die Option Benutzerdefinierte Synthetische Seiten > WAF-Seite bearbeiten im Schnellkonfigurationsmenü verwenden, um den Standardcode für Ihr Adobe Commerce-Projekt in der Cloud-Infrastruktur anzupassen. Wenn Sie den Code bearbeiten, behalten Sie die folgende Zeile bei, die die Referenz-ID für das WAF-Blockierungsereignis bereitstellt:
<p>"} req.http.x-request-id {"</p>
So bearbeiten Sie die WAF-Fehlerseite:
-
Wählen Sie Stores > Einstellungen > Konfiguration > Erweitert > System.
-
Erweitern Sie im rechten Bereich den Eintrag Vollständiger Seiten-Cache > Fastly Configuration > Benutzerdefinierte synthetische Seiten.
-
Wählen Sie WAF-Seite bearbeiten aus.
-
Füllen Sie die Felder aus, um die HTML zu aktualisieren.
- Status - Wählen Sie den Status
403 Forbiddenaus. - MIME type - Typ
text/html. - Inhalt - Bearbeiten Sie die standardmäßige HTML-Antwort, um benutzerdefiniertes CSS hinzuzufügen und den Titel und die Nachricht nach Bedarf zu aktualisieren.
- Status - Wählen Sie den Status
-
Wählen Sie oben auf der Seite die Option Hochladen aus, um die angepasste HTML-Quelle auf den Fastly-Server hochzuladen.
-
Wählen Sie oben auf der Seite Konfiguration speichern aus, um die aktualisierte Konfigurationsdatei zu speichern.
-
Aktualisieren Sie den Cache.
-
Wählen Sie in der Benachrichtigung oben auf der Seite den Link Cache-Verwaltung aus.
-
Wählen Sie auf der Seite "Cachemanagement"die Option Magento-Cache leeren.
-
Fehlerberichtsnummer anzeigen
Standardmäßig werden alle Adobe Commerce-Fehler schnell hinter dem Fehler 503 Dienst nicht verfügbar verborgen. Um die Fehlerprotokollberichtnummer anzuzeigen, damit Sie die Fehlerdetails in den Protokollen finden und überprüfen können, öffnen Sie die Website, auf der die Schritte ausgelassen wurden:
-
Rufen Sie die IP-Adresse Ihres Stores ab:
-
Für Staging- und Produktionsumgebungen:
code language-bash nslookup {your_project_id}.ent.magento.cloud -
Für Pro-Integrationsumgebungen und Starterumgebungen:
code language-bash nslookup gw.{your_region}.magentosite.cloud
-
-
Fügen Sie Ihre Anwendungsdomäne und IP-Adresse zur Hostdatei auf Ihrer lokalen Workstation hinzu:
code language-text {server_IP} {store_domain} -
Löschen Sie den Browsercache und die Cookies (oder wechseln Sie in den Inkognito-Modus).
-
Öffnen Sie erneut Ihre Store-Website, um den Fehlercode anzuzeigen.
-
Verwenden Sie den Fehlercode, um die Details in der Fehlerberichtsdatei zu finden:
-
Suchen Sie die Datei "
./var/report/{error_number}".