¿Cómo realizar Continuous Deployment de tu sitio web usando Netlify?

Netlify es una plataforma que nos permite realizar depliegues continuos de nuestro sitio web, aprende como implementarlo.

JSteven

4 minute read

Los sitios web estáticos tienen una gran relevancia hoy día, ya sea para presentar nuestros proyectos, captar la atención de un público sobre temas específicos o desarrollar una marca personal. Disponemos de muchas herramientas para realizar nuestras páginas web pero cuando de llevar un control del flujo en la evolución de nuestro sitio se trata, nos quedamos en que solo es un sitio web y que términos como Entrega Continua, DevOps y repositorios con ramas separadas no cobra mucho sentido. Pero, ¿Es esto cierto?

Los que administramos un sitio web constantemente estamos probando nuevos diseños, añadiendo nuevos elementos, implementando estrategias de marketing, entre otros. No cabe duda de que si tenemos varios colaboradores un sistema de control de versiones es indispensable, lo que no es tan común es que por cada cambio que un colaborador realice sobre nuestro sitio sería genial tener un deploy en vivo para que los demás colaboradores o usuarios selectos puedan validar antes de integrar dicha funcionalidad con nuestro sitio.

Despliegue Continuo

Imagina todo cambio que realicemos en nuestro sitio es una versión completamente funcional a la que podemos acudir en cualquier momento. ¿Quieres ver cómo estaba tu sitio hace 2 meses? ¡Lo tienes!

Para lograrlo existen diversas plataformas en el mercado, unas mas complejas que otras. Netlify es sin duda una de las mas fáciles de usar y que cuenta además con servicios extras muy interesantes.

Netlify

Para comenzar debemos tener un sitio web con el cual comenzaremos a realizar los deploys, usaré una sencilla aplicación realizada en Angular. En realidad es la aplicación por defecto que obtenemos al usar el angular-cli. Para eso ejecutamos:

$ ng new netlify-example

Esto nos creará la estructura inicial de una aplicación en Angular4+ (Es necesario tener previamente instalado NodeJS y angular-cli, para detalles de su instalación visita esta guía). Si nos movemos dentro de nuestro proyecto y lo ejecutamos en local, podemos ver que es solo una pantalla de bienvenida en http://localhost:4200:

$ cd netlify-example
$ ng serve

Netlify

Teniendo nuestra primera versión del sitio web, procedamos con el despliegue. Primero debemos crear una cuenta gratuita en Netlify. Una vez registrados y logueados en la plataforma, vamos a organizar nuestra app para que tenga vida, ya sabemos que código que no está versionado no existe.

Dentro de nuestra app iniciamos nuestro repositorio, en este caso usaré git con GitHub:

$ git init
$ git add .
$ git commit -m "primera versión del sitio"
$ git remote add origin https://github.com/stevenyepes/netlify-example.git
$ git push -u origin master

Cabe notar que previamente cree un repositorio en GitHub el cual acabo de vincular con el sitio.

Una vez hecho esto vamos a crear nuestro primer deploy, para esto dentro de Netlify damos click en el botón “New site from Git”.

Netlify new Site

Seguiremos los pasos del asistente el cual nos pedirá permisos para acceder a nuestro repositorio, ahora estableceremos la configuración para que Netlify sepa cómo realizar el deploy de nuestro sitio.

Netlify Deploy configuration

Si ejecutamos $ ng build --env=prod veremos que dentro de nuestro proyecto, en la carpeta dist está todo nuestro sitio listo para ser puesto en producción, estos son los comandos que le especificamos a Netlify para que lo haga de forma automática por nosotros cada vez que hacemos un commit a la rama principal.

Cuando damos en Deploy Site, Netlify comenzará realizar el build de nuestro sitio, esperamos un momento hasta que veamos:

Netlify Deploy alive

Esto nos indica que nuestro sitio ya está disponible en la url https://fitter-eagle-83482.netlify.com/.

Hemos realizado la configuración inicial de nuestro sitio web, si realizamos un cambio en él y hacemos un commit a la rama master, automáticamente Netlify realizará de nuevo el build sin que nosotros realicemos alguna acción adicional.

¿Qué sigue? Próximamente complementaremos la configuración de nuestro sitio añadiendo un dominio personalizado y además creando nuevas ramas que Netlify también esté observando y haciendo build sin comprometer nuestro sitio. Deja tus comentarios si quieres que escriba acerca de configuraciones avanzadas dentro de Netlify, hasta pronto.

comments powered by Disqus