Configuración de canalizaciones CI/CD

Artículo
05/08/2024

Puede configurar una canalización de integración continua e implementación continua (CI/CD) para aplicaciones de Microsoft Teams creadas con teams Toolkit. Una canalización de CI/CD de aplicaciones de Teams consta de tres partes:

Cree el proyecto.
Implemente el proyecto en recursos en la nube.
Generar paquete de aplicación de Teams.

Nota:

Para crear una canalización para una aplicación de Teams, es necesario preparar los recursos en la nube necesarios, como Azure Web App, Azure Functions o Azure Static Web App, y configurar la configuración de la aplicación.

Para compilar el proyecto, debe compilar el código fuente y crear los artefactos de implementación necesarios. Hay dos métodos para implementar los artefactos:

Configure canalizaciones de CI/CD con la CLI del kit de herramientas de Teams. [Recomendado]
Configure canalizaciones de CI/CD mediante su propio flujo de trabajo. [Opcional]

Configuración de canalizaciones de CI/CD con la CLI del kit de herramientas de Teams

Nota:

Use la versión 5.6.0 o posterior del kit de herramientas de Teams.

Puede usar la interfaz de línea de comandos (CLI) del kit de herramientas de Teams para configurar la canalización de CI/CD para la aplicación de Teams.

Requisitos previos

Elemento	Descripción
Configure los recursos necesarios para la aplicación de Teams, como el identificador de aplicación de Teams, el identificador de bot, etc.	• Extraiga manualmente los recursos del `manifest.json` archivo en la `appPackage` carpeta . • Genere automáticamente para ejecutar el comando en el `Provision` kit de herramientas de Teams.
Configuración de recursos de Azure	• Prepare manualmente los recursos examinando los archivos de bicep en la `infra` carpeta . • Prepare automáticamente los recursos mediante el `Provision` comando del kit de herramientas de Teams.
Asegúrese de que tiene una entidad de servicio y sus directivas de acceso en los recursos están configuradas correctamente. Configure una entidad de servicio como se indica a continuación:	• Create entidad de servicio mediante el portal entra. • Create entidad de servicio mediante la CLI de Azure. • La `Teamsapp` interfaz de línea de comandos (CLI) admite el inicio de sesión de Azure con un secreto de entidad de servicio. Create un secreto y guarde el identificador de cliente, el secreto de cliente y el identificador de inquilino de la entidad de servicio.

Una vez completados los requisitos previos, vamos a configurar una canalización:

Configure la canalización con GitHub.
Configuración de la canalización con Azure DevOps.

Configuración de la canalización con GitHub

Para configurar la canalización con GitHub, siga estos pasos:

Abrir Visual Studio Code.

Create un cd.yml archivo del proyecto en .github/workflows la carpeta y agregue el código siguiente en el archivo:

on:
  push:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-latest
    env:
      TEAMSAPP_CLI_VERSION: "3.0.0"
      # Add extra environment variables here so that teamsapp cli can use them.

    steps:
      - name: "Checkout GitHub Action"
        uses: actions/checkout@v4

      - name: Setup Node 20.x
        uses: actions/setup-node@v1
        with:
          node-version: "20.x"

      - name: install cli
        run: |
          npm install @microsoft/teamsapp-cli@${{env.TEAMSAPP_CLI_VERSION}}

      - name: Login Azure by service principal
        run: |
          npx teamsapp auth login azure --username ${{vars.AZURE_SERVICE_PRINCIPAL_CLIENT_ID}}  \
          --service-principal true \
          --tenant ${{vars.AZURE_TENANT_ID}} \
          --password ${{secrets.AZURE_SERVICE_PRINCIPAL_CLIENT_SECRET }} \
          --interactive false

      - name: Deploy to hosting environment
        run: |
          npx teamsapp deploy --ignore-env-file true \
          --interactive false

      - name: Package app
        run: |
          npx teamsapp package

      - name: upload appPackage
        uses: actions/upload-artifact@v4
        with:
          name: artifact
          path: appPackage/build/appPackage.zip

Nota:

