Implementación en Azure App Service mediante Visual Studio Code

Este tutorial le guiará a través de la configuración de una canalización de CI/CD para implementar Node.js aplicación en Azure App Service mediante la extensión Implementar en Azure.

Requisitos previos

• Una cuenta de Azure. Si no tiene uno, puede crear de forma gratuita.

• Debe instalar Visual Studio Code junto con elNode.js y npm el administrador de paquetes Node.js y las extensiones siguientes:

• Necesita la extensión de cuenta de Azure e implementar en la extensión de Azure.

• Tener una cuenta de GitHub en la que pueda crear un repositorio. Si no tiene ninguna, puede crearla gratis.

Creación de Node.js aplicación

Cree una Node.js que se pueda implementar en la nube. En este tutorial se usa un generador de aplicaciones para scaffolding rápido de la aplicación desde un terminal.

Instalación de Express Generator

Express es un marco popular para crear y ejecutar aplicaciones de Node.js. Puede aplicar scaffolding en una nueva aplicación de Express (lo que equivale a crear un aplicación) mediante la herramienta Express Generator. Express Generator se proporciona como un módulo de npm y se instala mediante la herramienta de línea de comandos de npm npm.

Instale Express Generator mediante la ejecución de lo siguiente desde un terminal:

npm install -g express-generator

El modificador -g instala Express Generator globalmente en el equipo para que pueda ejecutarlo desde cualquier lugar.

Aplicación de scaffolding en una nueva aplicación

Ahora podemos scaffolding de una nueva aplicación Express llamada myExpressApp mediante la ejecución de:

express myExpressApp --view pug --git

Esto crea una nueva carpeta denominada myExpressApp con el contenido de la aplicación. Los --view pug parámetros le dicen al generador que use el motor de plantillas de --view pug (anteriormente conocido como jade).

Para instalar todas las dependencias de la aplicación (enviadas de nuevo como módulos npm), vaya a la nueva carpeta y ejecute npm install :

cd myExpressApp
npm install

En este momento, debemos probar que la aplicación se ejecuta. La aplicación Express generada tiene un package.json archivo , que incluye un script de inicio para ejecutar node ./bin/www . Esto iniciará la aplicación Node.js en ejecución.

Ejecución de la aplicación

1. Desde un terminal de la carpeta de la aplicación Express, ejecute:

   npm start

   El Node.js web se iniciará y puede ir a http://localhost:3000 para ver la aplicación en ejecución.

2. Siga este vínculo para insertar este proyecto en GitHub mediante la línea de comandos.

3. Abra la carpeta de la aplicación VS Code y prepárese para la implementación en Azure.

Instalación de la extensión

1. Para abrir la vista Extensiones, haga clic en el icono Extensiones de la barra de actividad del lado de VS Code o en el comando Ver: extensiones .

2. Busque Implementar en la extensión e instalar de Azure.

   

3. Una vez completada la instalación, la extensión se ubicará en el espacio de extensión habilitado.

   

Configuración de la canalización de CI/CD

Ahora puede implementar en App de Azure Services, Azure Function App y AKS mediante VS Code. Esta VS Code ayuda a configurar la compilación y la implementación continuas para App de Azure Services sin salir VS Code.

Para usar este servicio, debe instalar la extensión en VS Code. Puede examinar e instalar extensiones desde dentro de VS Code.

Combinación de flujos de trabajo

Se admiten GitHub acciones y Azure Pipelines para GitHub & Azure Repos correspondiente. También le permitimos crear Azure Pipelines si sigue administrando el código en GitHub.

GitHub + GitHub acciones

1. Para configurar una canalización, elija en la paleta de comandos (Ctrl/Cmd + Mayús + P) o haga clic con el botón Deploy to Azure: Configure CI/CD Pipeline derecho en el explorador de archivos.

   

   Nota

   Si el código no se abre en el área de trabajo, pedirá la ubicación de la carpeta. De forma similar, si el código del área de trabajo tiene más de una carpeta, pedirá carpeta.

2. Seleccione la plantilla de canalización que desea crear en la lista. Puesto que el destino es Node.js , seleccione Node.js with npm to App Service.

   

3. Seleccione la suscripción de Azure de destino para implementar la aplicación.

   

4. Seleccione el recurso de Azure de destino para implementar la aplicación.

   

5. Escriba GitHub token de acceso personal (PAT), necesario para rellenar los secretos que se usan en GitHub de trabajo. Establezca el ámbito en repo y admin:repo_hook .

   

   Sugerencia

   Si el código está en Azure Repos, necesita permisos diferentes.

6. La configuración del flujo GitHub de trabajo o Azure Pipeline se produce en función de la configuración de la extensión. El flujo de trabajo guiado generará un archivo YAML de inicio que define el proceso de compilación e implementación. Confirme insertar el archivo YAML para continuar con la implementación.

   

   Sugerencia

   Puede personalizar la canalización mediante todas las características que ofrece Azure Pipelines y GitHub Actions.

