Avec les architectures LAMP traditionnelles, il était courant de mettre en place un environnement de prévisualisation en protégeant /prev/ ou test.example.com/ par une authentification Basic.
Pourtant, avec les architectures headless CMS récentes utilisant Vercel ou Cloudflare Pages, beaucoup de personnes se demandent : « Quand je fais un build, une URL de prévisualisation est créée, mais est-ce un environnement de staging ? » ou « Est-ce que je peux même configurer une authentification par mot de passe (Basic) ? »
En résumé : un environnement de prévisualisation existe bel et bien, et il peut être parfaitement sécurisé !
Par exemple, Vercel et Cloudflare Pages génèrent automatiquement une preview URL pour chaque branche Git. En d'autres termes, c'est un mécanisme qui crée automatiquement un environnement de staging à jour à chaque fois. Si votre code source est géré avec Git, il vous suffit de créer une nouvelle branche et de la pousser (push) pour obtenir immédiatement une URL de vérification. Aucun envoi manuel de fichiers vers un environnement de staging n'est nécessaire.
« Mais cette URL de prévisualisation n'est-elle pas accessible au public ? »
Pas de souci. Vous pouvez facilement mettre en place des restrictions d'accès, comme ci-dessous.
Exemple avec Cloudflare Pages
Cloudflare Pages vous permet de configurer des restrictions d'accès à vos environnements de prévisualisation.
Authentification Basic
- You can set up authentication with a username and password, similar to a traditional preview environment. Depending on your configuration, many users may choose this option.
- However, Basic authentication may not work well in some cases, such as with a hybrid setup combining SSG (Static Site Generation) and SSR (Server-Side Rendering).
Cloudflare Access
- If Basic authentication is not suitable, or if you need more flexible access control, use Cloudflare Access.
The following settings are available through the GUI (the free plan is limited to 50 users).
- Allow only users with specific email domains, such as
example.com - Allow only users with specified email addresses
- Google account authentication (integration with Google Workspace is also available)
- IP address restrictions
- Issuing temporary access PINs
Example with Vercel
La protection des environnements de prévisualisation est bien sûr possible sur Vercel.
- Vercel Authentication : accès restreint aux seuls membres de l'équipe
- Protection par mot de passe (configurable à partir du forfait Pro)
- Il est également possible d'appliquer des restrictions différentes à l'environnement de production et à l'environnement de prévisualisation.
Grâce à cette fonctionnalité Vercel Authentication, il est possible de limiter l'accès aux seuls membres du projet, de créer des liens partageables, etc.
Au passage, la protection des environnements de prévisualisation de Vercel était difficile à utiliser avec l'authentification par mot de passe, facturée en supplément (150 $/mois). Deployment Protection est désormais disponible sur tous les forfaits !
https://vercel.com/docs/deployment-protection
.png?fm=avif)
En résumé, voici ce qu'il faut retenir !
Méthode traditionnelle | Le monde du Jamstack/Vercel/Cloudflare Pages |
|---|---|
| URL de prévisualisation par branche + mot de passe, authentification par e-mail, restriction par IP, etc. |
Téléversement manuel | Déploiement automatique via Git push |
Configuration et gestion des restrictions d'accès un peu fastidieuses | Les restrictions d'accès sont relativement simples à configurer via une interface graphique |
« Jamstack, c'est élégant, mais y a-t-il un vrai environnement de prévisualisation ? » « Et la sécurité, ça tient la route ? » Aujourd'hui, les environnements de staging sont des « environnements de prévisualisation » générés automatiquement pour chaque branche. Et les restrictions d'accès se configurent facilement et avec souplesse.
Vous retrouvez le même niveau de sécurité que par le passé, en plus simple et plus efficace. N'hésitez pas à essayer dès votre prochain projet.
Passé du DTP au Web, il maîtrise aussi bien le balisage que le frontend, la direction de projet et l'accessibilité : un véritable « sage de la technique ». Actif chez Liberogic depuis ses débuts, il est aujourd'hui une référence interne incontournable. Ces derniers temps, il explore avec passion l'optimisation par l'IA : « Ne pourrait-on pas davantage s'appuyer sur l'IA pour l'accessibilité ? » Sa technique comme sa réflexion continuent d'évoluer.
Ayumu Futamata
Spécialiste certifié en accessibilité web IAAP (WAS) / Intégrateur balisage / Ingénieur frontend / Directeur web