カスタム アプリから Teams 会議への音声/ビデオ通話

1. Visual Studio で samples/acs-to-teams-meeting/server/csharp/GraphACSFunctions.sln を開くか、Visual Studio Code で GraphACSFunctions フォルダーを開きます。

2. GraphACSFunctions プロジェクトに移動し、次の値を持つlocal.settings.json ファイルを作成します。

   {
       "IsEncrypted": false,
       "Values": {
           "FUNCTIONS_WORKER_RUNTIME": "dotnet-isolated",
           "TENANT_ID": "",
           "CLIENT_ID": "",
           "CLIENT_SECRET": "",
           "USER_ID": "",
           "ACS_CONNECTION_STRING": ""
       },
       "Host": {
           "LocalHttpPort": 7071,
           "CORS": "*",
           "CORSCredentials": false
       },
       "watchDirectories": [
           "Shared"
       ]
   }
   

   • 前の演習でローカル ファイルにコピーした値を使用して、 TENANT_ID、 CLIENT_ID 、 CLIENT_SECRET の値を更新します。
   • Microsoft Teams会議を作成するユーザー ID を使用して USER_ID を定義します。

   ユーザー ID は、 Azure ポータルから取得できます。

   • Microsoft 365 開発者テナント管理者アカウントを使用してログインします。
   • Microsoft Entra ID を選択する
   • サイド バーの Users タブに移動します。
   • ユーザー名を検索して選択すると、ユーザーの詳細が表示されます。
   • ユーザーの詳細内で、 Object ID は User IDを表します。 Object ID値をコピーし、local.settings.jsonのUSER_ID値に使用します。

   

   Note

   ACS_CONNECTION_STRING は次の演習で使用されるため、まだ更新する必要はありません。

3. acs-to-teams-meeting/server/csharp フォルダーにあるGraphACSFunctions.slnを開き、次の Microsoft Graph および ID パッケージが含まれていることに注意してください。

   <PackageReference Include="Azure.Communication.Identity" Version="1.3.1" />
   <PackageReference Include="Azure.Identity" Version="1.11.2" />
   <PackageReference Include="Microsoft.Graph" Version="5.51.0" />
   

4. Program.csに移動し、ConfigureServices メソッドで次のコードに注意してください。

       var host = new HostBuilder()
           .ConfigureFunctionsWebApplication()
           .ConfigureServices(services => {
               services.AddApplicationInsightsTelemetryWorkerService();
               services.ConfigureFunctionsApplicationInsights();
               services.AddSingleton(static p =>
               {
                   var config = p.GetRequiredService<IConfiguration>();
                   var clientSecretCredential = new ClientSecretCredential(
                       config.GetValue<string>("TENANT_ID"),
                       config.GetValue<string>("CLIENT_ID"),
                       config.GetValue<string>("CLIENT_SECRET")
                   );
   
                   return new GraphServiceClient(
                       clientSecretCredential,
                       ["https://graph.microsoft.com/.default"]
                   );
               });
   
               ...
   
               services.AddSingleton<IGraphService, GraphService>();
           })
           .Build();
   }
   

   • このコードでは、Azure Functions から Microsoft Graph を呼び出すために使用できる GraphServiceClient オブジェクトを作成します。 これはシングルトンであり、他のクラスに挿入できます。
   • GraphServiceClient コンストラクターにClientSecretCredential値を渡すことで、アプリ専用のアクセス許可 (Calendars.ReadWrite など) を使用して Microsoft Graph API 呼び出しを行うことができます。 ClientSecretCredentialは、Microsoft Entra ID アプリのTenant Id、Client Id、およびClient Secretの値を使用します。

5. Services/GraphService.cs を開きます。

