Bei klassischen Architekturen wie dem LAMP-Stack war es üblich, eine Vorschau-Umgebung bereitzustellen, indem /prev/ oder test.example.com/ mit einer Basic-Authentifizierung versehen wurde.
Bei aktuellen Headless-CMS-Architekturen mit Vercel oder Cloudflare Pages herrscht dagegen oft Verwirrung. Viele fragen sich: "Nach dem Build entsteht eine Preview-URL, aber ist das schon die Staging-Umgebung?" Oder: "Lässt sich die Passwortauthentifizierung (Basic-Authentifizierung) überhaupt einrichten?"
Fazit: Es gibt durchaus eine Vorschau-Umgebung, und sie lässt sich zuverlässig absichern!
Vercel und Cloudflare Pages erzeugen beispielsweise für jeden Git-Branch automatisch eine Preview-URL. Anders gesagt: Es handelt sich um einen Mechanismus, der bei jeder Änderung automatisch eine aktuelle Staging-Umgebung bereitstellt. Wenn der Quellcode in Git verwaltet wird, genügt es, einen neuen Branch anzulegen und zu pushen, schon steht eine URL zur Überprüfung bereit. Das manuelle Hochladen von Dateien in eine Staging-Umgebung entfällt vollständig.
"Aber wird diese Preview-URL dann öffentlich zugänglich?"
Keine Sorge. Zugriffsbeschränkungen lassen sich ganz einfach einrichten, wie das folgende Beispiel zeigt.
Beispiel für Cloudflare Pages
Mit Cloudflare Pages lassen sich Zugriffsbeschränkungen für Vorschau-Umgebungen einrichten.
Basic-Authentifizierung
- Sie können die Authentifizierung über Benutzername und Passwort einrichten, ähnlich wie bei einer herkömmlichen Vorschauumgebung. Abgesehen von bestimmten Konfigurationen wird diese Option häufig verwendet.
- In manchen Fällen, etwa bei einer hybriden Architektur, die SSG (Static Site Generation) und SSR (Server-Side Rendering) kombiniert, funktioniert die Basic-Authentifizierung jedoch nicht zuverlässig.
Cloudflare Access
- Wenn die Basic-Authentifizierung wie oben beschrieben nicht geeignet ist oder eine flexiblere Zugriffskontrolle erforderlich ist, verwenden wir Cloudflare Access.
Über die grafische Benutzeroberfläche sind folgende Einstellungen möglich (im kostenlosen Tarif auf bis zu 50 Benutzer beschränkt).
- Nur Benutzer mit bestimmten E-Mail-Domains wie
example.comzulassen - Nur Benutzer mit bestimmten E-Mail-Adressen zulassen
- Google-Konto-Authentifizierung (auch in Verbindung mit Google Workspace möglich)
- Einschränkung nach IP-Adresse
- Ausstellung eines temporären Zugangs-PINs
Beispiel für Vercel
Auch bei Vercel lässt sich der Schutz von Preview-Umgebungen selbstverständlich einrichten.
- Vercel Authentication: Zugriffsbeschränkung nur für Teammitglieder
- Passwortschutz (konfigurierbar ab dem Pro-Plan oder höher)
- Es ist auch möglich, für Production- und Preview-Umgebungen unterschiedliche Beschränkungen festzulegen.
Mit dieser Funktion von Vercel Authentication lassen sich beispielsweise Zugriffe auf Projektmitglieder beschränken oder teilbare Links erstellen.
Übrigens war der Schutz von Preview-Umgebungen bei Vercel bisher mit der Passwort-Authentifizierung verbunden, die als separate Option kostenpflichtig war (150 $/Monat) und daher wenig praktikabel. Inzwischen steht Deployment Protection in allen Plänen zur Verfügung!︎
https://vercel.com/docs/deployment-protection
.png?fm=avif)
Das heißt im Klartext:
Bisherige Methode | Die Welt von Jamstack/Vercel/Cloudflare Pages |
|---|---|
| Vorschau-URLs für jeden Branch + Passwort-, E-Mail- oder IP-Beschränkungen u. Ä. |
Manueller Upload | Automatische Bereitstellung per Git Push |
Die Einrichtung und Verwaltung von Zugriffsbeschränkungen ist etwas umständlich | Zugriffsbeschränkungen lassen sich über die GUI und Ähnliches vergleichsweise einfach einrichten |
„Jamstack sieht gut aus, aber gibt es eine richtige Vorschauumgebung?“ „Ist die Sicherheit gewährleistet?“ Moderne Staging-Umgebungen sind Vorschauumgebungen, die für jeden Branch automatisch bereitgestellt werden. Zugriffsbeschränkungen lassen sich dabei flexibel und einfach einrichten.
Dieselbe Sicherheit wie bisher, aber einfacher und eleganter umgesetzt. Probieren Sie es gerne schon beim nächsten Projekt aus.
Vom DTP in die Webwelt: Heute beherrscht er Markup, Frontend, Projektleitung und Barrierefreiheit gleichermaßen – ein wahrer "Techniker-Guru". Seit den Anfängen von Liberogic vielseitig im Einsatz und heute eine lebende Enzyklopädie im Team. Derzeit tüftelt er mit großer Begeisterung an effizienteren Abläufen durch gezielte Prompts – etwa mit der Frage: "Können wir bei der Barrierefreiheit nicht mehr auf KI setzen?" Technik und Denkweise entwickeln sich weiter.
Ayumu Futamata
IAAP-zertifizierter Web Accessibility Specialist (WAS) / Markup-Entwickler / Frontend-Entwickler / Webdirektor