CI/CD パイプラインを設定する

[アーティクル]
05/08/2024

Teams Toolkit を使用して作成された Microsoft Teams アプリ用の継続的インテグレーションおよび継続的デプロイ (CI/CD) パイプラインを設定できます。 Teams アプリの CI/CD パイプラインは、次の 3 つの部分で構成されます。

プロジェクトをビルドします。
プロジェクトをクラウドリソースにデプロイします。
Teams アプリパッケージを生成します。

注:

Teams アプリのパイプラインを作成するには、Azure Web App、Azure Functions、Azure Static Web App などの必要なクラウドリソースを準備し、アプリ設定を構成する必要があります。

プロジェクトをビルドするには、ソースコードをコンパイルし、必要なデプロイ成果物を作成する必要があります。成果物をデプロイするには、次の 2 つの方法があります。

Teams Toolkit CLI を使用して CI/CD パイプラインを設定します。 [推奨]
独自のワークフローを使用して CI/CD パイプラインを設定します。 [省略可能]

Teams Toolkit CLI を使用して CI/CD パイプラインを設定する

注:

Teams Toolkit バージョン 5.6.0 以降を使用します。

Teams Toolkit コマンドラインインターフェイス (CLI) を使用して、Teams アプリの CI/CD パイプラインを設定できます。

前提条件

項目	説明
Teams アプリに必要なリソース (Teams アプリ ID、ボット ID など) を設定します。	• フォルダーの下のファイルからリソースを `manifest.json` 手動で `appPackage` 抽出します。 • Teams Toolkit でコマンドを `Provision` 実行するために自動的に生成します。
Azure リソースを構成する	• フォルダーの下にある bicep ファイルを調べることで、リソースを手動で `infra` 準備します。 • Teams Toolkit のコマンドを使用してリソースを `Provision` 自動的に準備します。
リソースに対するサービスプリンシパルとそのアクセスポリシーが適切に構成されていることを確認します。サービスプリンシパルを次のように設定します。	• Entra ポータルを使用してサービスプリンシパルをCreateします。 • Azure CLI を使用してサービスプリンシパルをCreateします。 `Teamsapp`• コマンドラインインターフェイス (CLI) では、サービスプリンシパルシークレットを使用した Azure ログインがサポートされています。シークレットをCreateし、サービスプリンシパルのクライアント ID、クライアントシークレット、テナント ID を保存します。

前提条件を完了したら、パイプラインを設定しましょう。

GitHub を使用してパイプラインを設定します。
Azure DevOps を使用してパイプラインを設定します。

GitHub を使用してパイプラインを設定する

GitHub でパイプラインを設定するには、次の手順に従います。

Visual Studio Code を開きます。

プロジェクト.github/workflowsのフォルダーにファイルをcd.ymlCreateし、ファイルに次のコードを追加します。

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

注:

既定のパイプラインは、メインブランチでプッシュイベントが発生したときにトリガーされます。特定の要件に合わせて変更することもできます。

GitHub に移動します。
前提条件の間に作成した次の変数とシークレットを更新します。
- AZURE_SERVICE_PRINCIPAL_CLIENT_ID、AZURE_TENANT_ID、および AZURE_SERVICE_PRINCIPAL_CLIENT_SECRET
  
  注:
  
  変数は AZURE_SERVICE_PRINCIPAL_CLIENT_SECRET シークレットとして設定する必要があります。 GitHub 環境を利用して、さまざまな変数セットを使用します。
- ファイルに移動します teamsapp.yml 。ステージでは deploy 、で ${{}} 囲まれた値が必要な変数キーです。 Teams Toolkit のコマンドを provision 使用している場合は、フォルダー内の環境ファイル内の値を .env 見つけることができます。
  
  を BOT_AZURE_APP_SERVICE_RESOURCE_ID リポジトリ変数として設定します。
- ファイルに移動します appPackage/manifest.json 。で ${{}} 囲まれた値は、必要な変数キーです。 Teams Toolkit のコマンドを provision 使用している場合は、フォルダー内の環境ファイル内の値を .env 見つけることができます。
  
  を TEAMS_APP_ID リポジトリ変数として設定します。