La canalización predeterminada se desencadena cuando se producen eventos de inserción en la rama principal. Tiene la opción de modificarlo para que se adapte a sus requisitos específicos.

Vaya a GitHub.
Actualice las siguientes variables y secretos que creó durante los requisitos previos:
- AZURE_SERVICE_PRINCIPAL_CLIENT_ID, AZURE_TENANT_ID y AZURE_SERVICE_PRINCIPAL_CLIENT_SECRET
  
  Nota:
  
  La AZURE_SERVICE_PRINCIPAL_CLIENT_SECRET variable debe establecerse como secreto. Use el entorno de GitHub para usar diferentes conjuntos de variables.
- Vaya al teamsapp.yml archivo. En la deploy fase, los valores incluidos en ${{}} son las claves de variable necesarias. Si ha usado el provision comando del kit de herramientas de Teams, puede buscar los valores en los archivos de entorno de la .env carpeta.
  
  Establezca como BOT_AZURE_APP_SERVICE_RESOURCE_ID variable de repositorio:
- Vaya al appPackage/manifest.json archivo. Los valores incluidos en ${{}} son las claves de variable necesarias. Si ha usado el provision comando del kit de herramientas de Teams, puede buscar los valores en los archivos de entorno de la .env carpeta.
  
  Establezca como TEAMS_APP_ID variable de repositorio:
En GitHub, vaya a la configuración del repositorio y seleccione Secretos y variables>Acciones.

Actualice las claves de variable que ha recopilado para las siguientes variables:
- AZURE_SERVICE_PRINCIPAL_CLIENT_ID
- AZURE_TENANT_ID
- AZURE_SERVICE_PRINCIPAL_CLIENT_SECRET
- BOT_AZURE_APP_SERVICE_RESOURCE_ID
- TEAMS_APP_ID
Agregue las variables definidas en el repositorio directamente al archivo yml, excepto las tres variables siguientes:
- AZURE_SERVICE_PRINCIPAL_CLIENT_ID
- AZURE_TENANT_ID
- AZURE_SERVICE_PRINCIPAL_CLIENT_SECRET
Ejecute la canalización.

Inserte código en el repositorio para desencadenar la canalización.

Nota:

No es necesario confirmar archivos env en la carpeta env en el repositorio. Las variables de desarrollo necesarias para ejecutar la canalización de CI/CD ya están establecidas en las variables del repositorio.

Una vez que la canalización se ejecuta correctamente, el registro muestra que el código se implementa en Azure y que appPackage se genera en los artefactos.

Configuración de la canalización con Azure DevOps

Para configurar la canalización con Azure DevOps, siga estos pasos:

Abrir Visual Studio Code.

Create un cd.yml archivo en el proyecto y agregue el código siguiente en el archivo:

trigger:
  - main

pool:
  vmImage: ubuntu-latest

variables:
  TEAMSAPP_CLI_VERSION: 3.0.0

steps:
  - task: NodeTool@0
    inputs:
      versionSpec: "20"
      checkLatest: true

  - script: |
      npm install @microsoft/teamsapp-cli@$(TEAMSAPP_CLI_VERSION)
    displayName: "Install CLI"

  - script: |
      npx teamsapp auth login azure --username $(AZURE_SERVICE_PRINCIPAL_CLIENT_ID) --service-principal true --tenant $(AZURE_TENANT_ID) --password $(AZURE_SERVICE_PRINCIPAL_CLIENT_SECRET) --interactive false
    displayName: "Login Azure by service principal"

  - script: |
      npx teamsapp deploy --ignore-env-file true --interactive false
    displayName: "Deploy to Azure"
    workingDirectory: $(System.DefaultWorkingDirectory)

  - script: |
      npx teamsapp package
    displayName: "Package app"
    workingDirectory: $(System.DefaultWorkingDirectory)

  - publish: $(System.DefaultWorkingDirectory)/appPackage/build/appPackage.zip
    artifact: artifact

Nota:

La canalización predeterminada se desencadena cuando se producen eventos de inserción en la rama principal. Puede modificarlo para cumplir sus requisitos específicos.

Inserte el código en el repositorio.
Configuración de la canalización de Azure.

