Despliegue la aplicación angular a Firebase con Github Actions

Hola soy Fran y os traigo un nuevo post.

Este conjunto de instrucciones le ayuda a configurar Github Actions para crear un proyecto Angular e implementarlo al evento de alojamiento de Firebase en push. Incluso puede consultar este tutorial para crear cualquier aplicación Node.js y implementarlo a firebase.

Las acciones de Github permiten automatizar, personalizar y ejecutar sus flujos de trabajo de desarrollo de software directamente a su depósito. Es la mejor manera de crear y mantener un estilo de vida de integración continua / desarrollo continuo (CI / CD) para su aplicación.

Supongamos que ya ha enviado su aplicación al depósito de Github. Empezamos por la configuración de las acciones de Github.

Paso 1: cree la acción de Github

Acceda a su cuenta de Github y acceda a su repositorio. Al repositorio pulse acciones y haga clic en «configure un flujo de trabajo vosotros mismos«Enlace.

Véase a continuación la captura de pantalla como referencia:

Crea un flujo de trabajo Acciones Github

Paso 2: cree un flujo de trabajo

Una vez haga clic en el enlace setp workflow, se editará un nuevo archivo «.github / workflows / main.yml» en el depósito. Que contiene una configuración predeterminada para el flujo de trabajo.

Verá el archivo recién creado, algo así:

jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/[email protected]

      # Runs a single command using the runners shell
      - name: Run a one-line script
        run: echo Hello, world!

      # Runs a set of commands using the runners shell
      - name: Run a multi-line script
        run: |
          echo Add other actions to build,
          echo test, and deploy your project.

Paso 3: personalice su flujo de trabajo

Ahora, personalizaremos el archivo de configuración del flujo de trabajo en función de nuestros requisitos. En este paso, desglosamos la configuración paso a paso para hacerse entender. Incluso puede omitir este paso, ya que el archivo de configuración completo se proporciona a los pasos siguientes.

  1. Defina el nombre del flujo de trabajo – Este es un paso opcional, pero puede dar un nombre a su flujo de trabajo.
    name: deploy_to_firebase_hosting
    
  2. Personalice el nombre del trabajo – Todos los trabajos se definen en las secciones «trabajos:». En primer lugar, cambiamos la compilación defectuosa del nombre del trabajo a firebase-deploy. Puede cambiarlo por cualquier nombre según su caso.
    jobs:
      firebase-deploy:
    
  3. Personalizar el disparador – El flujo de trabajo predeterminado se activa cada embotamiento a cualquier rama. Puede que tenga que limitarse a sucursales específicas.Por ejemplo, active el desencadenamiento del flujo de trabajo sólo en push a main o release / * branches:
    on:
      push:
        branches:
        - main
        - release/*
    
  4. Actualizar la acción de pago – El flujo de trabajo predeterminado utiliza acciones /[email protected], Que es la última versión. Por tanto, no hay que hacer cambios aquí, pero todavía puede cambiarlo a la mayoría de acciones actuales /[email protected]
    - uses: actions/[email protected]
    
  5. Personalice el desencadenante de construcción de Node.js – Ahora, defina la versión de Node.js y órdenes de construcción para su aplicación Angular. Por ejemplo, utilizamos la versión 12.x de Node.js para crear esta aplicación.
    steps:
    - uses: actions/[email protected]
    - uses: actions/[email protected]
      with:
        node-version: '12.x'
    - run: npm install
    - run: npm run build:prod
    
  6. Despliegue en Firebase – El último paso es desplegar la aplicación a las funciones de Firebase.
    steps:
    - uses: actions/[email protected]
    - uses: actions/[email protected]
      with:
      node-version: '12.x'
    - run: npm install
    - run: npm run build:prod
    - uses: w9jds/[email protected]
      with:
        args: deploy --only hosting
      env:
        FIREBASE_TOKEN: $ secrets.FIREBASE_TOKEN 
    

    Según la configuración anterior, el despliegue se hará sólo con alojamiento en base de fuego. Incluso puede cambiar el valor de los argumentos adeploy --only function«Para desplegar funciones firbase.

Ahora haga clic en Iniciar la confirmación en la parte derecha para confirmar su nuevo flujo de trabajo.

Paso 4: configure el testimonio de Firebase

Las tareas de despliegue de acciones de Github necesitan un FIREBASE_TOKEN para la autenticación para desplegar código a firebase. Puede generar un testigo mediante las herramientas de firebase cli de su sistema.

Primero, instale firebase-tools con NPM.

npm i -g firebase-tools 

A continuación, ejecute el archivo firebase login:ci orden en el terminal:

firebase login:ci  

Esto le mostrará el enlace a su terminal, abra este enlace en el navegador web y autoriza completamente. Esto le mostrará un testigo para utilizar para tareas de CI.

ejemplo: firebase deploy --token "$FIREBASE_TOKEN"

Como no es seguro mantener este testimonio en el fichero de configuración. Añada este testigo a los secretos de Github.

A su depósito de Github, vaya a Configuración> Secretos> Nuevo secreto del depósito:

uso FIREBASE_TOKEN como nombre e introduzca el código secreto a valor sección. A continuación, haga clic en el botón Añadir secreto.

Paso 5: configuración final del flujo de trabajo

El archivo de configuración del flujo de trabajo final debería ser similar al editor de texto:

archivo: .github / workflow / main.yml

name: deploy_to_firebase_hosting

on:
  push:
    branches:
    - master
    - release/*

jobs:
  firebase-deploy:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/[email protected]
    - uses: actions/[email protected]
      with:
        node-version: '12.x'
    - run: npm install
    - run: npm run build:prod
    - uses: w9jds/[email protected]
      with:
        args: deploy --only hosting
      env:
        FIREBASE_TOKEN: $ secrets.FIREBASE_TOKEN 

Ahora puede enviar el archivo de configuración del flujo de trabajo en su depósito. Este flujo de trabajo se añade a .github / workflows / main.yml. Puede cambiar el nombre de fin main.yml que elija con la extensión .yml.

A continuación, adelante e introduzca algunos cambios en su depósito de Github. Esto provocará la acción de Github y realizará los pasos definidos en el flujo de trabajo.

La acción Github ha implementado con éxito en las funciones de Firebase

conclusión

En este tutorial, habéis aprendido a construir un proyecto Angular mediante acciones de Github ya implementarlo al alojamiento de Firebase.

También se puede visitar Acciones de Github documentación para obtener más detalles.

Este Blog lo escribimos para ayudar y servir de ayuda a la gente Linux. Esperamos que os guste.

Give a Comment