Header Ads Widget

Ticker

6/recent/ticker-posts

Acciones de GitHub y Angular 10/9: instale Node.js, Angular CLI e implemente su aplicación en páginas de GitHub

 En este ejemplo, veremos cómo usar Github Actions para instalar Node.js y Angular CLI 10 y luego compilar e implementar nuestra aplicación Angular 10 o cualquier versión anterior en las páginas de GitHub.

A lo largo de este tutorial, aprenderemos cómo configurar acciones de Github en su proyecto de Angular 10 para crear e implementar su aplicación en páginas de GitHub.

Como requisito previo, debe tener un proyecto de Angular 10 enviado a un repositorio de GitHub.

Presentación de acciones de GitHub

Github Actions es una plataforma CI / CD recientemente lanzada que los repositorios de código abierto pueden usar de forma gratuita. GitHub lo presenta para ayudar a los desarrolladores a automatizar el flujo de trabajo de su proyecto.

Las acciones de Github pueden manejar muchos procesos que pueden ser desencadenados por múltiples eventos en la plataforma, como:

  • código de empuje
  • hacer un lanzamiento
  • solicitud de extracción
  • crear un problema, etc.

También se pueden activar manualmente desde la pestaña Acciones en su repositorio o enviando una solicitud HTTP Post segura (usando un token de acceso privado) a un punto final predefinido.

Las acciones de GitHub te ayudan a automatizar todos tus flujos de trabajo de desarrollo, desde la creación, las pruebas hasta la implementación de tu aplicación en tu host directamente desde GitHub.

Si tiene un proyecto Angular enviado a GitHub, veamos cómo puede crear un flujo de trabajo de Acciones de GitHub para construir, probar e implementar la aplicación Angular en Páginas de GitHub.

Paso 1: Crear un flujo de trabajo de acciones de GitHub

Según los documentos oficiales :

Un flujo de trabajo es un proceso automatizado configurable compuesto por uno o más trabajos. Debe crear un archivo YAML para definir la configuración de su flujo de trabajo.

Diríjase a su repositorio de GitHub, luego vaya a la pestaña Acciones y configure un flujo de trabajo haciendo clic en el enlace configurar un flujo de trabajo usted mismo como se muestra a continuación:

También puede crear una carpeta nombrada .github/workflowsen la raíz de su repositorio de código Angular con un archivo de flujo de trabajo que tiene la .ymlextensión.

Acciones de GitHub Configurar flujo de trabajo

Serás llevado a la siguiente interfaz de usuario:

Acciones de GitHub Nuevo flujo de trabajo

Se main.ymlcreará un workflow con nombre dentro de la .github/workflowscarpeta de nuestro repositorio con el siguiente contenido:

# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the master branch
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
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/checkout@v2

      # 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.

El flujo de trabajo se compone de un solo trabajo con dos pasos que simplemente imprimen algunos mensajes en el shell de un corredor de Ubuntu.

Una ejecución de flujo de trabajo se compone de uno o más trabajos. Los trabajos se ejecutan en paralelo de forma predeterminada. Para ejecutar trabajos de forma secuencial, puede definir dependencias en otros trabajos utilizando la jobs.<job_id>.needspalabra clave. Cada trabajo se ejecuta en un entorno especificado por runs-on.

Paso 2: instalar Node.JS y Angular CLI e implementar en páginas de GitHub

Modifiquemos el flujo de trabajo anterior para instalar Node.js y Angular CLI 10 y luego compilemos nuestro proyecto e impleméntelo en la web.

name: CI
on:
  push:
    branches: [ master ]
jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v1
    - uses: actions/setup-node@v1 #this will install Node and npm on Ubuntu
      with:
        node-version: '12.x'
    - run: npm install
    - run: npm install -g @angular/cli > /dev/null
    - run: ng build --prod --output-path=dist --base-href="https://techiediaries.github.io/angular-bootstrap-demo/"
    - name: Publish generated content to GitHub Pages
      uses: tsunematsu21/actions-publish-gh-pages@v1.0.1
      with:
          dir: dist
          branch: gh-pages
          token: ${{ secrets.ACCESS_TOKEN }}

Usamos tsunematsu21 / actions-publish-gh-pages para implementar nuestra aplicación en las páginas de GitHub. Esta acción necesitará un token de acceso que debe generarse desde la página de configuración de su cuenta de GitHub.

Comprobación del código fuente

Los trabajos no obtienen el código del repositorio de forma predeterminada. Tendremos que instruir al trabajo para que lo haga usando la checkout@v1acción. Usamos el siguiente paso en nuestro buildtrabajo:

    steps:
    - uses: actions/checkout@v1

Instalación de Node.js

Angular CLI requiere Node.js, por lo que tendremos que instalarlo en nuestro trabajo con Ubuntu.

Para instalar Node.js. agregaremos otro paso en nuestro trabajo de la siguiente manera:

    steps:
    - uses: actions/setup-node@v1 #this will install Node and npm on Ubuntu
      with:
        node-version: '12.x'

Gracias a esto, nuestro buildtrabajo está configurado para usar la versión 12.x de Node.js dentro del corredor de Ubuntu.

Paso 3: generar un nuevo token de acceso

Vaya a https://github.com/settings/tokens/new y genere un nuevo token con el repoalcance y asegúrese de copiarlo.

Paso 4: creación de un nuevo secreto para el token de acceso

A continuación, diríjase a la pestaña Configuración de su repositorio , y luego vaya a Secretos y cree un Nuevo secreto :

Secretos de GitHub Nombra tu secreto ACCESS_TOKENy pega tu token de acceso.

Paso 5: Impulsar e iniciar su flujo de trabajo

Finalmente, envíe su archivo de flujo de trabajo a su repositorio. El flujo de trabajo se iniciará automáticamente ya que está configurado para iniciarse cuando enviamos el código al repositorio.

Vaya a la pestaña Acciones para ver el estado de su flujo de trabajo de compilación:

Progreso del flujo de trabajo de GitHub

Incluso puede visualizar cuándo se están ejecutando los pasos del trabajo de compilación:

Progreso del flujo de trabajo de GitHub

Cuando se complete con éxito, debe tener una gh-pagesrama creada en su repositorio que contenga el contenido de la distcarpeta de nuestra aplicación Angular después de haber sido construida con el trabajo de compilación anterior.

Vea la aplicación que se ejecuta desde https://techiediaries.github.io/angular-bootstrap-demo .

Conclusión

Hemos publicado con éxito nuestra aplicación Angular en páginas de GitHub usando acciones de GitHub. Hemos visto cómo instalar Node.js, Angular CLI y construir nuestra aplicación Angular para producción dentro de un corredor de Ubuntu.

Publicar un comentario

0 Comentarios