Después de insertar el código en el repositorio, vaya a Canalizaciones y seleccione Nueva canalización. Seleccione el repositorio y el archivo yml existente para configurar la canalización.
Actualice las siguientes variables y secretos que creó durante los requisitos previos:
- AZURE_SERVICE_PRINCIPAL_CLIENT_ID, AZURE_TENANT_ID y AZURE_SERVICE_PRINCIPAL_CLIENT_SECRET
- Vaya al teamsapp.yml archivo. En la deploy fase, los valores incluidos en ${{}} son las claves de variable necesarias. Si ha usado el provision comando del kit de herramientas de Teams, puede buscar los valores en los archivos de entorno de la .env carpeta.
  
  Establezca como BOT_AZURE_APP_SERVICE_RESOURCE_ID variable de repositorio:
- Vaya al appPackage/manifest.json archivo. Los valores incluidos en ${{}} son las claves de variable necesarias. Si ha usado el provision comando del kit de herramientas de Teams, puede buscar los valores en los archivos de entorno de la .env carpeta.
  
  Establezca como TEAMS_APP_ID variable de repositorio:
Debe establecer las siguientes variables de nombre de clave en el repositorio:
- AZURE_SERVICE_PRINCIPAL_CLIENT_ID
- AZURE_TENANT_ID
- AZURE_SERVICE_PRINCIPAL_CLIENT_SECRET
- BOT_AZURE_APP_SERVICE_RESOURCE_ID
- TEAMS_APP_ID
Para establecer variables en la canalización, vaya a la canalización y seleccione Editar>variables.

Nota:

Por motivos de seguridad, active la casilla Mantener este secreto de valor si es necesario.
Ejecute la canalización.

Inserte código en el repositorio para desencadenar la canalización.

Nota:

No es necesario confirmar archivos env en env/folder en el repositorio. Las variables de desarrollo necesarias para ejecutar la canalización de CI/CD ya están establecidas en las variables de canalización.

Una vez que la canalización se ejecuta correctamente, el registro muestra que el código se implementa en Azure y que appPackage se genera en los artefactos.

Configuración de canalizaciones de CI/CD mediante su propio flujo de trabajo

Si la CLI de aplicaciones de Teams no cumple los requisitos de canalización, puede desarrollar un proceso de implementación personalizado que se adapte a sus necesidades. En esta sección se proporcionan instrucciones sobre la implementación en Azure con métodos personalizados.

Nota:

Si ya tiene una canalización de CI/CD completa para la implementación en el recurso de Azure y la aplicación de Teams debe leer las variables de entorno durante el tiempo de ejecución, configure estas variables de entorno en la configuración del recurso de Azure. Para las pruebas posteriores a la implementación, consulte Generación del paquete de aplicaciones de Teams.

El teamsapp deploy comando ejecuta las acciones definidas en la deploy fase del teamsapp.yml archivo. La deploy fase consta de build acciones y deploy . Para crear un método de implementación personalizado, vuelva a escribir estas acciones en función de sus requisitos y preferencias específicos.

Por ejemplo, un proyecto de TypeScript de bot básico tiene la siguiente fase de implementación en su teamsapp.yml:

deploy:
  # Run npm command
  - uses: cli/runNpmCommand
    name: install dependencies
    with:
      args: install
  - uses: cli/runNpmCommand
    name: build app
    with:
      args: run build --if-present
  # Deploy your application to Azure App Service using the zip deploy feature.
  # For additional details, refer to this link.
  - uses: azureAppService/zipDeploy
    with:
      # Deploy base folder
      artifactFolder: .
      # Ignore file location, leave blank will ignore nothing
      ignoreFile: .webappignore
      # The resource id of the cloud resource to be deployed to.
      # This key will be generated by arm/deploy action automatically.
      # You can replace it with your existing Azure Resource id
      # or add it to your environment variable file.
      resourceId: ${{BOT_AZURE_APP_SERVICE_RESOURCE_ID}}

Estas acciones realizan las siguientes tareas:

Ejecute npm install y npm build para compilar el proyecto.
Implemente código en Azure App Service.

