사용자 지정 앱에서 Teams 모임으로 오디오/비디오 통화

1. samples/acs-to-teams-meeting/server/csharp/GraphACSFunctions.sln Visual Studio에서 열거나 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_SECRET 값을 업데이트 TENANT_IDCLIENT_ID 합니다.
   • Microsoft Teams 모임을 만들려는 사용자 ID로 정의 USER_ID 합니다.

   Azure Portal에서 사용자 ID를 가져올 수 있습니다.

   • Microsoft 365 개발자 테넌트 관리자 계정을 사용하여 로그인합니다.
   • Microsoft Entra ID 선택
   • 사이드바의 사용자 탭으로 이동합니다.
   • 사용자 이름을 검색하고 선택하여 사용자 세부 정보를 확인합니다.
   • 사용자 세부 정보 Object ID User ID내에서 . Object ID 값을 복사하고 local.settings.json 값에 사용합니다USER_ID.

   

   참고 항목

   ACS_CONNECTION_STRING 는 다음 연습에서 사용되므로 아직 업데이트할 필요가 없습니다.

3. GraphACSFunctions.sln acs-to-teams-meeting/server/csharp 폴더에 있으며 다음 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();
   }
   

   • 이 코드는 GraphServiceClient Azure Functions에서 Microsoft Graph를 호출하는 데 사용할 수 있는 개체를 만듭니다. 싱글톤이며 다른 클래스에 삽입할 수 있습니다.
   • 생성자에 값을 전달 ClientSecretCredential 하여 앱 전용 권한(예: Calendars.ReadWrite)으로 Microsoft Graph API 호출을 GraphServiceClient 수행할 수 있습니다. Microsoft ClientSecretCredential Entra ID 앱의 Tenant IdClient 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() 사용자의 일정에 이벤트를 동적으로 만들고 조인 URL을 반환하는 Microsoft Graph 일정 이벤트 API에 데이터를 게시합니다.

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 정의합니다.
   • 새 이벤트를 만들고 조인 URL을 반환하는 호출 _graphService.CreateMeetingAsync()입니다.

9. Visual Studio에서 F5 키를 누르거나 디버그를> 선택하여 프로그램을 실행합니다. 메뉴에서 디버깅을 시작합니다. 이 작업은 Azure Functions 프로젝트를 시작하고 호출할 수 있도록 합니다 ACSTokenFunction .

1. Visual Studio Code에서 samples/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"
       ]
   }
   

   • 이전 연습에서 로컬 파일에 복사한 값을 사용하여 값 및 CLIENT_SECRET 값을 업데이트 TENANT_IDCLIENT_ID 합니다.
   • Microsoft Teams 모임을 만들려는 사용자 ID로 정의 USER_ID 합니다.

   Azure Portal에서 사용자 ID를 가져올 수 있습니다.

   • Microsoft 365 개발자 테넌트 관리자 계정을 사용하여 로그인합니다.
   • Microsoft Entra ID를 선택합니다.
   • 사이드바의 사용자 탭으로 이동합니다.
   • 사용자 이름을 검색하고 선택하여 사용자 세부 정보를 확인합니다.
   • 사용자 세부 정보 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 Function에서 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 가져오기도 표시됩니다. startDateTimeAsyncendDateTimeAsync 은 모임의 시작 날짜 및 종료 날짜를 정의하는 Microsoft Teams 모임 링크를 만드는 동안 사용됩니다.

6. 잠시 시간을 내어 검사 clientSecretCredential 하고 appGraphClient. 인증 프로세스의 뒷부분에서 그리고 Microsoft Graph API를 호출할 때 사용됩니다.

   let clientSecretCredential;
   let appGraphClient;
   

7. 함수를 찾습니다.ensureGraphForAppOnlyAuth

   • ClientSecretCredential에서는 Tenant IdClient Id Microsoft Entra ID 앱의 값과 Client Secret 해당 값을 사용합니다.
   • 개체는 authProvider 백그라운드에서 인증하고 앱 전용 권한(예: )을 사용하여 Microsoft Graph API를 호출하는 Microsoft Entra ID 앱으로 Calendars.ReadWrite정의됩니다.

   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. 서버/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. 터미널 창을 사용하여 samples/acs-video-to-teams-meeting/server/typescript 폴더에서 실행 npm start 하여 함수를 로컬로 실행합니다.

1. local.settings.json 열고 이전 연습에서 저장한 ACS 연결 문자열 값을 업데이트 ACS_CONNECTION_STRING 합니다.

2. Visual Studio에서 Startup.cs 열고 메서드의 두 번째 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() local.settings.json 값을 사용하여 개체를 ACS_CONNECTION_STRING 만듭니다CommunicationIdentityClient.

4. ACSTokenFunction.cs 열고 생성자 및 필드 정의를 찾습니다.

   • 범위가 포함된 CommunicationTokenScope.VoIP 필드가 Scopes 정의됩니다. 이 범위는 화상 통화에 대한 액세스 토큰을 만드는 데 사용됩니다.

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

   • CommunicationIdentityClient Startup.cs 만든 싱글톤 인스턴스는 생성자에 삽입되고 필드에 할당됩니다_tokenClient.

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