6. 少し時間を取って、 CreateMeetingEventAsync メソッドを調べてみましょう。

   using System;
   using System.Threading.Tasks;
   using Microsoft.Graph;
   using Microsoft.Extensions.Configuration;
   
   namespace GraphACSFunctions.Services;
   
   public class GraphService : IGraphService
   {
       private readonly GraphServiceClient _graphServiceClient;
       private readonly IConfiguration _configuration;
   
       public GraphService(GraphServiceClient graphServiceClient, IConfiguration configuration)
       {
           _graphServiceClient = graphServiceClient;
           _configuration = configuration;
       }
   
       public async Task<string> CreateMeetingAsync()
       {
           var userId = _configuration.GetValue<string>("USER_ID");
           var newMeeting = await _graphServiceClient
               .Users[userId]
               .Calendar
               .Events
               .PostAsync(new()
               {
                   Subject = "Customer Service Meeting",
                   Start = new()
                   {
                       DateTime = DateTime.UtcNow.ToString("yyyy-MM-ddTHH:mm:ss"),
                       TimeZone = "UTC"
                   },
                   End = new()
                   {
                       DateTime = DateTime.UtcNow.AddHours(1).ToString("yyyy-MM-ddTHH:mm:ss"),
                       TimeZone = "UTC"
                   },
                   IsOnlineMeeting = true
               });
           return newMeeting.OnlineMeeting.JoinUrl;
       }
   }
   

   • GraphServiceClient オブジェクトと IConfiguration オブジェクトがコンストラクターに挿入され、フィールドに割り当てられます。
   • CreateMeetingAsync()関数は、Microsoft Graph Calendar Events API にデータをポストします。この API は、ユーザーの予定表にイベントを動的に作成し、結合 URL を返します。

7. TeamsMeetingFunctions.csを開き、少し時間を取ってコンストラクターを調べます。 前に確認した GraphServiceClient が挿入され、 _graphService フィールドに割り当てられます。

   private readonly IGraphService _graphService;
   
   public TeamsMeetingFunction(IGraphService graphService) => _graphService = graphService;
   