Puede personalizar estas acciones en la canalización de CI/CD. Este es un ejemplo que usa las acciones de GitHub:

# build
- name: Setup Node 20.x
  uses: actions/setup-node@v1
  with:
    node-version: '20.x'
- name: 'npm install, build'
  run: |
    npm install
    npm run build --if-present

- name: 'zip artifact for deployment'
  run: |
    zip -r deploy.zip . --include 'node_modules/*' 'lib/*' 'web.config'

# deploy
- name: 'Login via Azure CLI'
  uses: azure/login@v1
  with:
    client-id: ${{ vars.CLIENT_ID }}
    tenant-id: ${{ vars.TENANT_ID }}
    subscription-id: ${{ vars.SUBSCRIPTION_ID }}

- name: 'Run Azure webapp deploy action using azure RBAC'
  uses: azure/webapps-deploy@v2
  with:
    app-name: ${{ vars.AZURE_WEBAPP_NAME }}
    package: deploy.zip

El kit de herramientas de Teams admite proyectos de aplicaciones de Teams, escritos en varios lenguajes de programación y diseñados para hospedarse en diferentes servicios de Azure. Las siguientes acciones para compilar e implementar. Use estas acciones al establecer canalizaciones de implementación de CI/CD.

Compilación:

Idioma	GitHub	Azure Pipeline
JS o TS	actions/setup-node	NodeTool@0
C#	actions/setup-dotnet	DotNetCoreCLI@2

Implementar:

Recurso	GitHub	Azure Pipeline
Azure App Service	azure/webapps-deploy	AzureWebApp@1
Azure Functions	Azure/functions-action	AzureFunctionApp@2
Azure Static Web Apps	Azure/static-web-apps-deploy	AzureStaticWebApp@0

Al implementar código de aplicación en Azure App Service, Azure Functions o Azure Container App a través de CI/CD, necesita una entidad de servicio para el inicio de sesión de Azure. Puede iniciar sesión en Azure mediante una entidad de servicio de dos maneras:

OpenID Connect (OIDC):
- Para ver la acción de GitHub, consulte cómo usar la acción de inicio de sesión de Azure con OpenID Connect.
- Para la canalización de Azure, consulte cómo crear una conexión de servicio de Azure Resource Manager que use la federación de identidades de carga de trabajo.
Secreto: la CLI de TeamsApp admite el inicio de sesión con una entidad de servicio con un secreto. Para obtener más información, consulte cómo crear un nuevo secreto de cliente.

Generación de un paquete de aplicación de Teams

Para distribuir la appPackage aplicación de Teams, es necesario. Puede crear automáticamente mediante el comando en Teamsapp la appPackage.zipteamsapp package CLI. Si no puede usar Teamsapp la CLI, siga estos pasos para crear manualmente :appPackage

Prepare una appPackage carpeta.
Coloque el manifest.json archivo en la appPackage carpeta . El archivo predeterminado manifest.json del proyecto kit de herramientas de Teams contiene marcadores de posición, indicados por ${{}}. Reemplace estos marcadores de posición por los valores correctos.
Coloque los iconos de la aplicación en la appPackage carpeta . Para preparar el icono de la aplicación, consulta iconos de la aplicación.
Comprima los archivos de la appPackage carpeta .

Configuración de canalizaciones CI/CD

Configuración de canalizaciones de CI/CD con la CLI del kit de herramientas de Teams

Requisitos previos

Configuración de la canalización con GitHub

Configuración de la canalización con Azure DevOps

Configuración de canalizaciones de CI/CD mediante su propio flujo de trabajo

Generación de un paquete de aplicación de Teams

Consulte también

Comentarios

Recursos adicionales

Configuración de canalizaciones CI/CD

Configuración de canalizaciones de CI/CD con la CLI del kit de herramientas de Teams

Requisitos previos

Configuración de la canalización con GitHub

Configuración de la canalización con Azure DevOps

Configuración de canalizaciones de CI/CD mediante su propio flujo de trabajo

Credencial necesaria para iniciar sesión en Azure

Generación de un paquete de aplicación de Teams

Consulte también

Comentarios

Recursos adicionales