6

Deployments únicos por git branch con Netlify y Travis

Eduardo
eperedo
52726

En este tutorial voy a mostrar como hacer deployment desde travis a netlify. Aunque estoy usando una aplicación de react bajo create-react-app el tutorial no está ligado a esta tecnología, funciona bajo cualquier framework/tooling que genere archivos estáticos. Si no conoces Netlify, es una plataforma que te permite realizar despliegues de aplicaciones estáticas de una manera rápida y muy optimizada.

Travis tiene por defecto una gran variedad de providers para deployment, pero al revisar su documentación no vi a netlify como uno de ellos. Bueno en realidad si existe, pero bajo una versión beta.

Mensaje que indica a netlify como provider de travis, pero en versión beta

Debido a esto voy a compartir como puedes hacer deployment de tu aplicación web a netlify usando travis.

<h3>Creando un site en netlify</h3>

Netlify permite enlazar tu repositorio de github a un site de netlify, pero eso activa una serie de automatizaciones entre netlify y github que para ejemplos prácticos de este tutorial no son necesarias así que crearé un site web de la manera manual.

Para crear un site en netlify necesitamos de una carpeta con un archivo html dentro. Para esto usaré el siguiente html:

<h1>Hola Netlify</h1>

Listo, el contenido no importa mucho ya que luego será reemplazado con lo que genere nuestro proceso de CI en travis.
Para crear el site vamos a la página principal del dashboard de netlify y arrastramos la carpeta con el html a la sección que se encuentra en la parte posterior de esa pantalla.

Sección donde se puede crear un site en netlify

Una vez creado el site nos aparecerá una pantalla como esta con información de nuestro site como la url, un nombre autogenerado y muchos datos más.

Informacion de nuevo site en netlify

Necesitamos 2 cosas para hacer deployment desde travis a netlify:

  • El site ID
  • Un personal access token

El site ID lo podemos sacar de la sección Settings, se encuentra como API ID.

Site ID de site de netlify

Para el access token iremos a la configuración de usuario https://app.netlify.com/user/settings y luego click en Applications y en la sección Personal Access Tokens click en el botón New Access Token

Sección que permite crear un access token

Luego le asignamos un nombre al token que describa su uso, para este caso le pondré “travis” y luego click en Generate Token.

Token generado por netlify

⚠️ Luego nos mostrará el token, debemos asegurarnos de copiarlo ya que no volverá a aparecer nunca más.

Token generado por netlify

No se preocupen por mi seguridad, este token así como el site ID ya no existen 😄

<h3>Configurando Travis</h3>

Ahora vamos a configurar travis para que pueda hacer el deployment a netlify. Como ya vimos en el curso, travis nos permite guardar información sensible como variables de entorno. Vamos a aprovechar esto para crear dos variables de entorno que le servirán a travis al momento de lanzar un deployment a netlify.

Crear variables de entorno en travis

En la imagen pueden ver que he creado 2 variables de entorno llamadas: NETLIFY_AUTH_TOKEN y NETLIFY_SITE_ID

Los nombres de las variables no me los inventé, puse esos ya que son los que usa el cli de netlify por defecto al momento de generar un deploy.

Ahora vamos a crear el archivo .travis.yml

language: node_js

cache:  directories:    - node_modules
    - ~/.npm

node_js:  -"12"git:  depth:3script:  - npm install netlify-cli -g
  - npm run build
  - netlify deploy --prod --dir=build

Si vieron el curso podrán entender muy rápido la mayoría de la configuración, vamos a lo importante que es la sección de script.

Lo primero que hago es instalar netlify-cli.

npm install netlify-cli -g

Luego ejecuto el script build que es el que define create-react-app para generar los archivos estáticos de mi aplicación en una carpeta llamada build.

npm run build

Y por último la opción deploy de netlify-cli para generar un deploy a nuestro site de netlify. Acá es dónde por defecto el cli buscará las variables de entorno NETLIFY_AUTH_TOKEN y NETLIFY_SITE_ID para poder tener acceso a mi cuenta de netlify y saber a qué sitio debe hacer deploy.

Por último vemos 2 flags –prod y –dir=build, el primero sirve para indicarle que cuando se haga el deploy los cambios se reflejen en nuestra url principal de netlify y el otro parametro me permite decirle al cli dónde se encuentra la carpeta con mi aplicación, en mi caso create-react-app genera la carpeta con el nombre de build.

Ahora haré un commit y push para que travis pueda generar un build usando mi configuración actual.

git commit -m "added travis config"
git push origin master

Si todo fue correctamente veremos al final del log de travis algo similar a esto:

Log de travis mostrando la url de netlify

En el log veremos un LIVE URL que podemos abrir en nuestro navegador y visualizar el estado actual de nuestra aplicación.

aplicación por defecto de create-react-app

Y si vamos a nuestro dashboard de netlify en la sección deploys podremos ver también un registro de nuestro deploy.

información de deploy en netlify
<h3>Mensajes de deploy en netlify</h3>

Si vieron la última imagen podrán ver que en netlify indica No deploy message, eso quiere decir que podemos enviar un mensaje para el deploy via su cli. Muy util cuando tengamos muchos deploys a nuestro site y querramos saber qué motivó cada uno de ellos.

Así como ya tenemos 2 flags prod y dir agregaremos uno más llamado message dónde podemos indicar algún mensaje.

