次の方法で共有

Teams Toolkit プロジェクトを 17.9 から 17.10 以降のバージョンに移行する

このガイドでは、従来のスキャフォールディングされたテンプレートから、Microsoft Teamsの新しいプロジェクト構造に移行するプロセスについて詳しく説明します。 移行は、最新の機能を使用し、プロジェクトの保守性を向上させるために不可欠です。 新しいプロジェクト構造により、新しいプロジェクトの種類を表す .ttkproj ファイルを使用して Teams アプリケーションを管理する、より効率的で効率的な方法が導入されます。

新しい Teams Toolkit バージョン 17.10 では、Teams ソリューションに Teams プロジェクトとソース コードの 2 つのプロジェクトが含まれています。

  • Teams プロジェクト: Teams プロジェクトには、Teams アプリ パッケージと Teams Toolkit 構成ファイルが含まれています。
  • ソース コード: ソース コード プロジェクトは、タブ、ボットなどのビジネス ロジックです。

Teams プロジェクトとソース コードを分離することで、既存の Web またはボット ソリューションを Teams に統合できます。 この方法により、既存のプロジェクトまたはソリューションを Teams と統合するプロセスが簡略化されます。

前提条件

移行プロセスを開始する前に、次のことを確認してください。

  • Teams Toolkit for Visual Studio 17.9 以前のバージョンを使用して作成された Teams プロジェクト。
  • Visual Studio バージョン 17.10 Preview 3 以降。
  • 複数のスタートアップ機能。 複数のスタートアップを有効にするには、 ツール>Options>Preview Feature>Enable Multi-Project Launch Profiles に移動します。

移行のプロセス

次の手順を実行して、新しいプロジェクト構造に移行します。

  1. Visual Studio ソリューション ファイルがある Teams プロジェクト フォルダーで、新しいフォルダーを作成します。 このフォルダーの名前は、以降の手順で TeamsApp と呼ばれます。

  2. TeamsApp フォルダーに TeamsApp.ttkprojファイルを作成します。プロジェクト ファイル名は新しいフォルダー名と一致している必要があります。 TeamsApp.ttkproj ファイルに次のコードを追加します。

    <?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="15.0" Sdk="Microsoft.TeamsFx.Sdk">
  <ItemGroup>
    <ProjectCapability Include="ProjectConfigurationsDeclaredDimensions" />
  </ItemGroup>
