Note
Actualmente los ejecutores hospedados por GitHub no se admiten en GitHub Enterprise Server. Puede ver más información sobre la compatibilidad futura planeada en GitHub public roadmap.
Introducción
En esta guía se explica cómo usar GitHub Actions para compilar, probar e implementar un proyecto de Node.js en Azure App Service.
Note
Si tus flujos de trabajo de GitHub Actions necesitan acceder a los recursos de un proveedor de servicios en la red que sea compatible con OpenID Connect (OIDC), puedes configurarlos para que se autentiquen directamente con dicho proveedor. Esto te permitirá dejar de almacenar estas credenciales como secretos de duración larga y te proporcionará otros beneficios de seguridad. Para más información, consulta "Acerca del fortalecimiento de seguridad con OpenID Connect". y "Configura OpenID Connect en Azure."
Requisitos previos
Antes de crear tu flujo de trabajo de GitHub Actions, primero necesitarás completar los siguientes pasos de configuración:
-
Crear un plan de Azure App Service.
Por ejemplo, puedes utilizar el CLI de Azure para crear un plan de App Service nuevo:
Bash az appservice plan create \ --resource-group MY_RESOURCE_GROUP \ --name MY_APP_SERVICE_PLAN \ --is-linux
az appservice plan create \ --resource-group MY_RESOURCE_GROUP \ --name MY_APP_SERVICE_PLAN \ --is-linux
En el comando anterior, reemplace
MY_RESOURCE_GROUP
por el grupo de recursos de Azure existente yMY_APP_SERVICE_PLAN
por un nuevo nombre para el plan de App Service.Para más información sobre cómo usar la CLI de Azure, vea la documentación de Azure.
- Para la autenticación, vea "Inicio de sesión con la CLI de Azure".
- Si tiene que crear un grupo de recursos, vea "az group".
-
Crear una aplicación web.
Por ejemplo, puedes utilizar el CLI de Azure para crear una app web de Azure App Service con un tiempo de ejecución de Node.js:
Bash az webapp create \ --name MY_WEBAPP_NAME \ --plan MY_APP_SERVICE_PLAN \ --resource-group MY_RESOURCE_GROUP \ --runtime "NODE|14-lts"
az webapp create \ --name MY_WEBAPP_NAME \ --plan MY_APP_SERVICE_PLAN \ --resource-group MY_RESOURCE_GROUP \ --runtime "NODE|14-lts"
En el comando anterior, reemplace los parámetros con valores propios, donde
MY_WEBAPP_NAME
es un nombre nuevo para la aplicación web. -
Configure un perfil de publicación de Azure y cree un secreto
AZURE_WEBAPP_PUBLISH_PROFILE
.Genera tus credenciales de despliegue de Azure utilizando un perfil de publicación. Para más información, vea "Generación de credenciales de implementación" en la documentación de Azure.
En el repositorio de GitHub, cree un secreto denominado
AZURE_WEBAPP_PUBLISH_PROFILE
que incluya el contenido del perfil de publicación. Para más información sobre la creación de secretos, consulta "Uso de secretos en Acciones de GitHub". -
Optionally, configure a deployment environment. Los entornos se usan para describir un destino de implementación general como
production
,staging
odevelopment
. Cuando se despliega un flujo de trabajo de GitHub Actions en un ambiente, dicho ambiente se desplegará en la página principal del repositorio. Puede usar entornos para requerir aprobación para que un trabajo continúe, restringir qué ramas pueden desencadenar un flujo de trabajo, controlar las implementaciones con reglas de protección de implementación personalizadas o limitar el acceso a los secretos. Para más información sobre la creación de entornos, consulta "Administrar entornos para la implementación".
Crear un flujo de trabajo
Una vez que hayas completado los prerequisitos, puedes proceder con la creación del flujo de trabajo.
En el flujo de trabajo de ejemplo siguiente se muestra cómo compilar, probar e implementar un proyecto de Node.js en Azure App Service cuando se realice una inserción a la rama main
.
Asegúrese de establecer AZURE_WEBAPP_NAME
en la clave env
del flujo de trabajo en el nombre de la aplicación web que ha creado. Si la ruta al proyecto no es la raíz del repositorio, cambia AZURE_WEBAPP_PACKAGE_PATH
por la ruta al proyecto. Si usas una versión de Node.js distinta de 10.x
, cambia NODE_VERSION
por la versión que utilices.
Si ha configurado un entorno de implementación, cambie el valor de environment
por el nombre del entorno. Si no ha configurado un entorno, borre la clave environment
.
# Este flujo de trabajo usa acciones que no GitHub no certifica. # Estas las proporcionan entidades terceras y las gobiernan # condiciones de servicio, políticas de privacidad y documentación de soporte # en línea. # GitHub recomienda anclar acciones a un SHA de confirmación. # Para obtener una versión más reciente, debes actualizar el SHA. # También puedes hacer referencia a una etiqueta o rama, pero la acción puede cambiar sin ninguna advertencia. on: push: branches: - main env: AZURE_WEBAPP_NAME: MY_WEBAPP_NAME # set this to your application's name AZURE_WEBAPP_PACKAGE_PATH: '.' # set this to the path to your web app project, defaults to the repository root NODE_VERSION: '14.x' # set this to the node version to use jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Set up Node.js uses: actions/setup-node@v4 with: node-version: ${{ env.NODE_VERSION }} cache: 'npm' - name: npm install, build, and test run: | npm install npm run build --if-present npm run test --if-present - name: Upload artifact for deployment job uses: actions/upload-artifact@v3 with: name: node-app path: . deploy: runs-on: ubuntu-latest needs: build environment: name: 'production' url: ${{ steps.deploy-to-webapp.outputs.webapp-url }} steps: - name: Download artifact from build job uses: actions/download-artifact@v3 with: name: node-app - name: 'Deploy to Azure WebApp' id: deploy-to-webapp uses: azure/webapps-deploy@85270a1854658d167ab239bce43949edb336fa7c with: app-name: ${{ env.AZURE_WEBAPP_NAME }} publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }} package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}
# Este flujo de trabajo usa acciones que no GitHub no certifica.
# Estas las proporcionan entidades terceras y las gobiernan
# condiciones de servicio, políticas de privacidad y documentación de soporte
# en línea.
# GitHub recomienda anclar acciones a un SHA de confirmación.
# Para obtener una versión más reciente, debes actualizar el SHA.
# También puedes hacer referencia a una etiqueta o rama, pero la acción puede cambiar sin ninguna advertencia.
on:
push:
branches:
- main
env:
AZURE_WEBAPP_NAME: MY_WEBAPP_NAME # set this to your application's name
AZURE_WEBAPP_PACKAGE_PATH: '.' # set this to the path to your web app project, defaults to the repository root
NODE_VERSION: '14.x' # set this to the node version to use
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: ${{ env.NODE_VERSION }}
cache: 'npm'
- name: npm install, build, and test
run: |
npm install
npm run build --if-present
npm run test --if-present
- name: Upload artifact for deployment job
uses: actions/upload-artifact@v3
with:
name: node-app
path: .
deploy:
runs-on: ubuntu-latest
needs: build
environment:
name: 'production'
url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
steps:
- name: Download artifact from build job
uses: actions/download-artifact@v3
with:
name: node-app
- name: 'Deploy to Azure WebApp'
id: deploy-to-webapp
uses: azure/webapps-deploy@85270a1854658d167ab239bce43949edb336fa7c
with:
app-name: ${{ env.AZURE_WEBAPP_NAME }}
publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}
Recursos adicionales
Los siguientes recursos también pueden ser útiles:
- Para obtener la plantilla de flujo de trabajo original, vea
azure-webapps-node.yml
en el repositoriostarter-workflows
de GitHub Actions. - La acción que se usa para implementar la aplicación web es la acción
Azure/webapps-deploy
oficial de Azure. - Para obtener más ejemplos de flujos de trabajo de acción de GitHub que se implementan en Azure, vea el repositorio actions-workflow-samples.
- El inicio rápido "Creación de una aplicación web de Node.js en Azure" en la documentación de la aplicación web de Azure muestra el uso de Visual Studio Code con la extensión Azure App Service.