Bei herkömmlichen LAMP-Konfigurationen war es üblich, Vorschauumgebungen durch Basic-Authentifizierung auf /prev/ oder test.example.com/ einzurichten.
Bei neueren Setups mit Vercel oder Cloudflare Pages und Headless-CMS-Konfigurationen entstehen jedoch häufig Verwirrungen: "Wenn ich baue, entsteht eine Preview-URL – ist das die Staging-Umgebung?", "Kann ich überhaupt Passwortauthentifizierung (Basic Authentication) konfigurieren?" Viele Entwickler sind unsicher.
Fazit: Es gibt eine Vorschau-Umgebung – und sie ist gut geschützt!
Zum Beispiel verfügen Vercel und Cloudflare Pages über eine Funktion, die für jeden Git-Branch automatisch eine Preview-URL erstellt. Anders ausgedrückt ist dies ein Mechanismus, der jedes Mal automatisch die neueste Staging-Umgebung erzeugt. Wenn Sie Ihren Quellcode mit Git verwalten, müssen Sie nur einen neuen Branch erstellen und pushen – die Bestätigungs-URL wird sofort generiert. Es entfällt jeglicher manuelle Aufwand zum Hochladen von Dateien in die Staging-Umgebung.
"Aber wird diese Vorschau-URL dann nicht öffentlich zugänglich?"
Machen Sie sich keine Sorgen. Zugriffsbeschränkungen lassen sich genauso einfach konfigurieren, wie im Folgenden gezeigt.
Beispiel für Cloudflare Pages
Bei Cloudflare Pages können Sie Zugriffsbeschränkungen für die Vorschauumgebung konfigurieren.
Basic-Authentifizierung
- Sie können die Authentifizierung mit Benutzernamen und Passwort ähnlich wie in traditionellen Vorschauumgebungen einrichten. Abgesehen von bestimmten Konfigurationen ist dies möglicherweise die häufigere Wahl.
- Es gibt jedoch Fälle, in denen die Basic-Authentifizierung nicht ordnungsgemäß funktioniert, beispielsweise bei einer Hybrid-Konfiguration aus SSG (Static Site Generation) und SSR (Server-Side Rendering).
Cloudflare Access
- Wenn die Basic-Authentifizierung wie oben beschrieben nicht geeignet ist oder Sie eine flexiblere Zugriffskontrolle benötigen, verwenden Sie Cloudflare Access.
Sie können die folgenden Einstellungen über die GUI konfigurieren (kostenloses Plan mit Beschränkung auf 50 Benutzer).
- Nur Benutzer mit einer bestimmten E-Mail-Domain wie
example.comerlauben - Nur Benutzer mit der angegebenen E-Mail-Adresse erlauben
- Google-Kontoauthentifizierung (Integration mit Google Workspace auch möglich)
- Beschränkung nach IP-Adresse
- Ausstellung einer temporären Zugangs-PIN
Vercel-Beispiel
Selbstverständlich ist auch bei Vercel der Schutz der Vorschauumgebung möglich.
- Vercel Authentication – Zugriff nur für Teammitglieder
- Kennwortschutz (konfigurierbar in Pro-Plan und höher)
- Es ist auch möglich, unterschiedliche Einschränkungen für die Produktions- und Vorschauumgebung festzulegen
Durch die Nutzung dieser Vercel Authentication-Funktion können Sie den Zugriff auf Projektmitglieder beschränken, teilbare Links erstellen und vieles mehr.
Übrigens war der Schutz der Vorschauumgebung auf Vercel bisher umständlich, da die Passwortauthentifizierung nur gegen Aufpreis ($150/mo) verfügbar war, aber Deploy Protection ist nun in allen Plänen verfügbar!
https://vercel.com/docs/deployment-protection
Das heißt, das ist es!
Herkömmliche Methode | Die Welt von Jamstack/Vercel/Cloudflare Pages |
|---|---|
| Vorschau-URLs pro Branch + Passwort-/E-Mail-Authentifizierung/IP-Beschränkungen und mehr |
Manuell hochladen | Git push mit automatischer Bereitstellung |
Die Einrichtung/Verwaltung von Zugriffsbeschränkungen ist etwas umständlich | Zugriffsbeschränkungen lassen sich über die GUI und ähnliche Methoden relativ einfach konfigurieren |
"Jamstack sieht schick aus, aber gibt es wirklich eine Preview-Umgebung?" "Ist die Sicherheit gewährleistet?" Die modernen Staging-Umgebungen werden automatisch pro Branch als "Preview-Umgebungen" bereitgestellt. Und der Zugriff kann flexibel und einfach konfiguriert werden.
Sie können die vertraute Arbeitsweise von früher jetzt noch einfacher und intelligenter umsetzen. Probieren Sie es gerne bei Ihrem nächsten Projekt aus.
Von DTP in die Web-Welt – und dann Markup, Frontend, Projektleitung und Accessibility alles gemeistert: ein "Technik-Weise". Seit den Anfangstagen von Liberogic vielseitig tätig und mittlerweile eine lebende Wissensquelle im Unternehmen. Derzeit fasziniert von der Frage "Können wir Accessibility-Umsetzung noch stärker mit KI unterstützen?" und erforscht Optimierungsmöglichkeiten durch gezieltes Prompt-Engineering. Technisch wie gedanklich immer noch in Entwicklung.
Futa
IAAP-zertifizierter Web Accessibility Specialist (WAS) / Markup Engineer / Frontend Engineer / Web Director