カスタム アプリから 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"
       ]
   }
   

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

   Azure portalからユーザー ID を取得できます。

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

   

   注意

   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();
   }
   

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

5. [サービス/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 カレンダー イベント 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 キーを押すか、メニューから [ デバッグ] --> [デバッグの開始 ] を選択して、プログラムを実行します。 このアクションにより、Azure Functions プロジェクトが開始され、 がACSTokenFunction呼び出し可能になります。

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

2. 次の値を持つlocal.settings.json ファイルをCreateします。

   {
       "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"
       ]
   }
   

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

   Azure portalからユーザー ID を取得できます。

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

   

   注意

   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. 共有/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では、Tenant IdMicrosoft Entra 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 カレンダー イベント 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 トリガー関数を調べます。

   • 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. ターミナル ウィンドウ npm start を使用して samples/acs-video-to-teams-meeting/server/typescript フォルダーで実行し、関数をローカルで実行します。

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

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

   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() 、 CommunicationIdentityClient local.settings.jsonの値を ACS_CONNECTION_STRING 使用して オブジェクト が作成されます。

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

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

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

   • CommunicationIdentityClientStartup.csで作成されたシングルトン インスタンスがコンストラクターに挿入され、フィールドに_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 関数を定義します。
   • 新しい ACS ユーザーは、 メソッドを呼び出すことによって作成されます _tokenClient.CreateUserAsync() 。
   • ビデオ呼び出しに使用されるアクセス トークンは、 メソッドを呼び出すことによって作成されます _tokenClient. GetTokenAsync() 。
   • ユーザー ID とトークンは、JSON オブジェクトとして関数から返されます。

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

   注意

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

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

8. エディターで samples/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 リポジトリにプッシュします。

    • [ソース管理] アイコン (Visual Studio Code ツール バーの 3 つ目の下) を選択します。
    • コミット メッセージを入力し、[コミット] を選択します。
    • [ 変更の同期] を選択します。

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

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. 関数は、次のタスクを実行します。

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

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

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

     const connectionString = process.env.ACS_CONNECTION_STRING;
     

   注意

   これは、前に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. ターミナル ウィンドウで サーバー/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 リポジトリにプッシュします。

    • [ソース管理] アイコン (Visual Studio Code ツール バーの 3 つ目の下) を選択します。
    • コミット メッセージを入力し、[コミット] を選択します。
    • [ 変更の同期] を選択します。

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

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

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

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

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

6. 次の情報を入力します。

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

   注意

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

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

8. [ 発行] を選択して、関数を Azure にデプロイします。

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

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

11. 左側のメニューで [ 設定] --> [構成] を選択します。

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 にドメイン外からアクセスできるようにする必要があります。 左側のメニューで [ 設定] --> [CORS] を選択します。

15. [許可された配信元] ボックスに「(任意のドメインからアクセス可能)」と入力*し、[保存] ボタンを選択します。

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

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

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

3. VS Code コマンド パレットを開きます (Mac では Shift + Cmd + P |Windows の場合は Shift + Ctrl + P キー) を押し、[Azure Functions: Azure の関数アプリCreate選択します。

   

   注意

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

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

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

   注意

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

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

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

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

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

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

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