Configurar github actions con react y deploy en now

August 31, 2019 • ☕️ 3 minutos de lectura

Introducción

Github Actions facilita la automatización de todos sus flujos de trabajo de software, ahora con CI / CD, puedes probar e implementar tu código con un simple push.

En otras palabras, con github actions podemos automatizar el proceso de nuestro deploy, ahora haciendo un simple git push origin master github se encargará de realizar las pruebas si fuesen necesarias y de luego poner nuestro proyecto en producción.

Este ejemplo usaremos create-react-app y now.sh pero admite más lenguajes y frameworks como Node.js, Python, Java, PHP, Ruby, C / C ++, .NET, Android e iOS.

Esto nos ayuda a despreocuparnos de algunas cosas y poder dedicar tiempo a lo importante, en nuesto caso crear código.

Crear React App

Generamos nuestra app react con create-react-app

npx create-react-app my-app
cd my-app
npm start

Configurar now.sh

⚠️ Ahora no es necesario configurar now.json para create-react-app (🧙‍♀️brujería!!!) https://zeit.co/guides/deploying-react-with-now-cra, así que este punto no sería necesario, no obstante está bien familiarizarse con este fichero para configuracioens avanzadas de now.

Generamos now.json, el fichero de configuración de now.

{
    "version": 2,
    "name": "github-action-cra",
    "alias": "github-action-cra",
    "builds": [
      {
        "src": "package.json",
        "use": "@now/static-build",
        "config": { "distDir": "build" }
      }
    ],
    "routes": [
      {
        "src": "/static/(.*)",
        "headers": { "cache-control": "s-maxage=31536000,immutable" },
        "dest": "/static/$1"
      },
      { "src": "/favicon.ico", "dest": "/favicon.ico" },
      { "src": "/asset-manifest.json", "dest": "/asset-manifest.json" },
      { "src": "/manifest.json", "dest": "/manifest.json" },
      { "src": "/favicon.png", "dest": "/favicon.png" },
      { "src": "/precache-manifest.(.*)", "dest": "/precache-manifest.$1" },
      {
        "src": "/service-worker.js",
        "headers": { "cache-control": "s-maxage=0" },
        "dest": "/service-worker.js"
      },
      {
        "src": "/(.*)",
        "headers": { "cache-control": "s-maxage=0" },
        "dest": "/index.html"
      }
    ]
  }
  

Además debemos añadir a los scripts de package.json now-build

 "scripts": {
	 //..
    "now-build": "react-scripts build"
  },

Requisitos

Acceso a la función Acciones de GitHub: la función aun está en versión beta pública en el momento en el que escribo el post. Si no estás debes solicitar acceso en la web de Github

Instalar Now for Github:

https://zeit.co/docs/v2/advanced/now-for-github/

Generar tokens en ZEIT:

Debemos ingresar en esta url https://zeit.co/account/tokens y generar un nuevo token que debemos añadir nuestro repositorio en Settings/Secrets. Ahora pulsamos Add a new secret, en name pondremos un nombre para reconocerlo ZEIT_TOKEN y en value pegamos el token que generamos antes.

Generando workflow

Para generar nuestro entorno de trabajo debemos crear el directorio .github/workflows/ y en el crear nuestro fichero, al que nombraremos main.yml.

Si quiere saber más, puede visitar sintaxis de workflow

on: push
name: Deploy on Now
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@master	
    - name: deploy
      uses: actions/zeit-now@master
      env:
        ZEIT_TOKEN: ${{ secrets.ZEIT_TOKEN }}
    - name: alias
      uses: actions/zeit-now@master
      env:
        ZEIT_TOKEN: ${{ secrets.ZEIT_TOKEN }}
      with:
        args: alias
  

Ahora cada vez que hagamos un push se disparará el workflow y ejecutará las acciones necesarias para hacer deploy en now.sh