</Project>

  3. プロジェクト フォルダーから次の構成フォルダーとファイルを削除し、 TeamsApp フォルダーに追加します。

    • フォルダー: appPackage、 env、 infra
    • ファイル: teamsapp.yml、 teamsapp.local.yml、 aad.manifest.json

    注:

    フォルダーとファイルが移動されると、フォルダーとファイルは TeamsApp.ttkproj ファイルに自動的に含まれ、 手動で TeamsApp.ttkproj に追加する必要はありません。

  4. launchSettings.jsonに従って、起動ブラウザーまたはテスト ツールの機能を TeamsApp フォルダーのlaunchSettings.jsonに移動します。

    • TeamsApp フォルダーにlaunchSettings.json ファイルを作成します。 プロジェクト フォルダーのファイル launchSettings.jsonの内容を、TeamsApp フォルダー内の新しく作成されたlaunchSettings.jsonに追加します。
    • TeamsApp フォルダーの新しく作成したlaunchSettings.jsonで、dotnetRunMessages、launchBrowser、applicationUrl、environmentVariables、hotReloadProfileの各フィールドを削除します。
    • プロジェクト フォルダーの launchSettings.json で、 launchBrowser、 launchTestTool、および launchUrl フィールドと重複したプロファイルを削除します。

    注:

    • プロジェクトの launchSettings.json は、単独で開始する必要があります。
    • TeamsApp フォルダーのlaunchSettings.jsonは、ブラウザーまたはプロジェクトと通信するテスト ツール アプリを起動するように構成されています。

  5. Visual Studio バージョン 17.10 Preview 3 以降を使用してソリューション ファイルを開き、TeamsApp フォルダーから Visual Studio のソリューション ファイルに新しいプロジェクト TeamsApp.ttkprojを追加します。

  6. プロジェクト内の <ProjectCapability Include="TeamsFx"/> を削除します。

  7. {{solutionName}}.slnLaunch.user ファイルを作成します。 このファイルは、VS または手動で作成できます。

    1. ソリューションを右クリックし、[スタートアップ プロジェクトの構成]を選択 します。...
    2. [ 複数の開始プロジェクト ] を選択し、 TeamsApp とプロジェクトを同時に開始するプロファイルを追加します。 プロファイルの名前は必要に応じて変更できます。
    3. [OK] を選択します。 {{solutionName}}.slnLaunch.user ファイルはソリューション フォルダーに自動的に保存されます。

  8. TeamsApp フォルダー内のteamsapp.local.ymlファイルとteamsapp.yml ファイルを変更します。

  9. パスが更新されるため、プロジェクトを変更するすべてのアクションを更新する必要があります。 次のアクションに焦点を当てます。

    • uses: file/createOrUpdateJsonFile: このアクションにより、プロジェクトの appSettings.json ファイルが変更され、ランタイム環境が構成される場合があります。 target フィールドを正しいパスに更新します。

      重要

      file/createOrUpdateJsonFileを使用してlaunchSettings.jsonを変更する必要はありません。 teamsapp.local.ymlに存在する場合は、削除します。

    • uses: cli/runDotnetCommand: このアクションは、プロジェクト内で .NET コマンドを実行してパッケージ化します。 workingDirectory フィールドを新しいパスに調整し、正しい.csproj パスでコマンド文字列を更新します。
    • uses: azureAppService/zipDeploy: このアクションは、パッケージ化されたファイルをリモートでデプロイします。 workingDirectory フィールドを正しいパスに更新します。

    YAML 構成を変更する方法の例を次に示します。

    # For example:
# Generate runtime appsettings to JSON file
- uses: file/createOrUpdateJsonFile
  with:
    target: ../MyTeamsApp8/appsettings.Development.json
    content:
      TeamsFx:
        Authentication:
        ClientId: ${{AAD_APP_CLIENT_ID}}
        ClientSecret: ${{SECRET_AAD_APP_CLIENT_SECRET}}
        InitiateLoginEndpoint: ${{TAB_ENDPOINT}}/auth-start.html
        OAuthAuthority: ${{AAD_APP_OAUTH_AUTHORITY}}

# Triggered when 'teamsapp deploy' is executed
deploy:
- uses: cli/runDotnetCommand
  with:
    args: publish --configuration Release MyTeamsApp8.csproj
    workingDirectory: ../MyTeamsApp8

# Deploy your application to Azure App Service using the zip deploy feature.
# For additional details, refer to https://aka.ms/zip-deploy-to-app-services.
- uses: azureAppService/zipDeploy
  with:
    # Deploy base folder
    artifactFolder: bin/Release/net8.0/publish
    # 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: ${{TAB_AZURE_APP_SERVICE_RESOURCE_ID}}
    workingDirectory: ../MyTeamsApp8

    注:

    アプリをテストするために、新しいプロジェクト フォルダーにプロビジョニングしてデプロイすることを再コメントします。

  10. ソリューションを閉じ、すべての変更が保存されていることを確認します。

プロジェクトが正常に移行され、フォルダー構造が次のように更新されます。

問題が発生しました

フォルダー構造
プロジェクトの種類ファイル

このファイル拡張子は .ttkproj です。

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="15.0" Sdk="Microsoft.TeamsFx.Sdk">
  <PropertyGroup Label="Globals">
    <ProjectGuid>f05bbd29-f3bc-4bb8-8f1f-842235db6b49</ProjectGuid>
  </PropertyGroup>
  <ItemGroup>
    <ProjectCapability Include="ProjectConfigurationsDeclaredDimensions" />
  </ItemGroup>
</Project>
LaunchSettings.json

次のコードは、C# プロジェクトのサンプルです。

