Configuración de canalizaciones CI/CD

Artículo
10/28/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 configurada correctamente con las directivas de acceso adecuadas en los recursos.	La `Teamsapp` interfaz de línea de comandos (CLI) admite el inicio de sesión de Azure mediante autenticación basada en certificados o autenticación basada en contraseña (secreto de aplicación). Puede crear una entidad de servicio con autenticación basada en certificados y guardar el certificado generado ( `appId` id. de cliente) y `tenant` (identificador de inquilino) o crear un secreto y guardar el identificador de cliente, el secreto de cliente y el identificador de inquilino de la entidad de servicio. Para obtener más información sobre la entidad de servicio, consulte: • Cree una entidad de servicio mediante el portal entra. • Creación de una entidad de servicio mediante la CLI de Azure.

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.

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

Autenticación basada en certificados
Autenticación basada en contraseña

on:
  push:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-latest
    env:
      TEAMSAPP_CLI_VERSION: "3.0.4"
      # 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: Retrieve the secret and decode it to a file
        env:
          CERTIFICATE_BASE64: ${{ secrets.AZURE_SERVICE_PRINCIPAL_CERTIFICATE_BASE64 }}
        run: |
          echo $CERTIFICATE_BASE64 | base64 --decode > cert.pem

      - 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 cert.pem \
          --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

on:
  push:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-latest
    env:
      TEAMSAPP_CLI_VERSION: "3.0.4"
      # 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:
- - Autenticación basada en certificados
  - Autenticación basada en contraseña
  AZURE_SERVICE_PRINCIPAL_CLIENT_ID, AZURE_TENANT_IDy AZURE_SERVICE_PRINCIPAL_CERTIFICATE_BASE64. AZURE_SERVICE_PRINCIPAL_CERTIFICATE_BASE64 es el contenido codificado en la cadena Base64 del certificado que ha generado.
  
  Nota:
  
  La AZURE_SERVICE_PRINCIPAL_CERTIFICATE_BASE64 variable debe establecerse como secreto. Use el entorno de GitHub para diferentes conjuntos de variables.
  
  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 o AZURE_SERVICE_PRINCIPAL_CERTIFICATE_BASE64
- 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 o AZURE_SERVICE_PRINCIPAL_CERTIFICATE_BASE64
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.

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

Autenticación basada en certificados
autenticación basada en contraseñas

trigger:
  - main

pool:
  vmImage: ubuntu-latest

variables:
  TEAMSAPP_CLI_VERSION: 3.0.4

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

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

  - task: DownloadSecureFile@1  
    name: certFile  
    displayName: 'Download Certificate File'  
    inputs:  
      secureFile: 'azure_sp_cert.pem' 

  - script: |
      npx teamsapp auth login azure --username $(AZURE_SERVICE_PRINCIPAL_CLIENT_ID) --service-principal true --tenant $(AZURE_TENANT_ID) --password $(certFile.secureFilePath) --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

trigger:
  - main

pool:
  vmImage: ubuntu-latest

variables:
  TEAMSAPP_CLI_VERSION: 3.0.4

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.
- Autenticación basada en certificados
- Autenticación basada en contraseña
Actualice las siguientes variables y establezca el certificado que ha creado durante los requisitos previos:
- AZURE_SERVICE_PRINCIPAL_CLIENT_ID, AZURE_TENANT_ID
- 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
- 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.

En el proyecto de Azure DevOps, vaya a Biblioteca de canalizaciones> y agregue un nuevo archivo seguro. Cargue el archivo de certificado (.pem) y asígnele el azure_sp_cert.pemnombre .
Actualice las siguientes variables y secretos que ha creado 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 publicar 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 .

Compartir a través de

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

Recursos adicionales

Compartir a través de

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

Recursos adicionales