Freigeben über


Einrichten von CI/CD-Pipelines

Sie können eine CI/CD-Pipeline (Continuous Integration und Continuous Deployment) für Microsoft Teams-Apps einrichten, die mit dem Teams-Toolkit erstellt wurden. Eine CI/CD-Pipeline einer Teams-App besteht aus drei Teilen:

  1. Erstellen Sie das Projekt.

  2. Stellen Sie das Projekt in Cloudressourcen bereit.

  3. Generieren sie das Teams-App-Paket.

Hinweis

Um eine Pipeline für eine Teams-App zu erstellen, müssen die erforderlichen Cloudressourcen wie Azure-Web-App, Azure Functions oder Azure Static Web App vorbereitet und die App-Einstellungen konfiguriert werden.

Zum Erstellen des Projekts müssen Sie den Quellcode kompilieren und die erforderlichen Bereitstellungsartefakte erstellen. Es gibt zwei Methoden zum Bereitstellen der Artefakte:

Einrichten von CI/CD-Pipelines mit der Teams-Toolkit-CLI

Hinweis

Verwenden Sie Teams Toolkit Version 5.6.0 oder höher.

Sie können die Befehlszeilenschnittstelle (CLI) des Teams-Toolkits verwenden, um die CI/CD-Pipeline für Ihre Teams-App einzurichten.

Voraussetzungen

Item Beschreibung
Richten Sie die erforderlichen Ressourcen für Ihre Teams-App ein, z. B. Teams-App-ID, Bot-ID usw. • Extrahieren Sie die Ressourcen manuell aus der manifest.json Datei unter dem appPackage Ordner.
• Automatisches Generieren, um den Provision Befehl im Teams-Toolkit auszuführen.
Konfigurieren von Azure-Ressourcen • Bereiten Sie die Ressourcen manuell vor, indem Sie die Bicep-Dateien unter dem infra Ordner untersuchen.
• Automatisches Vorbereiten der Ressourcen mithilfe des Provision Befehls im Teams-Toolkit.
Stellen Sie sicher, dass Sie über einen ordnungsgemäß konfigurierten Dienstprinzipal mit entsprechenden Zugriffsrichtlinien für Ressourcen verfügen. Die Teamsapp Befehlszeilenschnittstelle (CLI) unterstützt die Azure-Anmeldung über zertifikatbasierte Authentifizierung oder kennwortbasierte Authentifizierung (Anwendungsgeheimnis). Sie können entweder einen Dienstprinzipal mit zertifikatbasierter Authentifizierung erstellen und das generierte Zertifikat appId (Client-ID) und tenant (Mandanten-ID) speichern oder ein Geheimnis erstellen und die Client-ID, den geheimen Clientschlüssel und die Mandanten-ID des Dienstprinzipals speichern.
Screenshot: Dienstprinzipalgeheimnis
Weitere Informationen zum Dienstprinzipal finden Sie unter:
Erstellen eines Dienstprinzipals über das Entra-Portal.
Erstellen eines Dienstprinzipals mithilfe der Azure CLI

Nachdem Sie die Voraussetzungen erfüllt haben, richten Sie eine Pipeline ein:

Einrichten der Pipeline mit GitHub

