Como desplegar proyectos web en Firebase con GitHub Actions

En está guía aprenderás paso a paso como desplegar tus proyectos React o cualquier otro framework JavaScript en Firebase usando GitHub Actions para hacer posible la integración continua y despliegue continuo (CI/CD).

Crear un proyecto en firebase

Una vez creada nuestra cuenta de firebase creamos un nuevo proyecto el cual vincularemos con nuestro proyecto en GitHub.

Para este ejemplo no habilitaremos las herramientas de analytics ya que no las ocuparemos.

Después de terminar el aprovisionamiento de nuestro proyecto iremos al servicio de hosting y damos clic en comenzar.

Instalar Firebase CLI

Una vez dentro del asistente del servicio de hosting nos pide realizar una serie de pasos, por lo cual procederemos a instalar la herramienta de firebase-tools que nos ayudara en la creación de nuestros archivos de configuración.

Dentro de nuestra terminal , dentro de nuestro proyecto instalamos la librería con el comando que copiamos.

npm install -g firebase-tools

Inicializar un nuevo proyecto con firebase-tools

Ahora procedemos a abrir la terminal y crear un nuevo proyecto estando dentro del folder de nuestro proyecto, nos pedirá acceder a nuestra cuenta de Google en el navegador para autenticarnos.

firebase login

Inicia el proyecto

Ejecuta el siguiente comando en el directorio raíz de tu app:

firebase init

Se abrirá un asistente en donde no pregunta si deseamos continuar a lo cual marcamos Y.

Ahora seleccionamos la primera opción de Hosting con la barra espaciadora y presionamos enter para continuar.

Ahora nos pregunta cual es el directorio que quieres usar como publico, le indicamos que sea el directorio dist , configurar como single-page app Y , configurar la construcción y despliegue con GitHub le decimos n, sobrescribir el archivo dist/index.html si existe le indicamos n.

Al finalizar nos crea dos archivos llamados firebase.json y .firebaserc.

Agregar el project id de nuestro proyecto

Dentro del archivo .firebaserc tenemos que agregar el id del proyecto de firebase que estamos vinculando , para ello nos dirijimos al proyecto y nos vamos a la configuración del proyecto y copiamos el Id.

Agregamos la configuración con el id del proyecto como en el siguiente ejemplo:

{
  "projects": {
    "default": "todo-list-react-typescri-60173"
  }
}

Subir los cambios “[add] firebase hosting”

Ahora procedemos a subir los cambios realizados a nuestro repositorio.

git add .

git commit -m "[add] firebase hosting"

Crear el workflow de deploy con el plugin de GitHub actions

Ahora dentro de nuestro proyecto creamos un nuevo archivo .github/workflows/deploy-to-firebase.yml en el cual vamos a agregar las instrucciones de GitHub Actions.

Nos dirigimos a la página del plugin que vamos a usar https://github.com/marketplace/actions/github-action-for-firebase.

Copiamos la configuración de autenticación con Firebase y despliegue a Firebase Hosting, lo agregamos al archivo yml que acabamos de crear.

name: Build and Deploy
on: [push]

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@main
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: dist
          path: dist
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@main
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: dist
          path: dist
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Aquí debemos revisar que branch es la principal en nuestro proyecto, en mi caso tengo la branch main como principal, también le puedes indicar que se ejecute cuando se hagan cambios en una branch o cuando detecte cualquier push [push] al repositorio, adicionalmente cambiamos el comando Build por el nuestro npm run build.

Obtener el firebase token con “firebase login:ci”

Necesitamos obtener el FIREBASE_TOKEN para agregarlo a nuestro repositorio y tenga los permisos para conectarse a Firebase desde GitHub.

En la terminal ejecutar:

firebase login:ci 

Se abrirá el navegador, elegimos nuestra cuenta y le permitimos acceder a los permisos requeridos.

Nos indicara que el login fue exitoso y podemos cerrar el navegador, regresamos a la terminal y hemos obtenido nuestro token.

Crear el secret FIREBASE_TOKEN en nuestro repositorio de GitHub

Para poder usar el token debemos crear una variable secret llamada FIREBASE_TOKEN en la configuración de nuestro repositorio de GitHub (Settings), en la sección Secrets seleccionamos Actions, presionamos el botón New repository secret y ahi creamos la variable con el token que obtuvimos en el paso anterior.

Subir los cambios “[add] github actions config”

Procedemos a subir los cambios realizados a nuestro repositorio.

git add .

git commit -m "[add] github actions config"

Una vez enviado los cambios en nuestro repositorio dentro de la sección action podemos ver que se ejecuta el Build y el Deploy de nuestro proyecto.

Conclusión

Hemos aprendido como implementar CI / CD dentro de nuestro proyecto, aprendimos a usar GitHub actions y podemos ver los cambios en cuestión de minutos. Es sorprendente como las automatización nos ahorra mucho tiempo y como las herramientas de despliegue han ido evolucionando muy rápido, además que es importante conocerlas para mantenernos actualizados en la industria.

Sin más que decir, gracias por llegar hasta aquí nos leemos en la próxima hacker 🖖.