¿Cómo administrar los cambios de tu sitio web sin afectar la versión en producción?

Automatiza la manera en que administras el historial de versiones de tu sitio web.

JSteven

3 minute read

En entradas anteriores hemos visto como configurar nuestro entorno de desarrollo para nuestro sitio web usando un sistema de control de versiones y realizando despliegues continuos con Netlify. Hasta el momento podemos realizar cambios directamente en la rama master, publicarlos en nuestro repositorio de GitHub e inmediatamente Netlify realizará la creación del artefacto para luego publicarlo en nuestro ambiente de producción.

Hasta el momento disponemos de una app muy sencilla en Angular la cual solo tiene una vista o pantalla:

Primer Diseño

Supongamos que esta es la primera versión de nuestro sitio web, la lanzamos al mercado y medimos su impacto. A partir de esta validación de mercado detectamos que el logo no atrae el tipo de público que esperamos, también encontramos que la descripción de nuestro sitio no determina de forma clara nuestra intención de negocio y se nos ocurre reescribir un poco la información de nuestro sitio.

Tenemos entonces 2 ajustes que realizar pero queremos ir paso a paso, queremos cambiar nuestro logo y validarlo inmediatamente con un nicho pequeño de usuarios sin afectar la versión que ya está en producción. Después queremos hacer lo mismo con la descripción de nuestro sitio, primero validar y después liberarlo a todo nuestro publico. Este proceso de análisis, elaboración y prueba es conocido como Lean UX y nos ayuda a establecer un ciclo de trabajo iterativo que permite refinar el desarrollo de nuestro producto o servicio.

Es aquí en donde el Despliegue Continuo cobra mucho sentido, queremos desarrollar pequeñas funcionalidades o características teniendo un completo control del flujo de artefactos (versiones de nuestro sitio) que liberamos al mercado, buscamos validar qué funciona y qué se debe mejorar o cambiar ( A/B testing ). Para esto debemos poder en cualquier momento acceder a una versión funcional de nuestro proyecto, de tal manera que podamos evaluar de manera clara su impacto en el público objetivo. Otra característica muy importante que nos ofrece el Despliegue Continuo cuando tenemos varios desarrolladores trabajando en nuestro sitio, es poder evaluar de manera funcional cada cambio que se haga antes de que se implemente en la rama principal.

Comencemos entonces a realizar los ajustes de nuestro sitio, primero y como punto clave debemos crear una rama en la cual implementaremos el primer cambio, el logo, para esto utilizaré la consola para crear una rama en git.

$ git checkout -b logo_feature

Una vez estando en la nueva rama, procederemos a cambiar el logo y realizar el push a nuestro repositorio en GitHub.

Cambio en el logo

Si vamos ahora a la consola de Netlify y accedemos a la pestaña de Deploys, veremos lo siguiente:

Deploy con cambio en el logo

En este caso Netlify no solo está escuchando a la rama master, cualquier commit a una rama del repositorio es automáticamente desplegada pero en un contenedor aparte, es decir, con una url única diferente a la de nuestro sitio en producción.

Para ver nuestro nuevo feature en vivo, ingresamos al deploy que se acaba de realizar y damos en “Preview deploy”. Vouala, ya está nuestro logo listo para ser validado o aprobado por el líder de equipo para pasar a producción haciendo un merge con la rama master.

Repetimos el proceso para añadir una mejor descripción del proyecto, aquí la versión en vivo:

Deploy con cambio en la descripción

Con esto ya tenemos un control mas amplio de nuestro sitio web y podemos ir incorporando nuevas funcionalidades de manera progresiva teniendo siempre la opción de volver a versiones anteriores si se presenta el caso.

El camino ya está hecho para realizar validaciones de mercado efectivas, para continuar próximamente veremos como es posible incorporar A/B testing (Pruebas alpha y beta) directamente desde Netlify. No te olvides de dejar tus comentarios y contarme cómo realizas el despliegue de tus proyectos.

comments powered by Disqus