Topics

Haben Sie sich jemals gefragt: „Verfügt Jamstack über keine Vorschauumgebung?“

  • column

In einer herkömmlichen LAMP-Konfiguration/prev/odertest.example.com/Der allgemeine Stil bestand darin, die Basisauthentifizierung zu verwenden, um eine Vorschauumgebung vorzubereiten.

Bei den neuesten Headless-CMS-Konfigurationen mit Vercel oder Cloudflare Pages scheinen jedoch viele Nutzer verwirrt zu sein und stellen Fragen wie: „Beim Erstellen einer Seite wird eine Vorschau-URL generiert, aber ist das stg?“ und „Kann ich überhaupt eine Passwortauthentifizierung (Basisauthentifizierung) einrichten?“

Fazit: Die Vorschauumgebung ist super! Und sie ist gut geschützt!

Beispielsweise verfügen Vercel und Cloudflare Pages über einen Git-Branch.preview URLEs verfügt über die Funktion der automatischen Ausgabe. Mit anderen Worten:Ein System, das jedes Mal automatisch die neueste Staging-Umgebung erstelltWenn Sie Ihren Quellcode mit Git verwalten, können Sie einen neuen Zweig erstellen und pushen. Eine Bestätigungs-URL wird sofort ausgegeben. Es ist nicht erforderlich, Dateien manuell in die Staging-Umgebung hochzuladen.

„Aber wird diese Vorschau-URL öffentlich gemacht?“

Keine Sorge, wir haben Folgendes:Zugriffsbeschränkungen können einfach festgelegt werdenDas war's.

Cloudflare-Seitenbeispiel

Mit Cloudflare Pages können Sie den Zugriff auf die Vorschauumgebung einschränken.

Basisauthentifizierung

  • Sie können die Authentifizierung mit Benutzername und Kennwort ähnlich wie in der herkömmlichen Vorschauumgebung einrichten. Abgesehen von bestimmten Konfigurationen ist dies wahrscheinlich die bevorzugte Methode.
  • Jedoch,Eine Hybridkonfiguration, die SSG (Static Site Generation) und SSR (Server-Side Rendering) kombiniertEs gibt einige Fälle, in denen die Basisauthentifizierung nicht gut funktioniert, beispielsweise:

Cloudflare Access

  • Wenn die oben beschriebene Basisauthentifizierung nicht geeignet ist oder Sie eine flexiblere Zugriffskontrolle wünschen, verwenden Sie Cloudflare Access.
Cloudflare Access-Anmeldebildschirmaufnahme

Folgende Einstellungen sind über die grafische Benutzeroberfläche möglich (die kostenlose Version ist auf 50 Benutzer beschränkt).

  • example.comErlauben Sie nur Benutzern mit bestimmten E-Mail-Domänen, wie z. B.
  • Nur Benutzer mit der angegebenen E-Mail-Adresse sind zulässig
  • Google-Kontoauthentifizierung (Integration mit Google Workspace ist ebenfalls möglich)
  • IP-Adressbeschränkung
  • Vergabe einer temporären Zugangs-PIN
Bildschirmaufnahme der Cloudflare-Einstellungen
Bildschirmaufnahme der Cloudflare-Einstellungen

Vercel-Beispiel

Natürlich können Sie mit Vercel auch die Vorschauumgebung schützen.

  • Vercel AuthenticationEingeschränkter Zugriff nur für Teammitglieder
  • Passwortschutz (verfügbar in den Tarifen „Pro“ und höher)
  • Es ist möglich, unterschiedliche Einschränkungen für die Produktionsumgebung und die Vorschauumgebung festzulegen.

Mithilfe der Vercel-Authentifizierungsfunktion können Sie den Zugriff auf Projektmitglieder beschränken, gemeinsam nutzbare Links erstellen und vieles mehr.

