Índice de contenidos

1. Introducción.
2. Objetivo.
3. Entorno
4. Creando el proyecto web.
5. Despliegue continuo.
6. Otras configuraciones.
7. Conclusiones.

Introducción

Netlify es una plataforma que nace para automatizar proyectos webs estáticos. Aúna las tareas de integración continua y despliegue de infraestructura web en un solo flujo de ejecución.

El desarrollo web se caracteriza por, entre otras cosas, el cambio continuo en los diseños. Constantemente se añaden nuevos elementos o se modifican los ya añadidos. Es muy importante poder ver en todo momento qué aspecto tiene o ha tenido nuestra web.

Otra de las claves es la gestión de la infraestructura. No sólo vale centrarse en el diseño de la web, si no que también esta debe prepararse para ser ejecutada en un entorno de producción determinado. Esta tarea aparentemente sencilla, a menudo se convierte en un proceso tedioso: debemos contratar un hosting donde alojar la web, registrar un nombre de dominio y finalmente subir los archivos, normalmente a través de FTP.

Con Netlify el proceso de despliegue se convierte en algo muy sencillo: únicamente hay que enlazar la herramienta a un repositorio Git donde se encuentren los archivos que componen la página web y crear un deploy que provocará que la aplicación se compile y se despliegue automáticamente en una determinada URL.

Su potencia viene dada por su capacidad de despliegue continuo. Todos los cambios que se hayan realizado en la aplicación web constituyen versiones desplegadas de la misma, a las que se puede tener acceso en cualquier momento. Si la versión actual de la web no nos convence, podemos dejarla en un estado en el que se encontraba anteriormente.

Objetivo

El objetivo de este tutorial es presentar la herramienta Netlify, mostrando de manera práctica cómo ayuda a aplicar el concepto de despliegue continuo en nuestros proyectos web y exponiendo sus funcionalidades en menor o mayor profundidad.

Entorno

Este tutorial está escrito usando el siguiente entorno:

• Hardware: MacBook Pro 15’ (2,5 GHz Intel Core i7, 16GB DDR3)
• Sistema operativo: macOS Catalina 10.15
• IDE: Visual Studio Code
• Angular 10.1.6
• Angular CLI 10.1.7

Creando el proyecto web

Lo primero de todo es crear el código de nuestra aplicación web. Para ello he creado un proyecto Angular por defecto. Introducimos desde la terminal: 

ng new netlify-demo

El proyecto por defecto únicamente se va a componer de un archivo html que ejecuta una serie de scripts de JavaScript. Tras esto, hay que subir el código a un repositorio Git. En mi caso he escogido GitHub.

Despliegue continuo

Tras tener listo el código en el repositorio correspondiente, creamos una cuenta gratuita en Netlify para poder tener acceso a sus herramientas y hacer un despliegue continuo de nuestro proyecto. Existen distintos planes de pago con distintas características que se pueden consultar aquí. En nuestro caso escogemos el gratuito, ya que se adapta de manera holgada al objetivo del tutorial.

Siguiendo con el desarrollo, crear la cuenta es tan fácil como registrarnos con nuestra cuenta de GitHub, GitLab, Bitbucket o con nuestro correo. Debemos dar permisos a Netlify para acceder a nuestra cuenta GitHub e introducir el nombre de usuario y el tipo de proyecto que se va a desplegar: un portfolio, una tienda virtual, un blog…

A continuación, ya podemos acceder al dashboard.

Ahora hay que indicar a Netlify el contenido de nuestro proyecto web. Para ello tenemos dos opciones: indicar el repositorio de GitHub donde tenemos el código de nuestro proyecto, o simplemente arrastrar la carpeta que representa al proyecto. En nuestro caso, vamos a escoger el repositorio que contiene el proyecto Angular que hemos creado al principio.

Solamente queda configurar los parámetros del deploy. Hay que indicar la rama del proyecto que se va a desplegar y el comando que va a hacer que se compile la aplicación. En nuestro caso la orden <<ng build>> es la orden común en Angular para compilar el proyecto. El directorio dist el que contiene por defecto todos los archivos que el navegador va a necesitar cuando el proyecto ya esté desplegado en producción. Dependiendo del framework será una orden u otra. También existe la opción de definir variables de entorno ya sea mediante el build command o mediante un archivo de configuración donde se gestionen todas.

