En el anterior artículo aprendíamos a compartir en Internet una aplicación desde nuestro propio ordenador, utilizando nuestra propia máquina como servidor. Sin embargo, tal y como advertimos en dicho artículo, esta debía ser una solución temporal, y no debe utilizarse en entornos de producción a menos que entiendas muy bien lo que estás haciendo. Esto es debido a que los despliegues en producción tienen mucha magia por debajo que alguien recién iniciado en DevOps puede no intuir: balanceadores de carga, virtualización, CDN, brechas de seguridad, etc. Además, debemos encargarnos personalmente de asegurar la disponibilidad del servicio, lo cual es verdaderamente tedioso.

Vamos, en conclusión, si haces una aplicación y quieres compartirla con el mundo y dejarla desplegada de forma indefinida o por un largo periodo de tiempo, no te merece la pena tantas molestias. Es por ello que gracias a la nube ahora existen plataformas que hacen todo este trabajo por nosotros, y muchas de ellas de forma gratuita.

Servicio estático vs servicio dinámico

Esta diferenciación es muy importante. No es lo mismo compartir una sencilla página web que compartir una API.

Una página web al final son una serie de archivos estáticos: HTML, JavaScript, CSS, imágenes, vídeos, ficheros de configuración... Es decir, son archivos que el navegador sólo tiene que leer.

En cambio, un servicio requiere de su ejecución constante. Si creamos, por ejemplo, una API, esta estará en constante estado de alerta para escuchar peticiones a las que responder. Es decir, que para desplegar esta API necesitamos un host que esté encendido y gastando recursos de CPU y memoria constantemente, no es algo que ejecutemos una vez y ya está: este proceso nunca terminará de forma natural.

Como ahora veremos, existen muchas plataformas que nos permiten desplegar nuestros sitios estáticos y que cuentan con planes gratuitos. Algunas de ellas son Netlify, GitHub Pages, Vercel o DigitalOcean.

También existen plataformas que ofrecen planes gratuitos para desplegar servicios, pero son algo más escasos debido a lo caro que le resulta a estas empresas mantener los servidores. Una de las más populares era Heroku, pero hace unos meses canceló su plan gratuito y ahora sólo ofrece planes de pago. Sin embargo, surgieron alternativas para llenar el vacío de poder. Algunas de ellas son Render o Railway.

Sin embargo, existe una importante excepción, y es que hay algunas plataformas que ofrecen planes gratuitos para desplegar aplicaciones siempre y cuando sean estén hechas con JavaScript o siguiendo la JamStack, como aquellas creadas con NextJS. Algunas de estas son Deno o Vercel.

En este artículo nos centraremos en desplegar sitios web estáticos con Netlify, y también enseñaremos cómo asociarles un dominio personalizado con Google Domains.

Cómo desplegar con Netlify

Lo primero que tenemos que hacer es ir a netlify.com, registrarnos e iniciar sesión. Afortunadamente, podemos utilizar nuestra cuenta de GitHub, por lo que el proceso es sencillo. Automáticamente accederemos a nuestro panel de control.

Desde la barra de navegación navegamos a Sites y pinchamos en el botón Add a new site, lo que nos abrirá un desplegable con tres opciones.

• Import an existing project. Nos permite seleccionar un proyecto de nuestra plataforma en la nube de control de versiones favorita. Es la opción más atractiva.

• Start from a template. Para crear un nuevo proyecto a partir de una plantilla disponible.

• Deploy manually. Nos permite subir un proyecto existente en nuestro ordenador.

La opción que utilizaremos es la primera, Import an existing project, ya que podremos aprovechar, entre muchas otras características, el control de versiones y así aplicar las herramientas de Netlify para Continuous Delivery.

Para ello debemos tener nuestro proyecto alojado en alguna de estas plataformas, de las cuales te recomiendo GitHub.

Tras seleccionar el repositorio que aloja el proyecto que queremos desplegar debemos configurar el despliegue, pero no temas, es muy sencillo y rápido.

1. Owner. Seleccionamos el propietario del despliegue. Por defecto será el propietario del repositorio.

2. Branch to deploy. Aquí seleccionaremos la rama con la que queramos desplegar. Si queremos desplegar en producción, podemos utilizar la rama main o master para guardar únicamente la versión que queremos tener el producción. Así, cada vez que apliquemos cambios a esa rama estos automáticamente serán aplicados en producción.
   Sin embargo, imaginemos que queremos tener también desplegado un entorno de preproducción. Para ello tendríamos que crear otro despliegue con el mismo repositorio pero seleccionamos la rama donde estarán los cambios para ese entorno. Y así con todos los entornos que queramos tener desplegados.

3. Base directory. Aquí especificaremos la ruta raíz de nuestro proyecto. Suele ser la propia raíz del repositorio, y en ese caso la dejaríamos vacía.

4. Build command. Es el comando que prepara nuestros ficheros para la subida. Suele ser npm run build, pero puede variar según la configuración del proyecto. Si no necesitas ese comando puedes dejar el campo en blanco.

