En las configuraciones LAMP tradicionales y similares, era común preparar un entorno de vista previa con autenticación básica en /prev/ o test.example.com/.
Sin embargo, con configuraciones recientes de headless CMS mediante Vercel o Cloudflare Pages, muchas personas se confunden: "¿Se genera una URL de vista previa al compilar, pero es stg?" o "¿Se puede configurar la autenticación por contraseña (autenticación básica) en primer lugar?"
Conclusión: ¡El entorno de vista previa sí existe! ¡Y puede estar bien protegido!
Por ejemplo, Vercel y Cloudflare Pages cuentan con una función que genera automáticamente URLs de vista previa para cada rama de Git. En otras palabras, es un mecanismo que crea automáticamente un entorno de staging actualizado cada vez. Si administras tu código fuente con Git, solo necesitas crear una rama nueva y hacer push para que se genere inmediatamente una URL de verificación. No hay necesidad de cargar archivos manualmente en el entorno de staging.
"Pero, ¿se publican públicamente esas URLs de vista previa?"
No te preocupes. También es fácil configurar restricciones de acceso como las siguientes.
Ejemplo de Cloudflare Pages
En Cloudflare Pages puedes configurar restricciones de acceso a tu entorno de vista previa.
Autenticación básica
- Puedes configurar autenticación mediante nombre de usuario y contraseña, similar a los entornos de vista previa tradicionales. Excepto en configuraciones específicas, este método es probablemente el más utilizado.
- Sin embargo, hay casos en los que la autenticación básica no funciona correctamente, como en configuraciones híbridas que combinan SSG (Static Site Generation) y SSR (Server-Side Rendering).
Cloudflare Access
- Cuando la autenticación básica no es apropiada o necesitas un control de acceso más flexible, utiliza Cloudflare Access.
Desde la GUI puedes configurar opciones como las siguientes (el plan gratuito tiene un límite de 50 usuarios).
- Permitir solo a usuarios con un dominio de correo específico como
example.com - Permitir solo a usuarios con una dirección de correo específica
- Autenticación con Google (también es posible la integración con Google Workspace)
- Restricción por dirección IP
- Emisión de PIN de acceso temporal
Ejemplo de Vercel
Por supuesto, también es posible proteger el entorno de vista previa en Vercel.
- Autenticación de Vercel: restricción de acceso solo para miembros del equipo
- Protección con contraseña (configurable en planes Pro o superior)
- Es posible aplicar restricciones diferentes en el entorno de producción y en el entorno de vista previa
Al utilizar la funcionalidad de Autenticación de Vercel, es posible permitir acceso solo a miembros del proyecto y crear enlaces compartibles.
Por cierto, la protección del entorno de vista previa de Vercel tenía un costo adicional de $150/mes para la autenticación con contraseña, lo que resultaba incómodo, pero Deploy Protection ahora está disponible en todos los planes.
https://vercel.com/docs/deployment-protection
.png?fm=avif)
Es decir, ¡así es exactamente!
Método tradicional | El mundo de Jamstack/Vercel/Cloudflare Pages |
|---|---|
| URL de vista previa por rama + autenticación por contraseña/correo/restricción de IP, etc. |
Carga manual | Despliegue automático mediante Git push |
La configuración y gestión de restricciones de acceso es algo compleja | Las restricciones de acceso se pueden configurar con relativa facilidad mediante GUI, etc. |
«Jamstack es elegante, pero ¿realmente hay un entorno de vista previa?» «¿Es seguro?» Los entornos de staging modernos son «entornos de vista previa» que se generan automáticamente para cada rama. Y las restricciones de acceso también se pueden configurar de forma flexible y sencilla.
Puedes lograr la misma confianza que con los métodos anteriores, pero de manera más fácil y más inteligente. Te invitamos a que lo pruebes en tu próximo proyecto.
Desde que saltó del mundo del DTP a la web, ha dominado markups, frontend, dirección y accesibilidad, convirtiéndose en el "sabio técnico" de la empresa. Ha sido un pilar multifacético desde los inicios de Liberogic y es ahora una referencia indispensable dentro de la organización. Últimamente está explorando eficiencias basadas en prompts, preguntándose «¿podríamos delegar más trabajo de accesibilidad a la IA?». Tanto su tecnología como su pensamiento siguen evolucionando.
Futsan
Especialista en web accesibilidad certificado por IAAP (WAS) / Ingeniero de markups / Ingeniero frontend / Director web