Compilación e implementación de una aplicación de Node.js

En este artículo se muestra cómo usar Azure Pipelines para crear una canalización que compile e implemente una aplicación de Node.js en Azure App Service con integración continua (CI) e implementación continua (CD). CI/CD reduce el tiempo de inactividad y el riesgo de error mediante la compilación e implementación automáticas de la aplicación siempre que haya una confirmación en el repositorio de código de la aplicación.

Requisitos previos

Bifurcar una aplicación de ejemplo

1. En GitHub, vaya al repositorio Node.js Hola Mundo y seleccione Fork en el menú superior.

   

2. Seleccione su organización de GitHub como propietario de la bifurcación si aún no lo ha hecho, y luego seleccione Crear bifurcación.

   

El explorador va a la nueva bifurcación en la dirección URL https://github.com/<owner>/nodejs-docs-hello-world.

Creación e implementación de la aplicación web de App Service

Cree la aplicación web de Azure App Service mediante Cloud Shell en Azure Portal. Para usar Cloud Shell, inicie sesión en Azure Portal y seleccione el botón Cloud Shell de la barra de herramientas superior.

Cloud Shell aparece en la parte inferior del explorador. Asegúrese de que Bash está seleccionado como entorno en el menú desplegable.

Creación e implementación de la aplicación web

1. En Cloud Shell, clone el repositorio bifurcada en Azure con el siguiente comando y reemplace por <your-forked-repository-url> la dirección URL del repositorio bifurcada.

   git clone <your-forked-repository-url>
   

2. Cambie el directorio a la carpeta del repositorio clonado.

   cd nodejs-docs-hello-world
   

3. Ejecute el comando az webapp up para aprovisionar una aplicación web de App Service y realizar la primera implementación. El --sku F1 argumento crea la aplicación web en el plan de tarifa Gratis, lo que no conlleva ningún costo.

   La ejecución az webapp up sin parámetros name asigna automáticamente un nombre de aplicación web generado aleatoriamente que es único en Azure. También puede usar el --name <web-app-name> parámetro para asignar cualquier nombre único en Azure, como un nombre personal o de empresa con un identificador de aplicación, como --name <your-name>-nodeapp.

   az webapp up --sku F1 --name <app-name>
   

El az webapp up comando reconoce la aplicación como una aplicación Node.js y realiza las siguientes acciones:

1. Crea un grupo de recursos predeterminado.
2. Crea un plan de App Service predeterminado.
3. Crea una aplicación web con el nombre asignado y la dirección URL <your-web-app-name>.azurewebsites.net.
4. ZIP implementa todos los archivos desde el directorio de trabajo actual, con la automatización de compilación habilitada.
5. Almacena en caché los parámetros localmente en el archivo .azure/config , por lo que no es necesario volver a especificarlos al implementar desde la carpeta del proyecto con az webapp up u otros az webapp comandos.

Puede invalidar las acciones predeterminadas con sus propios valores mediante los parámetros de comando. Para más información, consulte az webapp up.

El comando genera mensajes de estado a medida que se ejecuta. Una vez que el sitio web se inicie correctamente, puede seleccionar el vínculo en You can launch the app at https://<your-web-app-name>.azurewebsites.net para ir a la aplicación web Hello World .

El az webapp up comando genera la siguiente salida JSON para la aplicación web de ejemplo:

{
  "URL": "<your-web-app-url>",
  "appserviceplan": "<your-app-service-plan-name>",
  "location": "<your-azure-region>",
  "name": "<your-web-app-name>",
  "os": "Linux",
  "resourcegroup": "<your-resource-group-name>",
  "runtime_version": "node|20-LTS",
  "runtime_version_detected": "10.0",
  "sku": "FREE",
  "src_path": "<repository-source-path>"
}

Creación de la canalización a partir de una plantilla

1. En el proyecto de Azure DevOps, seleccione Canalizaciones en el menú de navegación izquierdo y, a continuación, seleccione Nueva canalización o Crear canalización si esta canalización es la primera del proyecto.