Führen Sie die folgenden Schritte aus, um die Pipeline mit GitHub einzurichten:

  1. Öffnen Sie Visual Studio Code.

  2. Erstellen Sie eine cd.yml Datei in Ihrem Projekt unter .github/workflows dem Ordner, und fügen Sie den folgenden Code in der Datei hinzu:

    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
    
  3. Wechseln Sie zu GitHub.

  4. Aktualisieren Sie die folgenden Variablen und Geheimnisse, die Sie während der Voraussetzungen erstellt haben:

    • AZURE_SERVICE_PRINCIPAL_CLIENT_ID, AZURE_TENANT_IDund AZURE_SERVICE_PRINCIPAL_CERTIFICATE_BASE64. AZURE_SERVICE_PRINCIPAL_CERTIFICATE_BASE64 ist der Base64-Zeichenfolgencodierte Inhalt des Zertifikats, das Sie generiert haben.

      Screenshot: Repositoryeinstellungen

      Hinweis

      Die AZURE_SERVICE_PRINCIPAL_CERTIFICATE_BASE64 Variable muss als Geheimnis festgelegt werden. Verwenden Sie die GitHub-Umgebung für verschiedene Variablensätze.

    • Wechseln Sie zur teamsapp.yml Datei. In der deploy Phase sind die in ${{}} eingeschlossenen Werte die erforderlichen Variablenschlüssel. Wenn Sie den provision Befehl aus Teams Toolkit verwendet haben, können Sie die Werte in den Umgebungsdateien im .env Ordner suchen.

      Legen Sie die BOT_AZURE_APP_SERVICE_RESOURCE_ID als Repositoryvariable fest:

      Screenshot: Azure App Service-Ressourcen-ID des Bots in teamsapp.yml Datei

    • Wechseln Sie zur appPackage/manifest.json Datei. Die in ${{}} eingeschlossenen Werte sind die erforderlichen Variablenschlüssel. Wenn Sie den provision Befehl aus Teams Toolkit verwendet haben, können Sie die Werte in den Umgebungsdateien im .env Ordner suchen.

      Legen Sie die TEAMS_APP_ID als Repositoryvariable fest:

      Screenshot: Teams-App-ID in der Manifestdatei

  5. Navigieren Sie auf GitHub zu den Einstellungen Ihres Repositorys, und wählen Sie Geheimnisse und Variablen>Aktionen aus.

    Aktualisieren Sie die Variablenschlüssel, die Sie für die folgenden Variablen gesammelt haben:

    • AZURE_SERVICE_PRINCIPAL_CLIENT_ID
    • AZURE_TENANT_ID
    • AZURE_SERVICE_PRINCIPAL_CLIENT_SECRET oder AZURE_SERVICE_PRINCIPAL_CERTIFICATE_BASE64
    • BOT_AZURE_APP_SERVICE_RESOURCE_ID
    • TEAMS_APP_ID

    Fügen Sie die in Ihrem Repository definierten Variablen direkt ihrer yml-Datei hinzu, ohne die folgenden drei Variablen:

    • AZURE_SERVICE_PRINCIPAL_CLIENT_ID

    • AZURE_TENANT_ID

    • AZURE_SERVICE_PRINCIPAL_CLIENT_SECRET oder AZURE_SERVICE_PRINCIPAL_CERTIFICATE_BASE64

      Screenshot: geänderte Pipeline-yml.

  6. Führen Sie die Pipeline aus.

    Pushen Sie Code in das Repository, um die Pipeline auszulösen.

    Hinweis

    Sie müssen keine env-Dateien im Ordner "env" in das Repository committen. Die zum Ausführen der CI/CD-Pipeline erforderlichen env-Variablen sind bereits in den Repositoryvariablen festgelegt.

    Nachdem die Pipeline erfolgreich ausgeführt wurde, zeigt das Protokoll an, dass der Code in Azure bereitgestellt und in appPackage den Artefakten generiert wird.

    Screenshot:

Einrichten einer Pipeline mit Azure DevOps

Führen Sie die folgenden Schritte aus, um die Pipeline mit Azure DevOps einzurichten:

  1. Öffnen Sie Visual Studio Code.

  2. Erstellen Sie eine cd.yml Datei in Ihrem Projekt, und fügen Sie der Datei den folgenden Code hinzu:

    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
    
  3. Pushen Sie den Code in das Repository.

  4. Richten Sie die Azure-Pipeline ein.

    Nachdem Sie Ihren Code an das Repository gepusht haben, navigieren Sie zu Pipelines , und wählen Sie Neue Pipeline aus. Wählen Sie Ihr Repository und die vorhandene yml-Datei aus, um Ihre Pipeline zu konfigurieren.

  5. Aktualisieren Sie die folgenden Variablen, und legen Sie das Zertifikat fest, das Sie während der Voraussetzungen erstellt haben:

    • AZURE_SERVICE_PRINCIPAL_CLIENT_ID, AZURE_TENANT_ID

    • Wechseln Sie zur teamsapp.yml Datei. In der deploy Phase sind die in ${{}} eingeschlossenen Werte die erforderlichen Variablenschlüssel. Wenn Sie den provision Befehl aus Teams Toolkit verwendet haben, können Sie die Werte in den Umgebungsdateien im .env Ordner suchen.

      Legen Sie die BOT_AZURE_APP_SERVICE_RESOURCE_ID als Repositoryvariable fest:

      Screenshot: Azure App Service-Ressourcen-ID des Bots in teamsapp.yml Datei

    • Wechseln Sie zur appPackage/manifest.json Datei. Die in ${{}} eingeschlossenen Werte sind die erforderlichen Variablenschlüssel. Wenn Sie den provision Befehl aus Teams Toolkit verwendet haben, können Sie die Werte in den Umgebungsdateien im .env Ordner suchen.

      Legen Sie die TEAMS_APP_ID als Repositoryvariable fest:

      Screenshot: Teams-App-ID in der Manifestdatei

    Sie müssen die folgenden Schlüsselnamenvariablen im Repository festlegen:

    • AZURE_SERVICE_PRINCIPAL_CLIENT_ID
    • AZURE_TENANT_ID
    • BOT_AZURE_APP_SERVICE_RESOURCE_ID
    • TEAMS_APP_ID

    Um Variablen in Ihrer Pipeline festzulegen, wechseln Sie zu Ihrer Pipeline, und wählen SieVariablenbearbeiten> aus.

    Navigieren Sie in Ihrem Azure DevOps-Projekt zu Pipelines-Bibliothek>, und fügen Sie eine neue sichere Datei hinzu. Laden Sie die Zertifikatdatei (.pem) hoch, und benennen Sie die Datei als azure_sp_cert.pem.

  6. Führen Sie die Pipeline aus.

    Pushen Sie Code in das Repository, um die Pipeline auszulösen.

    Hinweis

    Es ist nicht erforderlich, env-Dateien im Ordner env/ in das Repository zu committen. Die zum Ausführen der CI/CD-Pipeline erforderlichen env-Variablen sind bereits in den Pipelinevariablen eingerichtet.

    Nachdem die Pipeline erfolgreich ausgeführt wurde, zeigt das Protokoll an, dass der Code in Azure bereitgestellt und in appPackage den Artefakten generiert wird.

    Screenshot: Erfolgreiche Ausführung der Pipeline