GitHub で、リポジトリの [設定] に移動し、[ シークレットと変数>のアクション] を選択します。

次の変数について収集した変数キーを更新します。
- AZURE_SERVICE_PRINCIPAL_CLIENT_ID
- AZURE_TENANT_ID
- AZURE_SERVICE_PRINCIPAL_CLIENT_SECRET
- BOT_AZURE_APP_SERVICE_RESOURCE_ID
- TEAMS_APP_ID
次の 3 つの変数を除き、リポジトリで定義されている変数を yml ファイルに直接追加します。
- AZURE_SERVICE_PRINCIPAL_CLIENT_ID
- AZURE_TENANT_ID
- AZURE_SERVICE_PRINCIPAL_CLIENT_SECRET
パイプラインを実行します。

コードをリポジトリにプッシュしてパイプラインをトリガーします。

注:

env フォルダー内の env ファイルをリポジトリにコミットする必要はありません。 CI/CD パイプラインの実行に必要な env 変数は、リポジトリ変数に既に設定されています。

パイプラインが正常に実行されると、コードが Azure appPackage にデプロイされ、が成果物に生成されていることがログに表示されます。

Azure DevOps を使用してパイプラインを設定する

Azure DevOps を使用してパイプラインを設定するには、次の手順に従います。

Visual Studio Code を開きます。

プロジェクトにファイルをcd.ymlCreateし、ファイルに次のコードを追加します。

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

注:

既定のパイプラインは、メインブランチでプッシュイベントが発生したときにトリガーされます。特定の要件を満たすように変更できます。

コードをリポジトリにプッシュします。
Azure パイプラインをセットアップします。

コードをリポジトリにプッシュした後、[ パイプライン] に移動し、[ 新しいパイプライン] を選択します。リポジトリと既存の yml ファイルを選択して、パイプラインを構成します。
前提条件の間に作成した次の変数とシークレットを更新します。
- AZURE_SERVICE_PRINCIPAL_CLIENT_ID、AZURE_TENANT_ID、および AZURE_SERVICE_PRINCIPAL_CLIENT_SECRET
- ファイルに移動します teamsapp.yml 。ステージでは deploy 、で ${{}} 囲まれた値が必要な変数キーです。 Teams Toolkit のコマンドを provision 使用している場合は、フォルダー内の環境ファイル内の値を .env 見つけることができます。
  
  を BOT_AZURE_APP_SERVICE_RESOURCE_ID リポジトリ変数として設定します。
- ファイルに移動します appPackage/manifest.json 。で ${{}} 囲まれた値は、必要な変数キーです。 Teams Toolkit のコマンドを provision 使用している場合は、フォルダー内の環境ファイル内の値を .env 見つけることができます。
  
  を TEAMS_APP_ID リポジトリ変数として設定します。
リポジトリで次のキー名変数を設定する必要があります。
- AZURE_SERVICE_PRINCIPAL_CLIENT_ID
- AZURE_TENANT_ID
- AZURE_SERVICE_PRINCIPAL_CLIENT_SECRET
- BOT_AZURE_APP_SERVICE_RESOURCE_ID
- TEAMS_APP_ID
パイプラインで変数を設定するには、パイプラインに移動し、[変数の編集>] を選択します。

注:

セキュリティ上の理由から、必要に応じて [ この値のシークレットを保持 する] チェックボックスをオンにします。
パイプラインを実行します。

コードをリポジトリにプッシュしてパイプラインをトリガーします。

注:

env/ フォルダー内の env ファイルをリポジトリにコミットする必要はありません。 CI/CD パイプラインの実行に必要な env 変数は、パイプライン変数で既に確立されています。

パイプラインが正常に実行されると、コードが Azure appPackage にデプロイされ、が成果物に生成されていることがログに表示されます。

独自のワークフローを使用して CI/CD パイプラインを設定する

