연습 - Teams 탭 앱을 호스트하는 Azure 리소스 만들기

이 연습에서는 먼저 Visual Studio Code용 Teams 도구 키트를 사용하여 Teams 탭 앱을 만들고 프로비전합니다. 이후 연습에서는 Azure에서 호스트되도록 앱을 설정합니다.

참고

이 교육 모듈의 연습에서는 Teams 도구 키트 v5.0.0을 사용합니다. 다음 단계는 Teams 도구 키트 확장이 설치된 것으로 시작합니다.

새 탭 앱 만들기

Visual Studio Code의 활동 표시줄에서 Microsoft Teams 아이콘을 선택합니다.
Teams 도구 키트 패널에서 새 앱 만들기 단추를 선택합니다.
옵션에서 탭을 선택합니다.
다음으로 Fluent UI를 사용하여 React를 선택합니다.
프로그래밍 언어 옵션에서 JavaScript를 선택합니다.
탭 앱 프로젝트 폴더 및 모든 파일의 위치를 선택합니다.
애플리케이션 이름에 hello-tab을 입력하고 Enter 키를 선택합니다.

프로젝트 스캐폴딩이 시작됩니다. 프로젝트가 스캐폴드되면 새 프로젝트가 로드된 상태에서 새 Visual Studio Code 창이 열립니다.
Visual Studio Code에서 디버깅 시작실행을> 선택하거나 F5 키를 선택하여 디버그 세션을 시작합니다.

Visual Studio Code는 애플리케이션을 빌드하고 시작합니다. Azure 리소스 프로비저닝을 시작하기 전에 디버그 세션을 실행합니다.
앱이 성공적으로 테스트되면 로컬에서 앱 실행을 중지합니다.

디버그 세션을 종료하고 앱 실행을 중지하려면 브라우저를 닫거나디버깅 중지실행을> 선택하거나 Shift+F5를 선택합니다.

다음으로 Teams 도구 키트 패널에서 Azure에 로그인합니다.

이제 Teams 탭 앱에 필요한 리소스를 프로비전할 수 있습니다.

Teams 도구 키트 패널의 수명 주기에서 프로비전을 선택합니다.
다음으로 리소스를 프로비전할 수 있는 리소스 그룹을 선택해야 합니다. 리소스 그룹 선택 메뉴에서 새 리소스 그룹 옵션을 선택하여 새 리소스 그룹을 만듭니다.
이 도구는 rg-hello-tab0989fd-dev와 같은 리소스 그룹 이름을 자동으로 제안합니다. Enter를 선택합니다.
다음으로, 새 리소스 그룹에 대한 미국 동부 위치를 선택하고 Enter 키를 선택합니다.
선택 항목을 확인하는 대화 상자에서 프로비저닝을 선택합니다.

Azure에서 Teams 탭 앱을 호스트하는 데 필요한 모든 리소스에 대해 프로비저닝이 시작됩니다. 프로비전하는 데 시간이 걸릴 수 있습니다.

이제 Teams 탭 애플리케이션을 호스트하는 데 필요한 모든 리소스를 성공적으로 프로비전했습니다.

다음으로, 이러한 리소스에 앱의 소스 코드를 배포합니다.