2. En la pantalla Where is your code (Dónde está el código ), seleccione GitHub.

3. En la pantalla Seleccionar un repositorio, seleccione su repositorio bifurcado nodejs-docs-hello-world.

4. Azure Pipelines reconoce el código como una aplicación de Node.js y sugiere varias plantillas de canalización en la página Configurar la canalización . Seleccione Node.js Express Web App en Linux en Azure.

5. En la pantalla siguiente, seleccione la suscripción de Azure y seleccione Continuar. Esta acción crea una conexión de servicio a los recursos de Azure.

6. En la pantalla siguiente, seleccione la aplicación web de Azure y seleccione Validar y configurar. Azure Pipelines crea un archivo azure-pipelines.yml y lo muestra en el editor de canalizaciones DE YAML.

7. En la pantalla Revisar tu canalización YAML, revisa el código de tu canalización.

   La canalización realiza las siguientes acciones:

   • Establece un desencadenador que se ejecutará en cada confirmación en la rama de código principal.
   • Establece y usa variables para la conexión de servicio, la aplicación web, la imagen de máquina y el entorno.
   • Instala Node.js en el agente de compilación y usa npm para ejecutar y probar la compilación de la aplicación.
   • Empaqueta la aplicación compilada en un archivo ZIP y carga el archivo ZIP en una ubicación de destino.
   • Implementa el paquete ZIP en la aplicación de App Service e inicia la aplicación.

Guardar y ejecutar la canalización

1. Después de revisar el código, seleccione Guardar y ejecutar y Guardar y volver a ejecutar para guardar y ejecutar la canalización. El archivo azure-pipelines.yml se guarda en su repositorio bifurcado, y el código se implementa en Azure App Service.

   Nota:

   La primera vez que se ejecuta la canalización, solicita permiso para acceder al entorno que crea. Seleccione Permitir para conceder permiso a la canalización para acceder al entorno.

2. En la página Resumen de ejecución, seleccione el trabajo para ver la ejecución de la canalización y realizar un seguimiento de su compilación.

3. Cuando la ejecución se realice correctamente, seleccione la tarea Azure Web App Deploy y seleccione la dirección URL de la aplicación de App Service para ver el sitio web implementado.

   

4. Verifique que vea el sitio funcionando en App Service en la URL del sitio web desplegado.

   

Ejecutar una compilación e implementación de CI

La trigger: main palabra clave configura la canalización para que se ejecute cada vez que se realiza un cambio en la main rama del repositorio de código bifurcado. Para ejecutar una compilación de CI:

1. Ve al repositorio de GitHub bifurcado y haz un pequeño cambio en el archivo README.md.
2. Seleccione Confirmar cambios y Confirmar cambios de nuevo.
3. En Azure Pipelines, verifique que la canalización nodejs-docs-hello-world se ejecute de nuevo con una descripción de Individual CI.

Limpieza de recursos

Puede eliminar los recursos que creó para este artículo si ya no los necesita.

• Para quitar los recursos de Azure App Service, ejecute los siguientes comandos en orden en Cloud Shell. Debe eliminar la aplicación web antes de poder eliminar su plan de App Service, y debe eliminar este plan antes de poder eliminar su grupo de recursos.

  az webapp delete --name <web-app-name> --resource-group <resource-group-name>
  az appservice plan delete --name <app-service-plan-name> --resource-group <resource-group-name>
  az group delete --name <resource-group-name>
  

• Para quitar la canalización en Azure Pipelines, seleccione la canalización, seleccione el icono Más acciones situado en la esquina superior derecha de la página de canalización y, a continuación, seleccione Eliminar. Para quitar el proyecto de Azure DevOps, consulte Eliminación de un proyecto.

• Para eliminar el repositorio de GitHub nodejs-docs-hello-world bifurcado, vaya al repositorio y seleccione Configuración en la barra de menús superior. Desplácese hasta la parte inferior de la página y seleccione Eliminar este repositorio.

Contenido relacionado

• Personalización de JavaScript
• Implementación en App Service mediante Azure Pipelines