Ícono del sitio Ingeniería Resuelve

React en Firebase con Github Actions

Maritza Castañeda

En este tutorial vas a aprender la configuración básica para que despliegues tu sitio de React en Firebase Console usando Github Actions como CI/CD.

¿ Qué necesitas ?

1 – Creación del proyecto en Firebase Console

Lo primero que haremos es crear un proyecto de Firebase Console con tu cuenta de Google en  https://console.firebase.google.com

En la siguiente página le puedes poner nombre a tu proyecto, si quieres también puedes cambiar el ID, ten esto en cuenta ya que lo necesitarás más adelante.

En el segundo y tercer paso depende de ti si quieres o no agregar Google Analytics, dependiendo de eso debes usar la cuenta por defecto o crear una cuenta de tu preferencia.

Después de que termines de crear el proyecto vas a ver un dashboard como este

Si vas a la pestaña de Hosting vas a ver el mensaje indicando que puedes hacer deploy de sitios y aplicaciones web, esto significa que no tienes ningún proyecto corriendo todavía. pero ya has creado el proyecto de Firebase Console.

2 – Configuración de Github

Como ya tienes tu proyecto de React en github (o debes hacerlo para seguir) puedes utilizar CRA.
Se utilizará un proyecto de ejemplo (puedes ver el repositorio aquí) de React

Ahora vas a tu repositorio en Github y entramos en la tab de Actions.

En este apartado hay muchos workflows que Github ya tiene definido para hacer deploys con ciertas herramientas, nosotros vamos a seleccionar “set up a workflow yourself” para crear nuestro workflow personalizado.

Ahora en Edit new file vamos a agregar el siguiente código

name: production-deployment
on:
 push:
   branches:
     - master
jobs:
 deploy:
   runs-on: ubuntu-latest
   strategy:
     matrix:
       node-version: [12.x]
   steps:
   - uses: actions/checkout@v2
   - name: Use Node.js ${{ matrix.node-version }}
     uses: actions/setup-node@v1
     with:
       node-version: ${{ matrix.node-version }}
   - name: Install Packages
     run: npm install
   - name: Build page
     run: npm run build
   - name: Deploy to firebase
     uses: w9jds/firebase-action@master
     with:
       args: deploy --only hosting
   env:
     FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Con name le pones el nombre con el que se identificará el workflow

On sirve para especificar cuándo se debe correr, en este caso tenemos que sera cuando se haga un push sobre master (podrías utilizar también pull-request y otras ramas)

Dentro de jobs podemos agrupar varios pasos dentro de una categoría, por ejemplo, test, build, deploy; para este tutorial solo definimos el job de deploy que nos permitirá hacer deploy de nuestro proyecto. 

Runs-on define el entorno en el cual ejecutaremos este job.

Strategy es un item interesante porque nos permite definir una matriz de diferentes configuraciones de trabajo que puedes reemplazar fácilmente en un workflow, en este caso usaremos la versión 12 de Node.

Con steps podemos definir los pasos que tendrá este job.

Actions/checkout@v2 nos permite verificar y acceder al repositorio desde un workflow, tienes más información disponible en el repo de actions.

El nombre del primer paso utiliza la variable que definimos en la matriz Use Node.js ${{ matrix.node-version }}

Setup-node nos sirve para configurar Node en este job, más info en el repo de setup-node

Con with le especificamos la versión de Node que vamos a usar.

En los dos siguientes pasos simplemente instalamos las dependencias del proyecto y hacemos un build para tener una versión de producción disponible de nuestro proyecto de React.

El paso de Deploy to firebase utiliza el repositorio que nos permite hacer deploy en firebase y con args: deploy –only hosting se especifica que solo nos interesa desplegar en el hoisting de firebase.

Después de esto creas el commit con el workflow con start commit y agregamos el commit a master.

Ahora si revisas el repositorio podrás ver que en la carpeta .github/workflows se encuentra el workflow que acabas de crear.

Y si vas al tab de actions del repositorio veras que se ya se lanzó el workflow y si esperas un momento verás que falla, esto sucede porque el workflow no tiene definido el FIREBASE_TOKEN que necesita para poder hacer deploy del repo.

3 – Configuración de Firebase en React

Ahora debemos agregar a la configuración la variable de entorno FIREBASE_TOKEN que le da permisos a nuestro workflow para hacer deploy en el proyecto de firebase.

Para hacer esto primero debes instalar firebase-tools globalmente

npm install -g firebase-tools

luego debes hacer login con tu cuenta de Google 

firebase login:ci

Cuando lo hagas en la consola deberá mostrarte el token que necesitas

Ahora debes agregar ese token en los secrets de nuestro repo para que el workflow pueda utilizarlo, vamos a nuestro repo en github, después a secrets y creas la variable FIREBASE_TOKEN con el token que te dio el login de firebase.

Lo último que debemos hacer es agregar las configuraciones de firebase a nuestro proyecto de React, para esto debes ejecutar el siguiente comando en la raíz de tu proyecto.

firebase init

Te saldrán una serie de opciones de todos los servicios de firebase, tu debes escoger Hoisting presionando espacio y luego enter.

luego debes seleccionar la opción para usar un proyecto existente de firebase

luego seleccionas tu proyecto de firebase

y confirmas las siguientes opciones de usar el directorio public y sobrescribir el index.html

Ahora el archivo firebase.json que genero firebase debe quedar así para que funcione con React


{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Ahora debes hacer un commit de los cambios y subirlo al repositorio, recuerda que debes hacer un pull de los cambios que hiciste en el repositorio y no están en tu local, es decir, el yml del workflow.

En este punto verás que se vuelve a lanzar el workflow de deploy en github actions

también puedes seleccionar un workflow para ver el detallado de los steps

4 – Deployment

Si seguiste correctamente los pasos el workflow debería concluir exitosamente.

Ahora vas al proyecto en la consola de firebase y en la tab de Hoisting verás una pantalla como la siguiente

Esto quiere decir que Github Actions ha hecho deploy de tu proyecto de React !

Firebase te asigna dominios por defecto dependiendo del nombre de tu proyecto, igualmente puedes agregar tus dominios personalizados muy fácilmente agregando los registros a los DNS que te muestra en la opción de agregar dominio personalizado.

También es genial que Firebase te agrega un certificado SSL emitido a nombre de Google lo que hará que tu sitio sea mucho más seguro.

Ya tienes tu sitio corriendo en firebase y siempre que hagas un push a master se van a desplegar los nuevos cambios !!

Para terminar

Referencias

Salir de la versión móvil