Logo

dev-resources.site

for different kinds of informations.

Desplegar a Firebase con GitHub actions

Published at
12/22/2024
Categories
firebase
github
githubactions
Author
inusui
Categories
3 categories in total
firebase
open
github
open
githubactions
open
Author
6 person written this
inusui
open
Desplegar a Firebase con GitHub actions

Como desplegar a firebase con github actions

github - firebase

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, disfruta del articulo ✨

Creación de archivos

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

mkdir -p .github/workflows
Enter fullscreen mode Exit fullscreen mode

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

touch deploy.yml
Enter fullscreen mode Exit fullscreen mode

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 }}

Enter fullscreen mode Exit fullscreen mode

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",
    ...
  },
...
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Image description

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
    secret and variables

  3. En Actions creas New repository secret

New 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

githubactions Article's
30 articles in total
Favicon
Git Commands Every Developer Must Know 🔥
Favicon
Github Actions with Vercel in 2024
Favicon
Undo Mistakes in Git: Revert, Reset, and Checkout Simplified
Favicon
Taming the CI Beast: Optimizing a Massive Next.js Application (Part 1)
Favicon
Visualize TypeScript Dependencies of Changed Files in a Pull Request Using dependency-cruiser-report-action
Favicon
From Code to Cloud: Builds Next.js on GitHub Actions, straight to production
Favicon
Publishing JSR package with Github Actions that react-hook-use-cta used
Favicon
Zero Config Spring Batch: Just Write Business Logic
Favicon
When GitHub Actions Build Fails Due to pnpm-lockfile
Favicon
CI/CD Tools for Startups: Empowering IT Professionals to Scale Smarter
Favicon
Securely access Amazon EKS with GitHub Actions and OpenID Connect
Favicon
Publishing NPM package with Github Actions that react-hook-use-cta used
Favicon
[Boost]
Favicon
Building and Deploying a New API (Part 2)
Favicon
From days to minutes: Build and publish React Native apps using Fastlane and Github Actions
Favicon
Private LLMs for GitHub Actions
Favicon
Desplegar a Firebase con GitHub actions
Favicon
How to build a chatbot powered by github actions
Favicon
Building an educational game with AI tools and Azure Static Web Apps (Part 2)
Favicon
Continous Integration And Continous Deployment Of A Full-Stack Docker-Compose Application
Favicon
Git Hub Pages is a free and awesome solution for your profile or personal site
Favicon
Build vs. Buy: Choosing the Right Approach to IaC Management
Favicon
How to release a version of a web app using GitHub Workflow with GitHub Actions
Favicon
CI/CD com GitHub Actions e teste local com Act
Favicon
Deploying Containerized Applications to AWS ECS Using Terraform and CI/CD (Project Summary)
Favicon
Automating Unity Builds with GitHub Actions
Favicon
Auto Deploy Laravel with Deployer.yml sample With Github Runner
Favicon
Create an auto-merging workflow on Github
Favicon
github actions
Favicon
VS Code + LLM = ?

Featured ones: