Avec les configurations LAMP traditionnelles, il était courant de mettre en place un environnement de prévisualisation en appliquant une authentification Basic sur /prev/ ou test.example.com.
Cependant, avec les configurations headless CMS récentes utilisant Vercel ou Cloudflare Pages, de nombreuses personnes sont confuses : « Un URL de prévisualisation est généré lors du build, mais est-ce l'environnement de staging ? » « Est-il même possible de configurer l'authentification par mot de passe (Basic Auth) ? »
Conclusion : l'environnement de prévisualisation existe bel et bien ! Et il peut être correctement sécurisé !
Par exemple, Vercel et Cloudflare Pages disposent tous deux d'une fonctionnalité qui génère automatiquement une preview URL pour chaque branche Git. Autrement dit, il s'agit d'un mécanisme qui crée automatiquement un environnement de staging à jour à chaque fois. Si vous gérez votre code source avec Git, il vous suffit de créer une nouvelle branche et de faire un push pour obtenir immédiatement une URL de vérification. Plus besoin de charger manuellement les fichiers sur l'environnement de staging.
« Mais cet URL de prévisualisation n'est-il pas exposé publiquement ? »
Rassurez-vous. Il est tout aussi simple de configurer des restrictions d'accès comme suit :
Exemple avec Cloudflare Pages
Cloudflare Pages vous permet de configurer des restrictions d'accès à votre environnement de prévisualisation.
Authentification basique
- Vous pouvez configurer une authentification par nom d'utilisateur et mot de passe, similaire à un environnement de prévisualisation traditionnel. À l'exception de certaines configurations particulières, c'est souvent l'option privilégiée.
- Cependant, l'authentification basique peut ne pas fonctionner correctement dans certains cas, notamment avec une architecture hybride combinant SSG (Static Site Generation) et SSR (Server-Side Rendering).
Cloudflare Access
- Si l'authentification basique ne convient pas ou si vous souhaitez un contrôle d'accès plus granulaire, utilisez Cloudflare Access.
Les configurations suivantes peuvent être définies via l'interface (le forfait gratuit est limité à 50 utilisateurs).
- Autoriser uniquement les utilisateurs disposant d'un domaine de messagerie spécifique, comme
example.com - Autoriser uniquement les utilisateurs possédant une adresse e-mail spécifiée
- Authentification par compte Google (intégration Google Workspace possible)
- Restriction par adresse IP
- Émission d'un code PIN d'accès temporaire
Exemple avec Vercel
Avec Vercel aussi, il est bien sûr possible de protéger votre environnement de prévisualisation.
- Authentification Vercel - Restriction d'accès limitée aux membres de l'équipe
- Protection par mot de passe (configurable avec les forfaits Pro et supérieurs)
- Il est aussi possible d'appliquer des restrictions différentes entre l'environnement de production et l'environnement de prévisualisation
En utilisant cette fonctionnalité d'authentification Vercel, vous pouvez restreindre l'accès aux seuls membres du projet et créer des liens partageables.
À propos : la protection de l'environnement de prévisualisation Vercel utilisait auparavant une authentification par mot de passe facturée à part (150 $/mois), ce qui n'était pas très pratique, mais Deploy Protection est désormais disponible sur tous les forfaits !
https://vercel.com/docs/deployment-protection
.png?fm=avif)
En d'autres termes, c'est exactement ça !
Approche traditionnelle | Le monde de Jamstack/Vercel/Cloudflare Pages |
|---|---|
| URL d'aperçu par branche + authentification par mot de passe/e-mail/restrictions IP, etc. |
Téléchargement manuel | Déploiement automatique via Git push |
La configuration/gestion des restrictions d'accès est quelque peu complexe | Les restrictions d'accès peuvent être configurées relativement facilement via une interface graphique, etc. |
« Jamstack est élégant, mais avez-vous vraiment un environnement d'aperçu ? » « La sécurité est-elle assurée ? » Les environnements de staging modernes sont des « environnements d'aperçu » générés automatiquement par branche. Et les restrictions d'accès peuvent être configurées de manière flexible et simple.
Vous pouvez réaliser la même sérénité qu'avant, mais plus facilement et intelligemment. N'hésitez pas à l'essayer dès votre prochain projet.
Passé du DTP au monde du web, il s'est avéré être un « sage des techniques » maîtrisant le markup, le frontend, la direction et l'accessibilité. Actif depuis la fondation de Liberogic, il est devenu une référence incontournable en interne. Récemment, il explore l'optimisation via des prompts IA, se demandant « Pourrions-nous déléguer davantage la conformité en accessibilité à l'IA ? ». Sa technologie et sa réflexion continuent d'évoluer.
Futa
Spécialiste en accessibilité web certifié par l'IAAP (WAS) / Ingénieur markup / Ingénieur frontend / Directeur web