8. Runメソッドを見つけます。

   [Function("HttpTriggerTeamsUrl")]
   public async Task<HttpResponseData> Run(
       [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequestData req,
       ILogger log)
   {
       var response = req.CreateResponse(HttpStatusCode.OK);
       await response.WriteStringAsync(await _graphService.CreateMeetingAsync());
       return response;
   }
   

   • HTTP GET 要求で呼び出すことができる HttpTriggerTeamsUrl の関数名を定義します。
   • _graphService.CreateMeetingAsync()が呼び出され、新しいイベントが作成され、結合 URL が返されます。

9. Visual Studio で F5 キーを押すか、メニューから Debug --> デバッグの開始 を選択して、プログラムを実行します。 このアクションにより、Azure Functions プロジェクトが開始され、 ACSTokenFunction が呼び出し可能になります。

1. Visual Studio Code で サンプル/acs-to-teams-meeting/server/typescript プロジェクト フォルダーを開きます。

2. 次の値を使用して local.settings.json ファイルを作成します。

   {
       "IsEncrypted": false,
       "Values": {
           "FUNCTIONS_WORKER_RUNTIME": "node",
           "TENANT_ID": "",
           "CLIENT_ID": "",
           "CLIENT_SECRET": "",
           "USER_ID": "",
           "ACS_CONNECTION_STRING": ""
       },
       "Host": {
           "LocalHttpPort": 7071,
           "CORS": "*",
           "CORSCredentials": false
       },
       "watchDirectories": [
           "Shared"
       ]
   }
   

   • 前の演習でローカル ファイルにコピーした値を使用して、 TENANT_ID、 CLIENT_ID 、 CLIENT_SECRET の値を更新します。
   • Microsoft Teams会議を作成するユーザー ID を使用して USER_ID を定義します。

   ユーザー ID は、 Azure ポータルから取得できます。

   • Microsoft 365 開発者テナント管理者アカウントを使用してログインします。
   • Microsoft Entra ID を選択します。
   • サイド バーの Users タブに移動します。
   • ユーザー名を検索して選択すると、ユーザーの詳細が表示されます。
   • ユーザーの詳細内で、 Object ID は User IDを表します。 Object ID値をコピーし、local.settings.jsonのUSER_ID値に使用します。

   

   Note

   ACS_CONNECTION_STRING は次の演習で使用されるため、まだ更新する必要はありません。

3. VS Code で package.json ファイルを開き、次の Microsoft Graph および ID パッケージが含まれていることに注意してください。

   @azure/communication-identity
   @azure/identity
   @microsoft/microsoft-graph-client
   

4. typescript フォルダーでターミナル ウィンドウを開き、npm install コマンドを実行してアプリケーションの依存関係をインストールします。

5. Shared/graph.tsを開き、ファイルの上部にあるインポートを調べるのに少し時間がかかります。 このコードは、Azure 関数で Microsoft Graph を呼び出すために使用される認証シンボルとクライアント シンボルのインポートを処理します。

   import { startDateTimeAsync, endDateTimeAsync } from './dateTimeFormat';
   import { ClientSecretCredential } from '@azure/identity';
   import { Client } from '@microsoft/microsoft-graph-client';
   import { TokenCredentialAuthenticationProvider } from '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials';
   import 'isomorphic-fetch';
   

   ヒント

   この演習の後半で使用する dateTimeFormat.ts からのインポートも表示されます。 startDateTimeAsync と endDateTimeAsync は、会議の開始日と終了日を定義するためのMicrosoft Teams会議リンクを作成するときに使用されます。

6. 少し時間を取って、 clientSecretCredential と appGraphClientを調べます。 これらは、認証プロセスの後半で、Microsoft Graph API を呼び出すときに使用されます。

   let clientSecretCredential;
   let appGraphClient;
   

7. ensureGraphForAppOnlyAuth関数を見つけます。

   • ClientSecretCredential は、Microsoft Entra ID アプリの Tenant Id、 Client Id 、および Client Secret の値を使用します。
   • authProvider オブジェクトは、バックグラウンドで認証を行い、アプリ専用のアクセス許可 (Calendars.ReadWrite など) を使用して Microsoft Graph API 呼び出しを行う Microsoft Entra ID アプリとして定義されます。

   function ensureGraphForAppOnlyAuth() {
       if (!clientSecretCredential) {
           clientSecretCredential = new ClientSecretCredential(
               process.env.TENANT_ID,
               process.env.CLIENT_ID,
               process.env.CLIENT_SECRET
           );
       }
   
       if (!appGraphClient) {
           const authProvider = new TokenCredentialAuthenticationProvider(
           clientSecretCredential, {
               scopes: [ 'https://graph.microsoft.com/.default' ]
           });
   
           appGraphClient = Client.initWithMiddleware({
               authProvider: authProvider
           });
       }
   }
   

8. createNewMeetingAsync関数について少しお待ちください。 データを Microsoft Graph Calendar Events API に投稿します。この API は、ユーザーの予定表にイベントを動的に作成し、新しいイベントの詳細を返します。

   async function createNewMeetingAsync(userId) {
       ensureGraphForAppOnlyAuth();
       let startTime = await startDateTimeAsync();
       let endTime = await endDateTimeAsync();
       const newMeeting = `/users/${userId}/calendar/events`;
   
       const event = {
       subject: 'Customer Service Meeting',
       start: {
           dateTime: startTime,
           timeZone: 'UTC'
       },
       end: {
           dateTime: endTime,
           timeZone: 'UTC'
       },
       isOnlineMeeting: true
       };
   
       const newEvent = await appGraphClient.api(newMeeting).post(event);    
       return newEvent;     
   }
   
   export default createNewMeetingAsync;
   

9. server/typescript/src/functions/httpTriggerTeamsUrl.tsに移動し、Http Trigger 関数を調べる:

   • createNewMeetingAsync は graph.tsからインポートされます。 新しいイベントの詳細の作成と取得を処理します。
   • userId は、Http トリガー関数内の local.settings.json から取得されます。 この取得は、process.env.USER_IDを使用してUSER_ID環境変数にアクセスすることによって行われます。
   • 関数がトリガーされると、定義されたユーザー ID を使用して createNewMeetingAsync を呼び出し、パラメーターに新しいイベントの詳細 teamMeetingLink 返します。
   • この関数は、 meeting.onlineMeeting.joinUrl を呼び出して Teams 会議参加 URL にアクセスし、応答の本文の値を返します。

   import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";
   import createNewMeetingAsync from '../../Shared/graph';
   
   let teamsMeetingLink;
   
   export async function httpTriggerTeamsUrl(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
       context.log("Request received");
       const userId = process.env.USER_ID;
       context.log('UserId', userId);
   
       teamsMeetingLink = await createNewMeetingAsync(userId);
       const body = JSON.stringify(teamsMeetingLink);
       const meeting = JSON.parse(body);
       context.log("meeting:", meeting);
   
       return {
           // status: 200, /* Defaults to 200 */
           body: meeting.onlineMeeting.joinUrl
       }    
   };
   
   app.http('httpTriggerTeamsUrl', {
       methods: ['GET'],
       authLevel: 'anonymous',
       handler: httpTriggerTeamsUrl
   });
   
   export default httpTriggerTeamsUrl;
   

10. ターミナル ウィンドウを使用して、amples/acs-video-to-teams-meeting/server/typescript フォルダー内のnpm startを実行して、関数をローカルで実行します。

1. local.settings.jsonを開き、前の演習で保存した ACS 接続文字列でACS_CONNECTION_STRINGの値を更新します。

2. Visual Studio でStartup.csを開き、ConfigureServices() メソッドの 2 つ目のAddSingleton()呼び出しを調べる。

   var host = new HostBuilder()
       .ConfigureFunctionsWebApplication()
       .ConfigureServices(services => {
   
           ...
   
           services.AddSingleton(static p =>
           {
               var config = p.GetRequiredService<IConfiguration>();
               var connectionString = config.GetValue<string>("ACS_CONNECTION_STRING");
               return new CommunicationIdentityClient(connectionString);
           });
   
           ...
   
       })
       .Build();
   }
   