Teams App CLI がパイプラインの要件を満たしていない場合は、ニーズに合ったカスタムデプロイプロセスを開発できます。このセクションでは、カスタムメソッドを使用した Azure へのデプロイに関するガイダンスを提供します。

注:

Azure リソースにデプロイするための完全な CI/CD パイプラインが既にあり、Teams アプリが実行時に環境変数を読み取る必要がある場合は、Azure リソースの設定でこれらの環境変数を構成します。デプロイ後のテストについては、「 Teams アプリパッケージの生成」を参照してください。

コマンドはteamsapp deploy、ファイルのステージで定義されたアクションをteamsapp.ymldeploy実行します。ステージはdeploy、アクションとアクションでbuilddeploy構成されます。カスタムデプロイ方法を作成するには、特定の要件と設定に基づいてこれらのアクションを書き換えます。

たとえば、基本的なボット TypeScript プロジェクトには、次のデプロイステージがあります 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}}

これらのアクションは、次のタスクを実行します。

とをnpm build実行npm installしてプロジェクトをビルドします。
Azure App Service にコードをデプロイします。

これらのアクションは、CI/CD パイプラインでカスタマイズできます。 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

Teams Toolkit では、さまざまなプログラミング言語で記述され、さまざまな Azure サービスでのホスティング用に設計された Teams アプリプロジェクトがサポートされています。ビルドとデプロイに関する次のアクション。 CI/CD デプロイパイプラインを設定する場合は、これらのアクションを使用します。

ビルド:

言語	GitHub	Azure Pipeline
JS または TS	actions/setup-node	NodeTool@0
C#	actions/setup-dotnet	DotNetCoreCLI@2

展開:

リソース	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

CI/CD を使用してアプリコードを Azure App Service、Azure Functions、または Azure Container App にデプロイする場合は、Azure ログイン用のサービスプリンシパルが必要です。サービスプリンシパルを使用して Azure にログインするには、次の 2 つの方法があります。

OpenID Connect (OIDC):
- GitHub アクションについては、 OpenID Connect で Azure ログインアクションを使用する方法に関するページを参照してください。
- Azure パイプラインについては、ワークロード ID フェデレーションを使用する Azure Resource Manager サービス接続を作成する方法に関するページを参照してください。
シークレット: TeamsApp CLI では、シークレットを使用したサービスプリンシパルを使用したサインインがサポートされています。詳細については、新しいクライアントシークレットを作成する方法に関するページを参照してください。

Teams アプリパッケージを生成する

Teams アプリを配布するには、 appPackage が必要です。 CLI でコマンドを使用して、をappPackage.zipteamsapp package自動的にTeamsapp作成できます。 CLI を使用 Teamsapp できない場合は、次の手順に従って、を手動で作成します appPackage。

フォルダーを appPackage 準備します。
フォルダーに manifest.json ファイルを appPackage 配置します。 Teams Toolkit プロジェクトの既定 manifest.json のファイルには、${{}} で示されるプレースホルダーが含まれています。これらのプレースホルダーを正しい値に置き換えます。
アプリアイコンをフォルダーに appPackage 配置します。アプリアイコンを準備するには、アプリアイコンに関するページを参照してください。
フォルダー内のファイルを appPackage 圧縮します。

次の方法で共有

CI/CD パイプラインを設定する

Teams Toolkit CLI を使用して CI/CD パイプラインを設定する

前提条件

GitHub を使用してパイプラインを設定する

Azure DevOps を使用してパイプラインを設定する

独自のワークフローを使用して CI/CD パイプラインを設定する

Teams アプリパッケージを生成する

関連項目

その他のリソース

次の方法で共有

CI/CD パイプラインを設定する

Teams Toolkit CLI を使用して CI/CD パイプラインを設定する

前提条件

GitHub を使用してパイプラインを設定する

Azure DevOps を使用してパイプラインを設定する

独自のワークフローを使用して CI/CD パイプラインを設定する

Azure へのログインに必要な資格情報

Teams アプリ パッケージを生成する

関連項目

その他のリソース

Teams アプリパッケージを生成する