Einrichten von CI/CD-Pipelines mit Ihrem eigenen Workflow

Wenn die Teams-App-CLI Ihre Pipelineanforderungen nicht erfüllt, können Sie einen benutzerdefinierten Bereitstellungsprozess entwickeln, der Ihren Anforderungen entspricht. Dieser Abschnitt enthält Anleitungen zur Bereitstellung in Azure mit benutzerdefinierten Methoden.

Hinweis

Wenn Sie bereits über eine vollständige CI/CD-Pipeline für die Bereitstellung in Ihrer Azure-Ressource verfügen und Ihre Teams-App Während der Laufzeit Umgebungsvariablen lesen muss, konfigurieren Sie diese Umgebungsvariablen in den Einstellungen Ihrer Azure-Ressource. Informationen zu Tests nach der Bereitstellung finden Sie unter Generieren eines Teams-App-Pakets.

Der teamsapp deploy Befehl führt die in der deploy Dateiphase teamsapp.yml definierten Aktionen aus. Die deploy Phase besteht aus - und deploy -buildAktionen. Um eine benutzerdefinierte Bereitstellungsmethode zu erstellen, schreiben Sie diese Aktionen basierend auf Ihren spezifischen Anforderungen und Einstellungen neu.

Beispielsweise verfügt ein grundlegendes Bot-TypeScript-Projekt über die folgende Bereitstellungsphase in seinem 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}}

Diese Aktionen führen die folgenden Aufgaben aus:

  • Führen Sie npm install und npm build aus, um das Projekt zu erstellen.
  • Bereitstellen von Code in Azure App Service

Sie können diese Aktionen in Ihrer CI/CD-Pipeline anpassen. Hier sehen Sie ein Beispiel, in dem die Aktionen von GitHub verwendet werden:

# 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

Das Teams-Toolkit unterstützt Teams-App-Projekte, die in verschiedenen Programmiersprachen geschrieben und für das Hosting in verschiedenen Azure-Diensten entwickelt wurden. Die folgenden Aktionen zum Erstellen und Bereitstellen. Verwenden Sie diese Aktionen beim Festlegen von CI/CD-Bereitstellungspipelines.

Erstellen Sie:

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

Bereitstellen:

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

Für die Anmeldung bei Azure erforderliche Anmeldeinformationen

Wenn Sie App-Code für Azure App Service, Azure Functions oder Azure Container App über CI/CD bereitstellen, benötigen Sie einen Dienstprinzipal für die Azure-Anmeldung. Sie können sich mit einem Dienstprinzipal auf zwei Arten bei Azure anmelden:

Generieren eines Teams-App-Pakets

Um Ihre Teams-App zu verteilen, ist erforderlich appPackage . Sie können die mithilfe des appPackage.zip Befehls in Teamsapp der teamsapp package CLI automatisch erstellen. Wenn Sie die CLI nicht verwenden Teamsapp können, führen Sie die folgenden Schritte aus, um manuell zu erstellen appPackage:

  1. Bereiten Sie einen Ordner vor appPackage .
  2. Speichern Sie die manifest.json Datei im appPackage Ordner. Die Standarddatei manifest.json im Teams Toolkit-Projekt enthält Platzhalter, die durch ${}{} gekennzeichnet sind. Ersetzen Sie diese Platzhalter durch die richtigen Werte.
  3. Platzieren Sie Ihre App-Symbole im appPackage Ordner. Informationen zum Vorbereiten des App-Symbols finden Sie unter App-Symbole.
  4. Zippen Sie die Dateien im appPackage Ordner.

Siehe auch