Una vez esté todo el deploy configurado y hayamos pulsado la opción de <<Deploy site>>, si volvemos al dashboard nos encontraremos que el proyecto está en proceso de desplegarse en el dominio provisto por Netlify.

Y a continuación, en muy poco tiempo, ya tenemos nuestro proyecto web desplegado correctamente.

Si pulsamos en el enlace, podemos ver el contenido de nuestra web.

Tras esto, los siguientes pasos que sugiere Netlify son configurar nuestro propio dominio web y securizar el mismo con HTTPS. Ahondaremos sobre estas configuraciones más adelante.

Únicamente vamos a cambiar el nombre de nuestra web para que sea más legible. Pulsamos <<Side Settings> en el menú superior del dashboard y accedemos a la sección de <<Site Details>>, donde cambiamos el nombre de la web a “mynetdemo”.

Ahora vamos a comprobar cómo funciona el control de versiones. Cambiamos completamente el único archivo html que tiene nuestra aplicación, index.html, borrando el contenido anterior y sobreescribiéndolo por lo siguiente:

<!doctype html>
<html>
<head>
  <title>NetlifyDemo</title>
</head>
<body>
  <p style="color: red;">Esta es nuestra demo de Netlify </p>
  <p><strong>Puedes ver más tutoriales de tecnología en</strong> <a href=
         "https://www.adictosaltrabajo.com/">Adictos Al Trabajo</a></p>
</body>
</html>

Desde nuestro IDE hacemos un commit y push de los cambios para subirlos a GitHub. Netlify detectará que se han introducido nuevos cambios en el proyecto y va a hacer automáticamente un deploy del mismo. Si vamos al dashboard podemos observar el deploy de la versión anterior de la web, ya publicado, y el de ahora, que está “building”.

Una vez que el deploy esté completo, vamos a ver cómo ha quedado nuestra web con los nuevos cambios. La interfaz ha cambiado por completo.

Este es el estado actual de nuestro proyecto web, pero podemos acceder a la versión anterior seleccionando el deploy concreto e incluso hacer un rollback y eliminar los nuevos cambios.

Otras configuraciones

Tras mostrar de manera práctica cómo hacer despliegue continuo de nuestro proyecto web mediante Netlify, vamos a analizar brevemente una serie de configuraciones que ofrece:

• Dominio personalizado: cuando hacemos el primer deploy de nuestra página web, Netlify le asigna automáticamente un dominio con la siguiente estructura: [nombre-de-la-pagina].netlify.com. Se puede cambiar el nombre de la página, así como crear un dominio personalizado. De esa manera, el nombre de la aplicación no irá “ligado” a Netlify, si no que seguirá la siguiente estructura: www.nuestrodominio.com. Netlify da la opción de introducir un dominio que hayamos obtenido en otro sitio previamente o de comprarlo a través de ellos.
• HTTPS: todos los sitios web alojados en Netlify estarán bajo conexión HTTPS, ya sea con plan gratuito o de pago.
• Funciones Lambda: Netlify permite implementar funciones serverless Lambda sin ni siquiera tener que crearnos una cuenta con Amazon Web Services. La administración de dichas funciones se hace directamente desde la herramienta. Pueden escribirse en JavaScript o Go.
• Split Testing: esta función está en BETA pero es muy interesante. Da la opción de redireccionar un porcentaje de nuestro tráfico web a una determinada rama Git de nuestro proyecto con el objetivo de hacer test.

Conclusiones

Netlify es algo más que un hosting gratuito para alojar webs estáticas. Constituye una potente herramienta que permite completar el ciclo de despliegue continuo en nuestros proyectos web de manera rápida y segura.

Hoy en día existen multitud de herramientas para administrar páginas webs, únicamente tenemos que saber escoger qué es lo que mejor se adapta a nuestro proyecto. Es cierto que Netlify “solo” da portabilidad a páginas webs estáticas, pero con las herramientas que ofrece puede convertirse en una plataforma muy atractiva para los desarrolladores.

Creo que Netlify puede adaptarse muy bien a diferentes tipos de proyectos dependiendo del proyecto que se quiera desarrollar: puede ser muy interesante para estudiantes que quieran iniciarse en el frontend y no sepan dónde alojar su página web, ni qué es eso de <<despliegue continuo>>. Espero que este tutorial sirva como introducción a esta herramienta y que sirva para despertar curiosidad y animar a los desarrolladores a probarla.

¡Hasta pronto! 🙂