5. Run() ACSTokenFunction.cs 메서드를 탐색합니다.

   [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 키를 누르거나 디버그를> 선택하여 프로그램을 실행합니다. 메뉴에서 디버깅을 시작합니다. 그러면 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 Function을 호출하여 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. 터미널 창을 열고 폴더에서 실행 npm start 합니다 react . 빌드 및 로드 후에는 ACS 호출 UI가 표시되고 Microsoft Graph에서 동적으로 만든 Teams 모임을 호출할 수 있습니다.

13. 터미널 창에서 Ctrl +C를 눌러 React 앱을 중지합니다.

14. Azure Functions 프로젝트를 중지합니다.

15. Visual Studio Code를 사용하여 Git 변경 내용을 커밋하고 GitHub 리포지토리에 푸시합니다.

    • 소스 제어 아이콘(Visual Studio Code 도구 모음에서 세 번째 아래쪽)을 선택합니다.
    • 커밋 메시지 입력하고 커밋을 선택합니다.
    • 변경 내용 동기화를 선택합니다.

1. local.settings.json 열고 이전 연습에서 저장한 ACS 연결 문자열 값을 업데이트 ACS_CONNECTION_STRING 합니다.

2. Visual Studio Code에서 서버/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 Function을 호출하여 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. Visual Studio Code를 사용하여 Git 변경 내용을 커밋하고 GitHub 리포지토리에 푸시합니다.

    • 소스 제어 아이콘(Visual Studio Code 도구 모음에서 세 번째 아래쪽)을 선택합니다.
    • 커밋 메시지 입력하고 커밋을 선택합니다.
    • 변경 내용 동기화를 선택합니다.

1. samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln Visual Studio에서 프로젝트를 엽니다.

2. 프로젝트를 마우스 오른쪽 단추로 클릭하고 게시를 GraphACSFunctions 선택합니다.

3. 대상 섹션에서 Azure를 선택한 다음, 다음을 클릭합니다.

4. Azure 함수 앱(Windows)을 선택한 다음, 다음을 클릭합니다.

5. 구독을 선택한 다음+ 새로 만들기를 선택합니다.

6. 다음 정보를 입력합니다.

   • 함수 이름: 전역적으로 고유한 이름이 필요합니다. 예: acsFunctions<YOUR_LAST_NAME>.
   • 구독: 구독을 선택합니다.
   • 리소스 그룹: 이 자습서의 앞부분에서 만든 리소스 그룹을 선택하거나 새 리소스 그룹을 만들 수도 있습니다.
   • 호스팅 계획: 소비 계획.
   • 위치: 배포하려는 지역을 선택합니다.
   • Azure Storage: 새 스토리지를 만듭니다. (기존 스토리지 계정을 선택할 수도 있습니다.)
   • Azure Insights: 새 인사이트를 만듭니다. (기존 스토리지 계정을 선택할 수도 있습니다.)

   참고 항목

   전역적으로 고유한 이름이 필요합니다. 이름 끝에 숫자나 성을 추가하여 이름을 더 고유하게 만들 수 있습니다.

7. Azure Function App이 만들어지면 확인 화면이 표시됩니다. 패키지에서 실행 옵션이 선택되어 있는지 확인한 다음 마침을 선택합니다.

8. 게시를 선택하여 Azure에 함수를 배포합니다.

9. 함수가 Azure에 배포되면 Azure Portal로 이동하여 만든 함수 앱을 선택합니다.

10. 배포한 함수의 URL을 복사합니다. 이 연습의 뒷부분에서 이 값을 사용합니다.

11. 왼쪽 메뉴에서 설정 --> 구성을 선택합니다.

12. + 새 애플리케이션 설정 단추를 선택하고 애플리케이션 설정에 다음 키와 값을 추가합니다. 프로젝트에서 이러한 값을 local.settings.json 다시 치료할 GraphACSFunctions 수 있습니다.

    # 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. 서버/typescript 프로젝트 폴더를 엽니다.

2. 프로젝트 루트에 node_modules 폴더가 이미 실행 npm install 되어 있어야 합니다. 그렇지 않은 경우 명령 창을 열고 실행 npm install 하여 종속성을 설치합니다.

3. VS Code 명령 팔레트 열기(Mac의 Shift+Cmd+P | Windows에서 Shift+Ctrl+P) 및 Azure Functions: Azure에서 함수 앱 만들기를 선택합니다.

   

   참고 항목

   이 옵션이 표시되지 않으면 VS Code에 Azure Functions 확장이 설치되어 있는지 확인합니다.

4. 다음 정보를 입력하라는 메시지가 표시됩니다.

   • Azure 구독 이름.
   • 함수 이름: acsFunctions<YOUR_LAST_NAME>.

   참고 항목

   전역적으로 고유한 이름이 필요합니다. 이름 끝에 숫자나 성을 추가하여 이름을 더 고유하게 만들 수 있습니다.

   • 런타임 스택 - 최신 Node.js LTS 버전을 선택합니다.
   • 지역(원하는 지역 선택)입니다.

5. Azure Function App이 만들어지면 세부 정보 보기에 대한 메시지가 표시됩니다.

6. VS Code의 명령 팔레트로 돌아가서 Azure Functions: 함수 앱에 배포를 선택합니다. 구독 및 이전에 만든 함수 앱 이름을 선택하라는 메시지가 표시됩니다.

7. 함수가 Azure에 배포되면 다음을 수행합니다.

   • VS Code에서 Azure 확장을 선택합니다(사이드바에서 Azure 아이콘 클릭).
   • 구독을 확장합니다.
   • 함수 앱을 확장합니다.
   • 함수를 마우스 오른쪽 단추로 클릭하고 웹 사이트 찾아보기를 선택합니다. 계속하기 전에 함수 앱이 제대로 작동하는지 확인합니다.

8. Azure Function 도메인을 로컬 파일에 복사합니다. 이 연습의 뒷부분에서 이 값을 사용합니다.