7. Vaya al repositorio GitHub para ver las acciones en curso.

   

8. Vaya al sitio que se ejecuta en Azure mediante la dirección URL de la aplicación web http://{web_app_name}.azurewebsites.net y compruebe su contenido.

GitHub + Azure Pipelines

Para abrir la configuración de usuario y área de trabajo, use el siguiente comando VS Code menú:

• En Windows/Linux: preferencias de > archivo Configuración
• En macOS: preferencias de > Configuración

También puede abrir el editor Configuración desde la paleta de comandos ( ) con Preferencias: Abrir Configuración o usar el método abreviado de teclado Ctrl+Shift+P ( Ctrl+, ).

Al abrir el editor de configuración, puede buscar y detectar la configuración que busca. Busque el nombre y deployToAzure.UseAzurePipelinesForGithub habilite como se muestra a continuación.

1. Para configurar una canalización, elija en la paleta de comandos (Ctrl/Cmd + Mayús + P) o haga clic con el botón Deploy to Azure: Configure CI/CD Pipeline derecho en el explorador de archivos.

   

   Nota

   Si el código no se abre en el área de trabajo, pedirá la ubicación de la carpeta. De forma similar, si el código del área de trabajo tiene más de una carpeta, pedirá carpeta.

2. Seleccione la plantilla de canalización que desea crear en la lista. Puesto que el destino es Node.js , seleccione Node.js with npm to App Service.

   

3. Seleccione la suscripción de Azure de destino para implementar la aplicación.

   

4. Seleccione el recurso de Azure de destino para implementar la aplicación.

   

5. Escriba GitHub token de acceso personal (PAT), necesario para rellenar los secretos que se usan en GitHub de trabajo. Establezca el ámbito en repo y admin:repo_hook .

   

   

6. Seleccione una Azure DevOps organización.

   

7. Seleccione un Azure DevOps proyecto.

   

8. La configuración del flujo GitHub de trabajo o Azure Pipeline se produce en función de la configuración de la extensión. El flujo de trabajo guiado generará un archivo YAML de inicio que define el proceso de compilación e implementación. Confirme insertar el archivo YAML para continuar con la implementación.

   

   Sugerencia

   Puede personalizar la canalización mediante todas las características que ofrece Azure Pipelines y GitHub Actions.

9. Vaya al proyecto Azure DevOps para ver la canalización en curso.

   

10. Vaya al sitio que se ejecuta en Azure mediante la dirección URL de la aplicación web http://{web_app_name}.azurewebsites.net y compruebe su contenido.

Azure Repos + Azure Pipelines

1. Para configurar una canalización, elija en la paleta de comandos (Ctrl/Cmd + Mayús + P) o haga clic con el botón Deploy to Azure: Configure CI/CD Pipeline derecho en el explorador de archivos.

   

   Nota

   Si el código no se abre en el área de trabajo, pedirá la ubicación de la carpeta. De forma similar, si el código del área de trabajo tiene más de una carpeta, pedirá carpeta.

2. Seleccione la plantilla de canalización que desea crear en la lista. Puesto que el destino es Node.js , seleccione Node.js with npm to App Service.

   

3. Seleccione la suscripción de Azure de destino para implementar la aplicación.

   

4. Seleccione el recurso de Azure de destino para implementar la aplicación.

   

5. La configuración del flujo GitHub de trabajo o Azure Pipeline se produce en función de la configuración de la extensión. El flujo de trabajo guiado generará un archivo YAML de inicio que define el proceso de compilación e implementación. Confirme insertar el archivo YAML para continuar con la implementación.

   

   Sugerencia

   Puede personalizar la canalización mediante todas las características que ofrece Azure Pipelines y GitHub Actions.

6. Vaya al proyecto Azure DevOps para ver la canalización en curso.

   

7. Vaya al sitio que se ejecuta en Azure mediante la dirección URL de la aplicación web http://{web_app_name}.azurewebsites.net y compruebe su contenido.

Solución de problemas

Obtenga información sobre cómo solucionar problemas comunes.

Problema:no se pudo implementar el paquete web en App Service. Conflicto (CÓDIGO: 409)

Resolución:reinicie App Service y, a continuación, implemente el paquete en App Service nuevo.

Pasos siguientes

Pruebe el flujo de trabajo con un archivo de Docker en un repositorio.

Ayuda y soporte técnico

• Vea la guía de solución de problemas
• Obtenga consejos en Stack Overflow y no dude en publicar preguntas, buscar respuestas o sugerir una característica en la comunidad de desarrolladores de Azure DevOps. Página de soporte técnico.