{
  "profiles": {
    "Start Project": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "applicationUrl": "https://localhost:44302;http://localhost:2544",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "hotReloadProfile": "aspnetcore"
    }
  }
}

次のコードは、TeamsApp プロジェクトのサンプルです。

{
  "profiles": {
    // Debug project within Teams
    "Microsoft Teams (browser)": {
      "commandName": "Project",
      "launchUrl": "https://teams.microsoft.com/l/app/${{TEAMS_APP_ID}}?installAppPackage=true&webjoin=true&appTenantId=${{TEAMS_APP_TENANT_ID}}&login_hint=${{TEAMSFX_M365_USER_NAME}}",
    },
    // Debug project within Microsoft 365
    "Microsoft 365 app (browser)": {
      "commandName": "Project",
      "launchUrl": "https://www.office.com/m365apps/${{M365_APP_ID}}?auth=2&login_hint=${{TEAMSFX_M365_USER_NAME}}",
    },
    // Debug project within Outlook
    "Outlook (browser)": {
      "commandName": "Project",
      "launchUrl": "https://outlook.office.com/host/${{M365_APP_ID}}?login_hint=${{TEAMSFX_M365_USER_NAME}}",
    }
  }
}
Teams アプリ YAML ファイル

次のコードは、teamapp.local.ymlのサンプルです。

# Generate runtime appsettings to JSON file
  - uses: file/createOrUpdateJsonFile
    with:
      target: ../MyTeamsApp8/appsettings.Development.json
      content:
        TeamsFx:
          Authentication:
            ClientId: ${{AAD_APP_CLIENT_ID}}
            ClientSecret: ${{SECRET_AAD_APP_CLIENT_SECRET}}
            InitiateLoginEndpoint: ${{TAB_ENDPOINT}}/auth-start.html
            OAuthAuthority: ${{AAD_APP_OAUTH_AUTHORITY}}

次のコードは、teamapp.ymlのサンプルです。

# Triggered when 'teamsapp deploy' is executed
deploy:
  - uses: cli/runDotnetCommand
    with:
      args: publish --configuration Release MyTeamsApp8.csproj
      workingDirectory: ../MyTeamsApp8
  # Deploy your application to Azure App Service using the zip deploy feature.
  # For additional details, refer to https://aka.ms/zip-deploy-to-app-services.
  - uses: azureAppService/zipDeploy
    with:
      # Deploy base folder
      artifactFolder: bin/Release/net8.0/publish
      # 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: ${{TAB_AZURE_APP_SERVICE_RESOURCE_ID}}
      workingDirectory: ../MyTeamsApp8
ソリューション起動ユーザー ファイル

このファイルは、ソリューション フォルダーと同じレベルで格納する必要があります。

[
  {
    "Name": "Microsoft Teams (browser)",
    "Projects": [
      {
        "Name": "TeamsApp\\TeamsApp.ttkproj",
        "Action": "StartWithoutDebugging",
        "DebugTarget": "Microsoft Teams (browser)"
      },
      {
        "Name": "MyTeamsApp8\\MyTeamsApp8.csproj",
        "Action": "Start",
        "DebugTarget": "Start Project"
      }
    ]
  },
  {
    "Name": "Microsoft 365 app (browser)",
    "Projects": [
      {
        "Name": "TeamsApp\\TeamsApp.ttkproj",
        "Action": "StartWithoutDebugging",
        "DebugTarget": "Microsoft 365 app (browser)"
      },
      {
        "Name": "MyTeamsApp8\\MyTeamsApp8.csproj",
        "Action": "Start",
        "DebugTarget": "Start Project"
      }
    ]
  },
  {
    "Name": "Outlook (browser)",
    "Projects": [
      {
        "Name": "TeamsApp\\TeamsApp.ttkproj",
        "Action": "StartWithoutDebugging",
        "DebugTarget": "Outlook (browser)"
      },
      {
        "Name": "MyTeamsApp8\\MyTeamsApp8.csproj",
        "Action": "Start",
        "DebugTarget": "Start Project"
      }
    ]
  }
]