Como desplegar a firebase con github actions

Creación de archivos

Bueno, voy a asumir que ya tendrás una instalación previa a firebase con todo su despliegue y configuraciones a tal punto que mediante terminal ya logras hacer firebase deploy y tu sitio web se despliega correctamente.

con eso dicho.

en tu proyecto debes crear la siguiente carpeta .github/workflows/

mkdir -p .github/workflows

dentro del directorio recién creado debes crear el archivo deploy.yml (usa el comando cd y tab para navegar)

touch deploy.yml

Archivo de configuración deploy.yml

name: Deploy to Firebase



on:

  push: (Esta es la accion, ve al apartado de referencias)

    branches:

      - {{Rama de despliegue}}



jobs:

  build:

    runs-on: ubuntu-latest



    steps:

    - name: Check out repository

      uses: actions/checkout@v2



    - name: Set up Node.js

      uses: actions/setup-node@v2

      with:

        node-version: '22'



    - name: Install dependencies

      run: npm install



    - name: Build Angular app

      run: npm run build:prod (Ve a la seccion de Notas del comando Build Angular app)



    - name: Install Firebase CLI

      run: npm install -g firebase-tools



    - name: Deploy to Firebase Hosting

      run: firebase deploy --token "${FIREBASE_TOKEN}" 

      env:(Ve a la seccion Notas de github secrets y generar token de firebase)

       FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Notas del comando Build Angular app

veras es recomendable crear un comando en elpackage.json para que el build se ejecute sin problemas ya que puede ocasionar algunos errores al colocar el comando directo

npm run build:prod se traduce en el package.json como ng build --configuration=production

Ejemplo

{

...

  "scripts":{

  ...

        "build:prod": "ng build --configuration=production --verbose",

    ...

  },

...

}

Notas de github secrets y generar token de firebase

No vas a poner el token de tu firebase deploy en el comando, ¿verdad? ... ¿VERDAD?

Generar el token

para generar el token seria con el comando

firebase login:ci

eso va a abrir tu navegador y debes iniciar sesion con tu cuenta de Google.

cuando hagas sesión en tu consola va a aparecer la llave de acceso

esa llave la debes guardar ya que es necesaria para el comando firebase deploy --token

Guardar token en los secretos de Github

Vamos a darle a github la responsabilidad de que nuestra clave sea guardada.

1. vas a tu repositorio



2. en el apartado de configuraciones busca Secrets and variables
   
   




3. En Actions creas New repository secret

en el nombre pones lo mismo que en tu deploy.yml en mi caso FIREBASE_TOKEN, colocas el secreto generado con el comando y guardas

Referencias

Actiones de github

Deploying Your Website to Firebase Hosting from GitHub