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.
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.
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.
Necesitamos 2 cosas para hacer deployment desde travis a netlify:
El site ID lo podemos sacar de la sección Settings, se encuentra como API ID.
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
Luego le asignamos un nombre al token que describa su uso, para este caso le pondré “travis” y luego click en Generate Token.
⚠️ Luego nos mostrará el token, debemos asegurarnos de copiarlo ya que no volverá a aparecer nunca más.
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.
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:
En el log veremos un LIVE URL que podemos abrir en nuestro navegador y visualizar el estado actual de nuestra aplicación.
Y si vamos a nuestro dashboard de netlify en la sección deploys podremos ver también un registro de nuestro deploy.
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
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.
Si abrimos la url veremos solo los cambios de nuestra rama
Mientras que nuestra url principal no se vio afectadada para nada.
<h3>Conclusión</h3>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! 🚀
Buen post, otra manera que tambien veo es hacer diferentes stages para
production,development, etc y condicionar losstagesalgo asi:.travis.ymlstages: - 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"