Crea una canalización de CI/CD en Azure Pipelines para Node.js utilizando Azure DevOps Starter

En este inicio rápido, creará una aplicación web progresiva de NodeJS (PWA) mediante GatsbyJS y la experiencia simplificada de creación de Azure DevOps Starter. Cuando haya terminado, tendrá una canalización de integración continua (CI) y entrega continua (CD) para su PWA en Azure Pipelines. Azure DevOps Starter configura lo que necesita para desarrollar, implementar y supervisar.

Prerrequisitos

Una cuenta de Azure con una suscripción activa. Cree una cuenta gratuita.
Una organización de Azure DevOps .

DevOps Starter crea una canalización de CI/CD en Azure Pipelines. Puede crear una organización de Azure DevOps o usar una organización existente. DevOps Starter también crea recursos de Azure en la suscripción de Azure que prefiera.

Inicie sesión en Azure Portal y, en el panel izquierdo, seleccione Crear un recurso.
En el cuadro de búsqueda, escriba DevOps Startery, a continuación, seleccione. Haga clic en Agregar para crear uno nuevo.

Selección de una aplicación de ejemplo y un servicio de Azure

Seleccione la aplicación de ejemplo Node.js.
El marco de trabajo de ejemplo predeterminado es Express.js. Cambie la selección a Simple Node.js App y, a continuación, seleccione Siguiente.
El marco de trabajo de la aplicación seleccionado en el paso 2 determina los destinos de implementación disponibles en este paso. En este ejemplo, Windows Web App es el destino de implementación predeterminado. Deje Web App for Containers establecido y seleccione Siguiente.

Configuración de un nombre de proyecto y una suscripción de Azure

En el paso final del flujo de trabajo de creación de DevOps Starter, asigna un nombre de proyecto, selecciona una suscripción de Azure y selecciona Listo.
Se muestra una página de resumen mientras se compila el proyecto y la aplicación se implementa en Azure. Después de un breve período, se crea un proyecto en la organización de Azure DevOps que incluye un repositorio git, un panel Kanban, una canalización de implementación, planes de prueba y los artefactos necesarios para la aplicación.

Administración del proyecto

Vaya a Todos los recursos y busque su devOps Starter. Seleccione devOps Starter.
Se le dirige a un panel que proporciona visibilidad de la página principal del proyecto, el repositorio de código, la canalización de CI/CD y un vínculo a la aplicación en ejecución. Seleccione la página principal del proyecto para ver la aplicación en Azure DevOps y, en otra pestaña del explorador, seleccione el punto de conexión de la aplicación para ver la aplicación de ejemplo activa. Cambiamos este ejemplo más adelante para usar la PWA generada por GatsbyJS.
Desde el proyecto de Azure DevOps, puede invitar a los miembros del equipo a colaborar y establecer un panel kanban para empezar a realizar el seguimiento del trabajo. Para obtener más información, consulte aquí .

Introducción a Azure DevOps

Clona el repositorio e instala tu PWA de Gatsby

DevOps Starter crea un repositorio git en Azure Repos o GitHub. En este ejemplo se ha creado una instancia de Azure Repo. El siguiente paso consiste en clonar el repositorio y realizar cambios.

Seleccione Repositorios de su proyecto de DevOps y, a continuación, haga clic en Clonar. Hay varios mecanismos para clonar el repositorio de Git en el escritorio. Elija la que se adapte a su experiencia de desarrollo.
Después de clonar el repositorio en el escritorio, realice algunos cambios en la plantilla de inicio. Comience instalando la CLI de GatsbyJS desde el terminal.
```
 npm install -g gatsby
```

En la consola, dirígete a la raíz del repositorio. Debe contener tres carpetas con un aspecto similar al siguiente:

Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----        2/23/2020  10:42 PM                Application
d-----        2/23/2020   3:05 PM                ArmTemplates
d-----        2/23/2020   3:05 PM                Tests

No queremos todos los archivos de la carpeta Aplicación porque la vamos a reemplazar con una plantilla de Gatsby. Ejecute los siguientes comandos, en secuencia, para recortarlos.
```
cp .\Application\Dockerfile .
rmdir Application
```

Use la CLI de Gatsby para generar una PWA de ejemplo. Ejecute gatsby new desde el terminal para iniciar el asistente de PWA y seleccione gatsby-starter-blog para la plantilla de inicio. Debería parecerse a este ejemplo:

c:\myproject> gatsby new
√ What is your project called? ... my-gatsby-project
? What starter would you like to use? » - Use arrow-keys. Return to submit.
    gatsby-starter-default
    gatsby-starter-hello-world
>   gatsby-starter-blog
    (Use a different starter)

Ahora tiene una carpeta denominada my-gatsby-project. Cámbielo a Application y cópielo Dockerfile en él.
```
mv my-gatsby-project Application
mv Dockerfile Application
```
En tu editor favorito, abre el archivo Dockerfile y modifica la primera línea de FROM node:8 a FROM node:12. Este cambio garantiza que el contenedor use Node.js versión 12.x en lugar de la versión 8.x. GatsbyJS requiere versiones más modernas de Node.js.
A continuación, abra el archivo package.json en la carpeta Aplicación y edite el campo scripts para asegurarse de que los servidores de desarrollo y producción escuchen en todas las interfaces de red disponibles (por ejemplo, 0.0.0.0) y el puerto 80. Sin esta configuración, el servicio de aplicaciones de contenedor no puede enrutar el tráfico a la aplicación de Node.js que se ejecuta dentro del contenedor. El scripts campo debe ser similar al siguiente. Específicamente, quiere cambiar los develop, serve, y start destinos de sus valores predeterminados.
```
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop  -H 0.0.0.0 -p 80",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run serve",
    "serve": "npm run build && gatsby serve -H 0.0.0.0 -p 80",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  }
```

Edita tus canalizaciones de CI/CD

Antes de confirmar el código en la sección anterior, realice algunos cambios en las canalizaciones de compilación y versión. Edite el 'pipeline de compilación' y actualice la tarea de Node para usar Node.js versión 12.x. Establezca el campo Versión de tarea en 1.x y el campo Versión en 12.x.
En este inicio rápido, no estamos creando pruebas unitarias y deshabilitamos esos pasos en nuestra canalización de compilación. Al escribir pruebas, puede volver a habilitar estos pasos. Haga clic con el botón derecho para seleccionar las tareas etiquetadas Instalar dependencias de prueba y Ejecutar pruebas unitarias y deshabilitarlas.
Edite su pipeline de entrega.
Al igual que con la canalización de compilación, cambie la tarea Node para usar 12.x y deshabilite las dos tareas de prueba. La versión debería ser similar a esta captura de pantalla.
En el lado izquierdo del explorador, vaya al archivo views/index.pug .
Seleccione Editary, a continuación, realice un cambio en el encabezado h2. Por ejemplo, escriba Introducción inmediatamente con Azure DevOps Starter o realice algún otro cambio.
Seleccione Confirmary, a continuación, guarde los cambios.
En el explorador, vaya al panel de DevOps Starter.
Ahora debería ver un proceso de construcción en curso. Los cambios que realizaste se compilan e implementan automáticamente a través de un pipeline de CI/CD.

Confirmación de los cambios y examen de la canalización de CI/CD de Azure

En los dos pasos anteriores, agregó una PWA generada por Gatsby al repositorio de Git y editó las canalizaciones para compilar e implementar el código. Podemos confirmar el código y ver su progreso a través de la canalización de compilación y versión.

Desde la raíz del repositorio git del proyecto en un terminal, ejecute los siguientes comandos para insertar el código en el proyecto de Azure DevOps:
```
git add .
git commit -m "My first Gatsby PWA"
git push
```
Se inicia una compilación tan pronto como git push se complete. Puede seguir el progreso desde el panel de Azure DevOps.
Después de unos minutos, las canalizaciones de compilación y versión deben finalizar y la PWA debe implementarse en un contenedor. Haga clic en el enlace Punto de conexión de aplicación desde el tablero anterior y debería ver un proyecto de inicio de Gatsby para blogs.

Limpieza de recursos

Puede eliminar Azure App Service y otros recursos relacionados que haya creado cuando ya no necesite los recursos. Utiliza la funcionalidad Eliminar en el tablero de DevOps Starter.

Pasos siguientes

Al configurar el proceso de CI/CD, las canalizaciones de compilación y versión se crean automáticamente. Puede modificar estas canalizaciones de compilación y despliegue para satisfacer las necesidades de su equipo. Para obtener más información sobre el flujo de trabajo de CI/CD, consulte:

Personalizar proceso de CD

Last updated on 2020-03-24

Compartir a través de