Sitios web

Vista previa de implementaciones para solicitudes de extracción

Preview deploys give every pull request its own live URL, built from that branch's code, so reviewers can click through the actual change instead of reading a diff and guessing. Each preview updates…

Las implementaciones de vista previa dan a cada solicitud de extracción su propia URL activa, construida a partir del código de esa rama, para que los revisores puedan hacer clic en el cambio real en lugar de leer un diff e intentar adivinarlo. Cada vista previa se actualiza cuando realizas un nuevo commit y se limpia automáticamente cuando se cierra la solicitud de extracción.

Dónde viven las implementaciones de vista previa

Abre Websites, haz clic en el sitio, abre el menú Environments en la pestaña del sitio y elige Preview. La página se titula Preview deploys.

Las vistas previas están separadas del staging. El staging es una copia única de larga vida del sitio que realizas deliberadamente; una vista previa es un entorno de corta vida creado por solicitud de extracción y descartado después. Muchos equipos usan ambos. Consulta Staging Environments para la otra mitad.

Preview deploys page in KPanel

Configurar Git Deploy primero

Las vistas previas no son una característica independiente. Reutilizan la clave de implementación y el comando de compilación del sitio de producción, por lo que el sitio necesita una configuración de Git Deploy que funcione antes de que se puedan habilitar las vistas previas.

Si Git Deploy no está configurado, la página dice Set up Git deploy first y ofrece un botón Go to Git deploy en lugar del formulario de habilitación. Trabaja a través de Deploying a Site From Git y luego vuelve.

Si Git Deploy está conectado pero no tiene comando de compilación, la página de vista previa muestra una advertencia. Las vistas previas asumirán que el repositorio ya está compilado, con archivos estáticos en la raíz. Esto es correcto para un sitio HTML simple e incorrecto para cualquier cosa que se compile, así que establece un comando de compilación en la página de Git Deploy si tu proyecto lo necesita.

Habilitación de vistas previas

  1. En la tarjeta Enable preview deploys, escribe el repositorio en forma owner/repo. No una URL, no una dirección SSH: solo los dos segmentos, por ejemplo acme/marketing-site.
  2. Haz clic en Enable.

Cualquier cosa que no coincida con owner/name se rechaza con Repo must be in owner/name format.

Inmediatamente después de habilitar, KPanel muestra el secreto de firma del webhook en una tarjeta titulada Copy your webhook secret now, con una advertencia de que no lo volverás a ver.

Copia el secreto antes de salir de la página. Se genera una sola vez y no es recuperable después. Si lo pierdes, la solución es regenerarlo, lo que invalida el anterior y significa actualizar tu webhook del repositorio de todas formas.

Agregar el Webhook a tu repositorio

La tarjeta configurada muestra una Webhook URL para pegar en la configuración de tu repositorio, en Webhooks. Configúralo con:

  • Payload URL: la URL del webhook que se muestra en la página.
  • Secret: el valor que acabas de copiar.
  • Content type: JSON.
  • Events: eventos de solicitud de extracción, además de pushes, para que los nuevos commits en una solicitud de extracción abierta reconstruyan la vista previa.

Una vez que esto esté en su lugar, abrir una solicitud de extracción construye una vista previa en pocos minutos. Un trabajo en segundo plano verifica si hay nuevo trabajo de vista previa cada minuto, por lo que no hay necesidad de presionar nada en KPanel.

URLs de vista previa

Cada vista previa obtiene su propio nombre de host en la forma pr-<pull-request-number>-<site-id>.kapsulecloud.app, cubierto por un certificado comodín para que se sirva sobre HTTPS sin ningún paso de certificado de tu parte.

La forma confiable de abrir uno es el botón Open en la fila de la vista previa en Recent previews, que contiene la URL exacta que se aprovisionó para esa compilación. Pega ese enlace en la solicitud de extracción para que los revisores no tengan que encontrar KPanel en absoluto.

