En las arquitecturas LAMP tradicionales, era habitual preparar entornos de vista previa como /prev o test.example.com protegiéndolos con autenticación básica.
Sin embargo, en las arquitecturas headless CMS recientes que usan Vercel o Cloudflare Pages, muchas personas se preguntan: "Al compilar se genera una URL de vista previa, pero ¿es esto un entorno de staging?" y "¿Realmente se puede configurar la autenticación básica?"
Respuesta: ¡sí existen entornos de vista previa y se pueden proteger de forma eficaz!
Por ejemplo, Vercel y Cloudflare Pages generan automáticamente una URL de vista previa para cada rama de Git. Dicho de otra forma, se crea automáticamente un entorno de staging actualizado en cada ocasión. Si gestionas el código con Git, basta con crear una nueva rama y hacer push para obtener de inmediato una URL de revisión. No es necesario subir archivos manualmente a un entorno de staging.
"Pero, ¿esa URL de vista previa queda expuesta al exterior?"
No se preocupe. Puede configurar restricciones de acceso fácilmente, como se muestra a continuación.
Ejemplo con Cloudflare Pages
En Cloudflare Pages se pueden configurar restricciones de acceso a los entornos de vista previa.
Autenticación básica
- Puede configurar la autenticación con nombre de usuario y contraseña de forma similar al entorno de vista previa tradicional. Salvo en algunas configuraciones específicas, es posible que esta opción sea la que más se utilice.
- Sin embargo, en casos como una configuración híbrida que combina SSG (Static Site Generation) y SSR (Server-Side Rendering), la autenticación Basic puede no funcionar correctamente.
Cloudflare Access
- Si la autenticación Basic descrita anteriormente no es adecuada, o si desea un control de acceso más flexible, utilice Cloudflare Access.
Puede realizar la siguiente configuración desde la interfaz gráfica (en el plan gratuito, el límite es de hasta 50 usuarios).
Permitir solo a los usuarios con dominios de correo específicos, como example.com- Permitir solo a los usuarios con direcciones de correo electrónico especificadas
- Autenticación con cuenta de 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 los entornos de vista previa en Vercel.
- Vercel Authentication: restricción de acceso solo para los miembros del equipo
- Protección con contraseña (disponible desde el plan Pro en adelante)
- También es posible aplicar restricciones diferentes a los entornos de producción y de vista previa.
Con la función Vercel Authentication, es posible limitar el acceso solo a los miembros del proyecto, crear enlaces compartibles y más.
Por cierto, la protección de los entornos de vista previa de Vercel solía resultar incómoda, ya que la autenticación con contraseña tenía un coste adicional (150 $/mes). Pero ¡ahora Deployment Protection está disponible en todos los planes!
https://vercel.com/docs/deployment-protection
.png?fm=avif)
Dicho de otro modo, así funciona.
Método tradicional | El mundo de Jamstack/Vercel/Cloudflare Pages |
|---|---|
| URL de vista previa por rama + contraseña, autenticación por correo, restricción por IP, etc. |
Carga manual | Despliegue automático con git push |
La configuración y gestión de las restricciones de acceso es algo engorrosa | Las restricciones de acceso se pueden configurar de forma relativamente sencilla mediante una GUI u otras herramientas |
«Jamstack es muy atractivo, pero ¿de verdad tiene entornos de vista previa adecuados?». «¿Y la seguridad está bien?». Hoy en día, el entorno de staging es un «entorno de vista previa» que se genera automáticamente para cada rama. Además, las restricciones de acceso se pueden configurar de forma flexible y sencilla.
Puede lograr la misma tranquilidad que con los métodos anteriores, pero de forma más sencilla e inteligente. Le recomendamos probarlo en su próximo proyecto.
Pasó del DTP al mundo web y, sin darse cuenta, domina el maquetado, el frontend, la dirección de proyectos y la accesibilidad: un auténtico "maestro de todas las técnicas". Desde los inicios de Liberogic ha desempeñado múltiples funciones y hoy es una auténtica enciclopedia viviente dentro de la empresa. Últimamente se ha obsesionado con la optimización mediante prompts, preguntándose: «¿No podríamos apoyarnos más en la IA para la accesibilidad?». Su tecnología y su forma de pensar siguen evolucionando.
Ayumu Futamata
Especialista en Accesibilidad Web certificado por IAAP (WAS) / Ingeniero de marcado / Ingeniero frontend / Director web