script:  - npm install netlify-cli -g
  - npm run build
  - netlify deploy --prod --dir=build --message="Deploy desde travis"

Simple y ahora tenemos un mensaje para saber desde dónde se generó el deploy, pero ¿No sería más util usar el commit message de git en lugar de un mensaje repetido? Por supuesto para esto vamos a usar una de las muchas variables de entorno que travis configura para nosotros de manera predeterminada. En este caso la variable es TRAVIS_COMMIT_MESSAGE. Nuestra configuración quedaría de la siguiente manera:

script:  - npm install netlify-cli -g
  - npm run build
  - netlify deploy --prod --dir=build --message="$TRAVIS_COMMIT_MESSAGE"

Hacemos el commit y push para que travis genere un nuevo deploy con estos cambios

git commit -m "update deploy message"
git push origin master

Ahora si vemos el deploy en netlify observaremos el mismo mensaje que usamos al hacer nuestro commit desde git

Deployment en netlify usando el mensaje de git
<h3>Deployments únicos por rama</h3>

Ya lo habrán notado y es que el flag de –prod me actualiza la url principal de nuestro sitio, pero ¿Qué pasa si alguien hace un pull request a mi repositorio desde una rama cambios-1? Pues que mi url principal de mi site se actualizaría con cualquier cambio que haya en esa rama, para nada bueno. ¿No sería genial que netlify pueda generar una url en específico por cada rama de mi repositorio?

Pues una de las miles de ventajas de usar netlify es precisamente eso. Para el ejemplo actual asumiremos que la rama master es la que generará cambios a nuestra url principal y cualquier otra tendrá que tener una url especial incluyendo solo sus cambios.

Para lograr esto vamos a necesitar una variable dinámica dentro de nuestra configuración, por defecto va a estar vacía, pero antes de hacer los procesos de instalación y build se deberá evaluar la rama desde la cual se hizo el push, en caso la rama sea master esa variable tomará el valor de –prod. Al ejecutar el deploy desde el cli ya no pasaremos –prod como lo veníamos haciendo, sino la variable creada. Así cuando estemos en la rama master el valor será –prod, pero en cualquier otro caso estará vacía.

Primero generamos la variable dentro de nuestra configuración con el valor vacío

env:  global:    - PRODNETLIFY=""

Ahora vamos a hacer la verificación de la rama y asignarle el valor –prod según el nombre de la rama, usaré la sección de before_install:

before_install:  - if [[ $TRAVIS_BRANCH == "master" ]]; then
    PRODNETLIFY="--prod";
    fi

En este caso estoy usando otra variable de entorno ya pre definida por travis llamada TRAVIS_BRANCH que viene siempre con el valor de la rama que lanzó el build.

Por último actualizamos nuestro sección de script, especificamente en la parte del cli de netlify

script:  - npm install netlify-cli -g
  - npm run build
  - netlify deploy $PRODNETLIFY --dir=build --message="$TRAVIS_COMMIT_MESSAGE"

Noten que luego del comando deploy estoy pasando la variable PRODNETLIFY que tendrá su valor de acuerdo a la rama.

Para verificar que estos cambios funcionan correctamente voy a crear una rama llamada cambios-1 y hacer un pequeño cambio a mi componente principal de React.

// App.jsfunctionApp() {
  return (
    <divclassName="App"><headerclassName="App-header"><imgsrc={logo}className="App-logo"alt="logo" /><p>Esta es la rama cambios-1</p></header></div>
  );
}

Ahora el commit y push

git checkout -b cambios-1
git commit -m "Generar deploy solo para rama cambios-1"

Luego de que travis hace su magia veremos en los logs el LIVE DRAFT URL.

Logs de travis mostrando la draft url

Si abrimos la url veremos solo los cambios de nuestra rama

Aplicación con los cambios de rama 1

Mientras que nuestra url principal no se vio afectadada para nada.

<h3>Conclusión</h3>
  • Aprendimos como usar el cli de netlify para generar deployments
  • También vimos como definir variables y modificarlas según nuestra rama de git
  • Generamos deployments según una rama de git que nos da la ventaja de poder probar cualquier cambio antes de enviarlo a nuestra versión de producción.

Tengo que aclarar que netlify al igual que otros servicios similares tiene una integración directa con github que te permite generar el mismo resultado que este tutorial, pero en un par de clicks. El propósito de este post fue saber como generar este proceso para tener el control total de nuestro build en travis.
Sobre la definición de variables de entorno de manera dinámica quizá lo más “óptimo” sería el uso de conditional stages, pero no los usé porque no se tocaron en el curso y no quise hacer más largo el post.

¡Saludos! 🚀

Escribe tu comentario
+ 2
0
12314Puntos

Buen post, otra manera que tambien veo es hacer diferentes stages para production, development, etc y condicionar los stages algo asi:

.travis.yml

stages:  - test
  - build
  - name: deploy-dev
    if: branch = development
  - name: deploy-pro
    if: branch = main

jobs:  include:    - script: npm run test

    - stage: build
      script: npm run build

    - stage: deploy-dev
      before_script: npm install netlify-cli -g
      script: netlify deploy --dir=build --message="$TRAVIS_COMMIT_MESSAGE"    - stage: deploy-pro
      before_script: npm install netlify-cli -g
      script:        - npm run commandForProd # example        - netlify deploy --prod --dir=build --message="$TRAVIS_COMMIT_MESSAGE"