3. AddSingleton()呼び出しでは、local.settings.jsonのACS_CONNECTION_STRING値を使用してCommunicationIdentityClient オブジェクトが作成されます。

4. ACSTokenFunction.csを開き、コンストラクターとフィールド定義を見つけます。

   • CommunicationTokenScope.VoIPスコープを含むScopesという名前のフィールドが定義されています。 このスコープは、ビデオ通話のアクセス トークンを作成するために使用されます。

     private static readonly CommunicationTokenScope[] Scopes =
     [
         CommunicationTokenScope.VoIP,
     ];
     

   • Startup.csで作成されたCommunicationIdentityClient シングルトン インスタンスがコンストラクターに挿入され、_tokenClient フィールドに割り当てられます。

     private readonly CommunicationIdentityClient _tokenClient;
     
     public ACSTokenFunction(CommunicationIdentityClient tokenClient)
     {
         _tokenClient = tokenClient;
     }
     

5. ACSTokenFunction.csでRun()メソッドを調べる:

   [Function("HttpTriggerAcsToken")]
   public async Task<HttpResponseData> Run(
       [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequestData req,
       ILogger log)
   {
       var user = await _tokenClient.CreateUserAsync();
       var userToken = await _tokenClient.GetTokenAsync(user, Scopes);
   
       var response = req.CreateResponse(HttpStatusCode.OK);
       await response.WriteAsJsonAsync(
           new
           {
               userId = user.Value.Id,
               userToken.Value.Token,
               userToken.Value.ExpiresOn
           }
       );
       return response;
   }
   

   • HTTP GET 要求で呼び出すことができる HttpTriggerAcsToken という名前の関数を定義します。
   • _tokenClient.CreateUserAsync() メソッドを呼び出すことによって、新しい ACS ユーザーが作成されます。
   • ビデオ呼び出しに使用されるアクセス トークンは、 _tokenClient. GetTokenAsync() メソッドを呼び出すことによって作成されます。
   • ユーザー ID とトークンは、関数から JSON オブジェクトとして返されます。

6. Visual Studio で F5 キーを押すか、メニューから Debug --> デバッグの開始 を選択して、プログラムを実行します。 これにより、Azure Functions プロジェクトが開始され、 ACSTokenFunction が呼び出し可能になります。

   Note

   VS Code を使用している場合は、 GraphACSFunctions フォルダーでターミナル ウィンドウを開き、 func start実行できます。 これは、コンピューターに Azure Functions Core Tools がインストールされていることを前提としています。

7. Azure Functions がローカルで実行されたので、クライアントはそれらを呼び出して ACS ユーザー ID とトークン値を取得できる必要があります。

8. エディターで サンプル/acs-to-teams-meeting/client/react/App.tsx ファイルを開きます。

9. コンポーネント内の userId と token 状態変数を見つけます。 ハードコーディングされた値を削除し、空の引用符で置き換えます。

   const [userId, setUserId] = useState<string>('');
   const [token, setToken] = useState<string>('');
   

10. useEffect関数を見つけて、次のように変更して、Azure 関数を呼び出して ACS ユーザー ID とトークンを取得できるようにします。

    useEffect(() => {
        const init = async () => {
            setMessage('Getting ACS user');
            //Call Azure Function to get the ACS user identity and token
            let res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
            let user = await res.json();
            setUserId(user.userId);
            setToken(user.token);
    
            setMessage('Getting Teams meeting link...');
            //Call Azure Function to get the meeting link
            res = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
            let link = await res.text();
            setTeamsMeetingLink(link);
            setMessage('');
            console.log('Teams meeting link', link);
        }
        init();
    
    }, []);
    

11. 続行する前にファイルを保存します。

12. ターミナル ウィンドウを開き、react フォルダー内のnpm startを実行します。 ビルドと読み込みが完了すると、ACS 呼び出し UI が表示され、Microsoft Graph によって動的に作成された Teams 会議に呼び出すことができます。

13. ターミナル ウィンドウで Ctrl + C キーを押して React アプリを停止します。

14. Azure Functions プロジェクトを停止します。

15. Git の変更をコミットし、Visual Studio Code を使用して GitHub リポジトリにプッシュします。

    • Source コントロール アイコンを選択します (Visual Studio Code ツール バーの 3 番目のアイコン)。
    • コミット メッセージを入力し、Commit を選択します。
    • Sync の変更を選択します。

1. local.settings.jsonを開き、前の演習で保存した ACS 接続文字列でACS_CONNECTION_STRINGの値を更新します。

2. Visual Studio Code で server/typescript/src/functions/httpTriggerAcsToken.ts を開きます。 これには次のコードがあります。

   import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";
   import { CommunicationIdentityClient } from '@azure/communication-identity';
   
   export async function httpTriggerAcsToken(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
       // Get ACS connection string from local.settings.json (or App Settings when in Azure)
       const connectionString = process.env.ACS_CONNECTION_STRING;
       let tokenClient = new CommunicationIdentityClient(connectionString);
       const user = await tokenClient.createUser();
       const userToken = await tokenClient.getToken(user, ["voip"]);
       return {
           jsonBody: { userId: user.communicationUserId, ...userToken }
       };
   }
   
   app.http('httpTriggerAcsToken', {
       methods: ['GET'],
       authLevel: 'anonymous',
       handler: httpTriggerAcsToken
   });
   
   export default httpTriggerAcsToken;
   

3. この関数は、次のタスクを実行します。

   • ユーザー ID とトークンの作成に使用される CommunicationIdentityClient をインポートします。

     import { CommunicationIdentityClient } from '@azure/communication-identity';
     

   • ACS_CONNECTION_STRINGという名前の環境変数から ACS 接続文字列を取得します。

     const connectionString = process.env.ACS_CONNECTION_STRING;
     

   Note

   これは、前にlocal.settings.json ファイルに追加した接続文字列値です。

   • 新しいCommunicationIdentityClient インスタンスを作成し、ACS 接続文字列を渡します。

     let tokenClient = new CommunicationIdentityClient(connectionString);
     

   • ACS ユーザーを作成し、Voice Over IP トークンを取得します。

     const user = await tokenClient.createUser();
     const userToken = await tokenClient.getToken(user, ["voip"]);
     

   • userId とトークン値を呼び出し元に返します。

     return {
         jsonBody: { userId: user.communicationUserId, ...userToken }
     };
     

4. ターミナル ウィンドウで server/typescript フォルダーに移動し、 npm start実行します。

5. Azure Functions がローカルで実行されたので、クライアントはそれらを呼び出して ACS ユーザー ID とトークン値を取得できる必要があります。

6. エディター client/react/App.tsx ファイルを開きます。

7. コンポーネント内の userId と token 状態変数を見つけます。 ハードコーディングされた値を削除し、空の引用符で置き換えます。

   const [userId, setUserId] = useState<string>('');
   const [token, setToken] = useState<string>('');
   

8. useEffect関数を見つけて、次のように変更して、Azure 関数を呼び出して ACS ユーザー ID とトークンを取得できるようにします。

   useEffect(() => {
       const init = async () => {
           setMessage('Getting ACS user');
           //Call Azure Function to get the ACS user identity and token
           let res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
           let user = await res.json();
           setUserId(user.userId);
           setToken(user.token);
   
           setMessage('Getting Teams meeting link...');
           //Call Azure Function to get the meeting link
           res = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
           let link = await res.text();
           setTeamsMeetingLink(link);
           setMessage('');
           console.log('Teams meeting link', link);
       }
       init();
   
   }, []);
   

9. 続行する前にファイルを保存します。

10. 別のターミナルを開き、react フォルダーでnpm startを実行します。 ビルドと読み込みが完了すると、ACS 呼び出し UI が表示され、Microsoft Graph によって動的に作成された Teams 会議に呼び出すことができます。

11. Ctrl + C を選択して、両方のターミナル プロセス (React と Azure Functions) を停止します。

12. Git の変更をコミットし、Visual Studio Code を使用して GitHub リポジトリにプッシュします。

    • Source コントロール アイコンを選択します (Visual Studio Code ツール バーの 3 番目のアイコン)。
    • コミット メッセージを入力し、Commit を選択します。
    • Sync の変更を選択します。

1. Visual Studio で samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln プロジェクトを開きます。

2. GraphACSFunctions プロジェクトを右クリックし、Publish を選択します。

3. ターゲット セクションで Azure を選択し、[次へ ] をクリック。

4. Azure Function App (Windows)を選択し、[次へ] をクリック。

5. サブスクリプションを選択し、 + 新規作成を選択します。

6. 次の情報を入力してください。

   • 関数名: グローバルに一意の名前が必要です。 例: acsFunctions<YOUR_LAST_NAME>。
   • [サブスクリプション]:サブスクリプションを選択します。
   • リソース グループ: このチュートリアルで先ほど作成したリソース グループを選択するか、新しいリソース グループを作成することもできます。
   • ホスティング プラン: 従量課金プラン。
   • 場所: デプロイ先のリージョンを選択します。
   • Azure Storage: 新しいストレージを作成します。 (既存のストレージ アカウントを選択することもできます)。
   • Azure Insights: 新しい分析情報を作成します。 (既存のストレージ アカウントを選択することもできます)。

   Note

   グローバルに一意の名前が必要です。 名前の末尾に番号または姓を追加することで、名前をより一意にすることができます。

7. Azure Function App が作成されると、確認画面が表示されます。 パッケージから実行オプションが選択されていることを確認し、Finish を選択します。

8. Publish を選択して、関数を Azure にデプロイします。

9. 関数が Azure にデプロイされたら、Azure portal に移動し、作成した関数アプリを選択します。

10. デプロイした関数の URL をコピーします。 この値は、この演習の後半で使用します。

11. 左側のメニューで Settings --> Configuration を選択します。

12. [ + 新しいアプリケーション設定 ボタンを選択し、 アプリケーション設定に次のキーと値を追加します。 これらの値は、GraphACSFunctions プロジェクトのlocal.settings.jsonから取得できます。

    # Retrieve these values from local.settings.json
    TENANT_ID: <YOUR_VALUE>
    CLIENT_ID: <YOUR_VALUE>
    CLIENT_SECRET: <YOUR_VALUE>
    USER_ID: <YOUR_VALUE>
    ACS_CONNECTION_STRING: <YOUR_VALUE>
    

13. 保存ボタンを選択して設定を保存します。

14. 最後に、関数アプリの CORS (クロスオリジン リソース共有) を有効にして、関数アプリの API にドメインの外部からアクセスできるようにする必要があります。 左側のメニューで Settings --> CORS を選択します。

15. Allowed Origins テキストボックスに「* (任意のドメインからアクセス可能)」と入力し、Save ボタンを選択します。

VS Code を使用して関数コードを Azure Functions にデプロイすることから始めましょう。

1. server/typescript プロジェクト フォルダーを開きます。

2. 既に npm install を実行し、プロジェクト ルートに node_modules フォルダーが表示されている必要があります。 そうでない場合は、コマンド ウィンドウを開き、 npm install を実行して依存関係をインストールします。

3. Mac で VS Code コマンド パレット (Shift + Cmd + P を開く | Windows の場合は Shift + Ctrl + P ) を押し、[Azure Functions: Create Function App in Azure]\(Azure で関数アプリを作成する\) 選択。

   

   Note

   このオプションが表示されない場合は、VS Code に Azure Functions 拡張機能がインストールされていることを確認 。

4. 次の情報を入力するように求められます。

   • Azure サブスクリプション名。
   • 関数名: acsFunctions<YOUR_LAST_NAME>。

   Note

   グローバルに一意の名前が必要です。 名前の末尾に番号または姓を追加することで、名前をより一意にすることができます。

   • ランタイム スタック - 最新の Node.js LTS バージョンを選択します。
   • リージョン (任意のリージョンを選択)。

5. Azure Function App が作成されると、詳細の表示に関するメッセージが表示されます。

6. VS Code のコマンド パレットに戻り、 Azure Functions: Deploy to Function App を選択します。 サブスクリプションと、前に作成した関数アプリ名を選択するように求められます。

7. 関数が Azure にデプロイされたら、次の操作を行います。

   • VS Code で Azure 拡張機能を選択します (サイドバーの Azure アイコンをクリックします)。
   • ご自分のサブスクリプションを展開します。
   • 関数アプリを展開します。
   • 関数を右クリックし、 Browse Web サイトを選択します。 続行する前に、関数アプリが正しく動作していることを確認します。

8. Azure 関数ドメインをローカル ファイルにコピーします。 この値は、この演習の後半で使用します。