5. Publish directory. Aquí tenemos que escribir la ruta desde la raíz de nuestro proyecto al directorio donde se encuentren nuestros archivos preparados para el despliegue.

   Si estamos publicando una página web sin ningún tipo de framework, esta sería la propia raíz del proyecto, y podríamos dejarla en blanco.

   Sin embargo, lo más normal es que estemos trabajando en algún proyecto NodeJS configurado con algún empaquetador como Webpack o Vite. Así es como funcionan los proyectos de frameworks como React o Angular. Estos ficheros (como TypeScript o Sass) no pueden ser entendidos por el navegador, por lo que necesitamos un empaquetador que los procese y los transforme a ficheros que el navegador sí entienda (como JavaScript y CSS, siguiendo el ejemplo previo). Para ello solemos utilizar un comando como npm run build (puede variar según el framework o empaquetador). Tras ejecutar el comando se nos generará en un nuevo directorio los archivos ya preparados. Este nuevo directorio se llamará de manera distinta según el framework (aquí puedes consultar algunos de los más comunes). Este será el subdirectorio que debemos indicar.

Si hacemos click en el botón Show Advanced, podremos especificar variables de entorno (muy útiles para configurar los distintos entornos que tengamos) y el directorio para las funciones serverless, las cuales no cubriremos en este artículo.

Una vez terminemos de configurar nuestro despliegue, hacemos click en Deploy Site para aplicarlo. Esto automáticamente leerá el repositorio y la rama que le hemos especificado y procederá con el despliegue. ¡En pocos segundos ya tendremos nuestro sitio web desplegado! Podemos verlo si volvemos a Sites desde el panel de control.

Como añadirle un dominio personalizado

Personalizar el subdominio (gratis)

Habrás visto que el dominio que te ha dado Netlify es bastante peculiar. Esto es porque tu sitio web está usando el propio dominio de Netlify pero con un subdominio generado aleatoriamente.

Para cambiarlo abrimos el panel de control de nuestro sitio web haciendo click en él y desde la barra de navegación nos vamos a Site settings. Ahí podremos consultar y configurar nuestro despliegue, pero ahora nos interesa la opción de Domain Management (disponible en el menú lateral).

Allí tendremos todos los dominios y subdominios asociados a este despliegue (sí, podemos tener varios). Para cambiar el subdominio genérico que te ha dado Netlify debes buscarlo en el listado de dominios, abrir el desplegable de Options y pulsar en Edit site name.

Aplicar dominio personalizado

Sin embargo, la opción previa sigue forzándonos a utilizar el dominio de Netlify, lo cual puede no ser lo que andamos buscando. Para aplicar un dominio personalizado primero debemos tener uno comprado. En este artículo se explicará cómo aplicar uno previamente comprado en Google Domains, pero podéis utilizar cualquier otro registrador de dominios.

Para ello en el panel de control de Netlify de nuestra página volvemos a Custom Domains y pulsamos en Add custom domain. Ahí introducimos nuestro dominio personalizado y lo verificamos. Sin embargo, nos dirá que ese dominio no está disponible y que ya ha sido registrado. Lo añadimos igualmente pulsando en Add Domain.

Esto nos carga dos dominios más en el listado: con el subdominio www y sin dicho subdominio. Sin embargo para poder utilizarlos debemos configurar el DNS (Domain Name System) asociado a ellos. Para ello buscamos en el listado el dominio personalizado (sin el subdominio 'www') y pulsamos en Check DNS configuration.

Como ahora explicaremos vamos a utilizar el DNS de Netlify y no el de Google Domains, por lo que en el modal que se nos abre pulsamos en Setup Netlify DNS. Ahora tenemos que verificar el dominio de nuevo, le damos a añadir dominio a Netlify y nos mostrará un listado de servidores de nombres de dominios.

Ahora debemos irnos a Google Domains. Allí abrimos la configuración de nuestro dominio y en el menú lateral seleccionamos DNS. Vemos que nos abre dos pestañas, de las cuales está activa la primera "Servidores de nombres predeterminados". Esta opción es la que haría que Google Domains gestionase el DNS del dominio, pero pero en este ejemplo utilizaremos el DNS de Netlify. ¿Por qué? Por que así tendremos las configuraciones del dominio y del despliegue en un mismo sitio y nos facilita las cosas, además de que aprovecharemos que el propio Netlify se encargará de generar y aplicar un certificado SSL para poder utilizar el protocolo HTTPS en nuestro dominio. Para utilizar el DNS de Netlify nos vamos a la segunda pestaña "Servidores de nombres personalizados" y aplicamos esa configuración.

Ahora, en "Servidores de nombres" pulsamos en "Gestionar servidores de nombres", añadimos los servidores de nombres de dominio que nos proporcionó Netlify previamente y guardamos.

Ahora esperaremos unos pocos minutos para que el cambio de DNS se aplique. Los cambios en el DNS pueden tomar hasta 24h en completarse, tenlo en cuenta.

Certificado SSL

Hay algunos dominios que requieren obligatoriamente de certificado SSL (los .dev, por ejemplo). Con la configuración de DNS que hemos aplicado Netlify hará todo este trabajo por nosotros. Para ello nos volvemos al panel de control de nuestro sitio web en Netlify, vamos a la configuración del dominio y abajo del todo veremos la opción para solicitarlo. Este proceso puede tardar desde unos minutos hasta 24h, por lo que se paciente.

Conclusiones

Con este artículo has aprendido que publicar un sitio web de manera profesional es muy sencillo (y gratis 😉). Prácticamente todas las plataformas de hosting son muy similares a Netlify, y prácticamente todos los registradores de dominios son muy parecidos a Google Domains, por lo que este artículo debería poder ayudarte con otras combinaciones de plataformas.

Espero que este artículo te haya sido de ayuda. Si es así te animo a que lo compartas y a que dejes tu feedback como reacción o comentario.

¡Nos vemos leemos la semana que viene!