Random Bits of Knowledge: 404-Rewrite bei AWS Amplify mit Cloudformation

  • Maximilian Heinrich
  • 23.09.2020

Jetzt professionelle Hilfe holen!

Hängst du irgendwo fest? Lass dir von unserem Team helfen. Buch dir ein Gespräch bei uns und wir finden eine Lösung!

Termin ausmachen!

Korrekte Darstellung von 404-Seiten bei einer SPA

Vor kurzem hatten wir die Aufgabe eine Single Page Application (SPA) auf Amazon Web Services (AWS) bzw. deren Applikationsplattform Amplify aufzusetzen und dafür Cloudformation zu verwenden.

TL;DR - DAS ERGEBNIS ZUERST

Eine kleine aber feine Herausforderung bestand darin, das Handling der 404-Seiten bei einer SPA korrekt darzustellen, bei der der Webserver -in diesem Fall also Amplify- ja unterscheiden muss:

    1. Handelt es sich bei der aufgerufenen URL um eine Seite, die zwar als physische Datei nicht existiert, wohl aber vom Routing meiner SPA korrekt bedient werden kann? Dann muss ich den Request einfach nur durch meine /index.html umleiten, oder
    1. Gibt es die Seite wirklich nicht, und ich gebe eine “normale” 404-Meldung aus.

Die ganze Geschichte hat noch ein paar weitere Aspekte, auf die ich hier im Einzelnen nicht eingehe, aber im Endeffekt hat AWS seit Herbst 2019 bei den Konfigurationsmöglichkeiten seiner Amplify-Apps deswegen neben einem “404 Redirect” auch noch ein “404 Rewrite” im Angebot.

Soweit so gut: Wir mussten diese neue Konfigurationsmöglichkeit aber in Cloudformation verwenden und der Dokumentation war nicht zu entnehmen, wie das geht: Ein “404 Redirect” wurde einfach per “404” in der Cloudformation-Konfiguration definiert, aber ein 404-Rewrite war nirgends als Beispiel dokumentiert oder lediglich von mir nicht aufzufinden. Lange Rede kurzer Sinn: Die Lösung lautet: “404-200”, also z.B. so, wenn man CloudFormation mit JSON Syntax verwendet:

"CustomRules": [
  {
    "Source": "",
    "Target": "/index.html",
    "Status": "404-200"
  }

Der Anwendungsfall AWS Amplify in Kombination mit Cloudformation sollte nicht allzu selten sein - trotzdem hatte ich dieses Tiny bit of Knowledge nirgends finden können und hoffe nun, dass jemand mit dem gleichen Problem es dafür jetzt hier findet :-).