Übrigens war der Schutz der Vorschauumgebung von Vercel schwierig zu verwenden, da für die Kennwortauthentifizierung eine zusätzliche Gebühr anfiel (150 $/Monat).Deploy Protection ist jetzt in allen Plänen verfügbar!

https://vercel.com/docs/deployment-protection

Bildschirmaufnahme der Vercel-Einstellungen
Sie können die Schutzmethode im Abschnitt „Bereitstellungsschutz“ Ihrer Projekteinstellungen auswählen.
Bildschirmaufnahme zur Erstellung eines freigegebenen Vercel-Links
Ein Link zum Teilen kann erstellt werden, indem Sie oben rechts in den Bereitstellungsdetails auf „Teilen“ klicken.

Das bedeutet es also!

Traditionelle Methode

Die Welt der Jamstack/Vercel/Cloudflare-Seiten

stg.example.com+ Basisauthentifizierung

Vorschau-URL für jeden Zweig + Passwort-/E-Mail-Authentifizierung/IP-Einschränkungen usw.

Manueller Upload

Git-PushAutomatisierte Bereitstellung

Das Festlegen und Verwalten von Zugriffsbeschränkungen ist etwas kompliziert

Zugangsbeschränkungen sind Relativ einfach einzurichten mithilfe der GUI usw.

„Jamstack ist cool, aber hat es eine richtige Vorschauumgebung?“ „Ist es sicher?“Modernes Staging ist eine „Vorschauumgebung“, die automatisch für jeden Zweig veröffentlicht wird und deren Zugriffsbeschränkungen flexibel und einfach konfiguriert werden können.

Sie erreichen die gleiche Sicherheit wie mit der herkömmlichen Methode, jedoch einfacher und intelligenter. Probieren Sie es für Ihr nächstes Projekt aus.

Verfasst von

Er wechselte von Desktop-Publishing in die Webwelt und entwickelte sich schnell zu einem wahren Meister seines Fachs mit umfassenden Kenntnissen in Markup, Frontend-Design, Webentwicklung und Barrierefreiheit. Seit der Gründung von Liberogic ist er in verschiedenen Bereichen aktiv und gilt im Unternehmen mittlerweile als wandelndes Lexikon. In letzter Zeit beschäftigt er sich intensiv mit Effizienzsteigerungen durch den Einsatz von Eingabeaufforderungen und fragt sich: „Können wir uns bei der Barrierefreiheit stärker auf KI verlassen?“ Seine Technologien und sein Denken entwickeln sich stetig weiter.

Futa

IAAP-zertifizierter Spezialist für Webzugänglichkeit (WAS) / Markup-Ingenieur / Frontend-Entwickler / Webdirektor

Artikel dieses Mitarbeiters ansehen

Wir sind stolz auf unsere zuverlässige Teamstruktur und unsere schnelle Reaktionsfähigkeit.

Bei Liberogic treiben unsere erfahrenen Mitarbeiter Projekte proaktiv voran, weshalb wir bei unseren Kunden hohes Ansehen genießen.
Wir stellen sicher, dass Projektmanager und -leiter ordnungsgemäß eingesetzt werden, um einen reibungslosen Ablauf des gesamten Projekts zu gewährleisten. Wir verhindern unnötige Kostensteigerungen durch vollständige Zusagen und weisen Ressourcen den richtigen Personen an den richtigen Stellen zu. Wir sind bekannt für unsere Schnelligkeit, mit der wir Arbeitsinhalte erfassen, Kostenvoranschläge erstellen und einreichen.

Bitte beachten Sie, dass wir keine Vor-Ort-Arbeit im SES-Stil aktiv durchführen.

Wir unterstützen fast alle wichtigen Projektmanagement- und Chat-Tools, darunter Slack, Teams, Redmine, Backlog, Asana, Jira, Notion, Google Workspace, Zoom und Webex.

Bitte kontaktieren Sie uns bei allen webbezogenen Anliegen.

Fallstudie