Bij traditionele LAMP-opstellingen was het gebruikelijk om een preview-omgeving op /prev/ of test.example.com/ te maken en die met Basic-authenticatie te beveiligen.
Bij recentere headless CMS-opstellingen met Vercel of Cloudflare Pages zijn veel mensen echter in de war. Ze vragen zich af: "Na een build krijg ik een preview-URL, maar is dit de staging-omgeving?" en "Kan ik überhaupt wachtwoordbeveiliging (Basic-authenticatie) instellen?"
Kort gezegd: er is zeker een preview-omgeving, en je kunt die goed beveiligen!
Vercel en Cloudflare Pages genereren bijvoorbeeld automatisch een preview-URL voor elke Git-branch. Dit betekent met andere woorden dat er telkens automatisch een actuele staging-omgeving wordt aangemaakt. Als je broncode in Git beheert, hoef je alleen een nieuwe branch aan te maken en te pushen om direct een URL voor controle te krijgen. Handmatig bestanden uploaden naar een staging-omgeving is niet meer nodig.
"Maar is die preview-URL dan openbaar toegankelijk?"
Gerust, je kunt eenvoudig toegangsbeperkingen instellen, zoals hieronder beschreven.
Voorbeeld met Cloudflare Pages
In Cloudflare Pages kun je de toegang tot preview-omgevingen beperken.
Basic-authenticatie
- U kunt authenticatie instellen met een gebruikersnaam en wachtwoord, vergelijkbaar met de traditionele preview-omgeving. Afgezien van bepaalde configuraties kiest men dit misschien vaak.
- In sommige gevallen, zoals bij een hybride opzet die SSG (Static Site Generation) en SSR (Server-Side Rendering) combineert, werkt Basic-authenticatie echter niet goed.
Cloudflare Access
- Wanneer Basic-authenticatie zoals hierboven niet geschikt is, of wanneer u flexibelere toegangscontrole wilt, gebruiken we Cloudflare Access.
De volgende instellingen zijn beschikbaar via de GUI (het gratis abonnement is beperkt tot 50 gebruikers).
- Alleen gebruikers met een specifiek e-maildomein, zoals
example.com, toestaan - Alleen gebruikers met opgegeven e-mailadressen toestaan
- Google-accountauthenticatie (integratie met Google Workspace is ook mogelijk)
- Beperking op basis van IP-adres
- Een tijdelijke toegangs-PIN uitgeven
Voorbeeld van Vercel
Preview-omgevingen kunnen uiteraard ook met Vercel worden beveiligd.
- Vercel Authentication toegangsbeperking tot alleen teamleden
- Wachtwoordbeveiliging (instelbaar vanaf het Pro-abonnement)
- Het is ook mogelijk om voor productie- en preview-omgevingen verschillende beperkingen in te stellen
Met deze Vercel Authentication-functie kunt u toegang beperken tot alleen projectleden, shareable links aanmaken en meer.
Bescherming van preview-omgevingen in Vercel was voorheen lastig te gebruiken, omdat wachtwoordauthenticatie als aparte, extra betaalde optie ($150/mo) werd aangeboden. Deployment Protection is nu beschikbaar in alle abonnementen!
https://vercel.com/docs/deployment-protection
.png?fm=avif)
Kort samengevat: zo werkt het!
Traditionele aanpak | De wereld van Jamstack/Vercel/Cloudflare Pages |
|---|---|
| Preview-URL's per branch + wachtwoord, e-mailverificatie, IP-beperking enz. |
Handmatig uploaden | Automatische deployment bij een Git push automatische deployment |
Het instellen en beheren van toegangsbeperkingen is enigszins omslachtig | Toegangsbeperkingen zijn relatief eenvoudig in te stellen via een GUI en dergelijke |
"Jamstack ziet er strak uit, maar is er wel een goede preview-omgeving?" "En is de beveiliging wel in orde?" Een moderne staging-omgeving is een "preview-omgeving" die per branch automatisch wordt aangemaakt. Toegangsbeperkingen zijn bovendien flexibel en eenvoudig in te stellen.
Dezelfde gerustheid als voorheen, maar eenvoudiger en slimmer gerealiseerd. Probeer het gerust al bij uw volgende project.
Van DTP naar het web: al snel werkte hij aan markup, frontend, projectregie en accessibility, en beheerst hij alles. Actief bij Liberogic sinds de beginjaren en nu een levende encyclopedie binnen het bedrijf. Recentelijk verdiept hij zich, met prompts als hulpmiddel, in de vraag: "Kunnen we voor accessibility niet meer op AI leunen?" Technologie en denkwijze blijven zich ontwikkelen.
Ayumu Futamata
IAAP-gecertificeerd webaccessibility-specialist (WAS) / Markup-engineer / Frontend-engineer / Webdirecteur