Leyendo la lista de vistas previas recientes

La sección Recent previews enumera las vistas previas más recientes, las más nuevas primero. Cada fila muestra el número y el título de la solicitud de extracción, la rama, el commit y un estado:

EstadoSignificado
BUILDINGClonando y compilando ahora
LIVESirviendo en su URL de vista previa
FAILEDLa compilación tuvo un error; expande el registro para ver por qué
DESTROYEDLimpiado, generalmente porque la solicitud de extracción se cerró

Haz clic en Toggle build log en una fila para expandir su salida de compilación en línea. Ese registro es el primer lugar para buscar cuando una vista previa falla, y es la misma salida que tu compilación produciría localmente.

Si la lista está vacía, la página lo indica: abre una solicitud de extracción en el repositorio y una vista previa se construirá en pocos minutos.

Rotación del secreto del webhook

Haz clic en Regenerate secret en la tarjeta configurada. KPanel te pide que confirmes y es explícito en que el secreto actual deja de funcionar inmediatamente y tendrás que actualizarlo en la configuración del webhook de tu repositorio después.

El nuevo secreto se muestra una sola vez, en la misma tarjeta de un solo uso que antes. Cópialo y luego actualiza el webhook en tu repositorio. Entre esos dos momentos, las entregas de webhook entrantes se rechazarán, así que realiza los dos pasos uno tras otro.

Regenera el secreto cuando alguien con acceso de administrador del repositorio se vaya, o si el secreto alguna vez se ha pegado en un lugar donde no debería haber estado, como un canal de chat compartido o un ticket.

Apagar las vistas previas

Haz clic en Disable. La configuración se apaga y el secreto almacenado se borra. Las vistas previas existentes dejan de reconstruirse.

Limpia eliminando también el webhook en tu repositorio. Comenzará a fallar en lugar de hacer algo perjudicial, pero un webhook que devuelve errores para siempre es ruido en el registro de entregas de tu repositorio.

Costos y mantenimiento

Las vistas previas construyen y sirven código real, por lo que usan los mismos recursos que cualquier otra implementación en el sitio. Dos hábitos mantienen eso bajo control:

  • Cierra las solicitudes de extracción en las que ya no estés trabajando. Una solicitud de extracción cerrada tiene su vista previa limpiada automáticamente.
  • No apuntes las vistas previas a credenciales de producción. Dale claves de prueba a través de la pestaña Secrets del entorno preview, que existe precisamente para que la configuración de vista previa y producción no puedan confundirse.

Una URL de vista previa no es privada. Es un nombre de host real y públicamente accesible con un certificado válido, y cualquiera que tenga el enlace puede abrirlo. No uses una vista previa para revisar nada que contenga datos reales de clientes, y no siembres entornos de vista previa a partir de un volcado de base de datos de producción.

Solución de problemas

Nada se construye cuando se abre una solicitud de extracción. Verifica las entregas recientes del webhook en tu repositorio. Un 401 o 403 significa que el secreto no coincide, así que regeneralo y actualiza ambos lados. Sin entrega en absoluto significa que el webhook no está suscrito a eventos de solicitud de extracción.

La vista previa se construye pero muestra un listado de directorio o un 404. El directorio de salida en la página de Git Deploy no coincide con donde tu compilación realmente escribe. Las vistas previas heredan esa configuración de producción.

La compilación falla solo en la vista previa. La causa más común es una dependencia o una variable de entorno que existe en producción pero nunca se agregó al entorno de vista previa. Verifica la pestaña preview en la página de Secrets.

Una URL de vista previa deja de funcionar. Mira el estado en su fila. DESTROYED significa que la solicitud de extracción se cerró y el entorno fue reclamado, que es el comportamiento previsto.

Dónde ir a continuación

¿Aún necesitas ayuda?

Envíanos un correo electrónico a support@kapsulehost.com o abre un chat en KPanel.

Abrir KPanel
Vista previa de implementaciones para solicitudes de extracción