Azure Developer CLI에 대해 사용하도록 설정된 앱 실행 및 디버그
Azure 개발자 CLI(azd
)용 Visual Studio Code 확장을 사용하여 로컬 컴퓨터에서 앱을 실행하고 디버그합니다. 이 가이드에서는 Azure 템플릿에서 Node.js API 및 MongoDB와 React Web App을 사용합니다. 이 문서에서 학습한 원칙을 Azure 개발자 CLI 템플릿에 적용할 수 있습니다.
필수 조건
Azure Developer CLI용 Visual Studio Code 확장 설치
Visual Studio Code를 통해
Visual Studio Code를 엽니다.
보기 메뉴에서 확장을 선택합니다.
검색 필드에 .를 입력합니다
Azure Developer CLI
.설치를 선택합니다.
Marketplace를 통해
브라우저를 사용하여 Azure 개발자 CLI - VS Code 확장 페이지로 이동합니다.
설치를 선택합니다.
새 앱 초기화
Visual Studio Code에서 새 디렉터리를 만들고 엽니다.
보기 메뉴에서 명령 팔레트...를 선택합니다.
를 입력하고 선택합니다
Azure Developer: init
.템플릿
Azure-Samples/todo-nodejs-mongo
을 선택합니다.
디렉터리에 포함된 .vscode
다음 파일을 탐색합니다.
파일 | 설명 |
---|---|
launch.json |
디버그 웹 및 디버그 API와 같은 디버그 구성을 정의합니다. 디버그 구성 옵션을 보려면 보기 메뉴에서 실행을 선택합니다. 사용 가능한 디버그 구성이 창의 맨 위에 나열됩니다. Visual Studio Code의 디버깅에 대한 자세한 내용은 디버깅을 참조 하세요. |
tasks.json |
웹 또는 API 서버를 시작하는 구성을 정의합니다. 이러한 구성 옵션을 보려면 명령 팔레트를 열고 작업: 실행 태스크를 실행합니다. Visual Studio Code 작업에 대한 자세한 내용은 작업을 통해 외부 도구와 통합을 참조 하세요. |
참고 항목
C# SWA-func MS SQL 템플릿을 사용하는 경우 API 시작 작업을 수동으로 시작한 다음, API 디버그(F5)를 시작해야 합니다. 실행 중인 .NET 프로세스 목록에서 선택하라는 메시지가 표시되면 애플리케이션의 이름을 검색하여 선택합니다.
Azure 리소스를 프로비전
디버깅을 시작하기 전에 필요한 Azure 리소스를 프로비전합니다.
명령 팔레트를 엽니다.
Azure 개발자를 입력 합니다. Azure 리소스를 프로비전합니다.
API 디버그
디버그 구성 디버그 API 는 자동으로 API 서버를 실행하고 디버거를 연결합니다. 이 패턴을 테스트하려면 다음 단계를 수행합니다.
프로젝트의
src/api/src/routes
디렉터리에서 을 엽니다lists.ts
.줄 16에서 중단점을 설정합니다.
작업 모음에서 실행 및 디버그 디버그>API 디버그 구성 >디버깅 시작 화살표를 선택합니다.
보기 메뉴에서 디버그 콘솔을 선택합니다.
디버거가 포트 3100에서 수신 대기 중임을 나타내는 메시지를 기다립니다.
기본 터미널 셸에서 다음 명령을 입력합니다.
curl http://localhost:3100/lists
이전에 설정한 중단점이 적중되면 앱 실행이 일시 중지됩니다. 이 시점에서 다음과 같은 표준 디버깅 작업을 수행할 수 있습니다.
- 변수 검사
- 호출 스택 보기
- 다른 중단점을 설정합니다.
앱을 계속 실행하려면 누릅니
<F5>
다. 샘플 앱은 빈 목록을 반환합니다.
React 프런트 엔드 앱 디버그
디버그 웹 구성을 사용하려면 다음을 모두 시작해야 합니다.
- API 서버
- 개발 웹 서버
이 패턴을 테스트하려면 다음 단계를 수행합니다.
명령 팔레트를 열고 작업: 실행 태스크를 실행 합니다.
API 및 웹 시작 입력 및 선택
웹 브라우저
http://localhost:3000
에서 다음 URL로 이동하여 로컬 웹 서버가 실행되는지 검사 수 있습니다.프로젝트의
src/web/src/components
디렉터리에서 을 엽니다todoItemListPane.tsx
.150줄(함수의
deleteItems
첫 번째 줄)에 중단점을 설정합니다.작업 모음에서 디버깅 시작 화살표를 사용하여 실행 및 디>버그 웹 디버그 구성 > 을 선택합니다.
웹앱을 실행하면 기본 브라우저에서 다음 URL
http://localhost:3000
이 열립니다. 이제 항목을 추가하고 목록에서 선택한 다음 삭제를 선택하여 앱을 디버그할 수 있습니다.이전에 설정한 중단점이 적중되면 앱 실행이 일시 중지됩니다. 이 시점에서 다음과 같은 표준 디버깅 작업을 수행할 수 있습니다.
- 변수 검사
- 호출 스택 보기
- 다른 중단점 설정
앱을 계속 실행하려면 누릅니
<F5>
다. 그러면 선택한 항목이 삭제됩니다.
Visual Studio 및 Azure 개발자 CLI(azd
)를 사용하여 로컬 머신에서 빌드된 앱을 실행하고 디버그합니다. 이 가이드에서는 Azure 템플릿에서 C# API 및 MongoDB와 함께 React Web App을 사용합니다. 이 문서에서 학습한 원칙을 Azure 개발자 CLI 템플릿에 적용할 수 있습니다.
필수 조건
미리 보기 기능 설치 및 사용
-
참고 항목
Visual Studio와 다릅니다. 미리 보기가 아닌 Visual Studio 버전이 있는 경우에도 이 버전을 설치해야 합니다.
Visual Studio 미리 보기를 엽니다.
도구 메뉴에서 옵션>미리 보기 기능을 선택합니다.
azd와 통합해야 Azure 개발자 CLI 가 사용하도록 설정됩니다.
API 솔루션 열기
Todo.Api.sln
디렉터리에서/src/api
솔루션을 엽니다.통합 기능을
azure.yaml
사용하도록 설정한azd
경우 파일이 검색됩니다. Visual Studio는 앱 모델을 자동으로 초기화하고 실행됩니다azd env refresh
.커넥트 서비스를 확장하여 모든 종속성을 확인합니다.
Azure 앱 Service에서 실행되는 웹 프런트 엔드는 API 솔루션의 일부가 아니지만 서비스 종속성에서 검색되고 포함됩니다.
실행 및 디버그
프로젝트의
src/api
디렉터리에서 을 엽니다ListController.cs
.줄 20에서 중단점을 설정합니다.
<F5>
를 누릅니다.웹 서버가 포트 3101에서 수신 대기 중임을 나타내는 메시지를 기다립니다.
기본 설정 브라우저에서 다음 주소를 입력합니다.
https://localhost:3101/lists
이전에 설정한 중단점이 적중되면 앱 실행이 일시 중지됩니다. 이 시점에서 다음과 같은 표준 디버깅 작업을 수행할 수 있습니다.
- 변수 검사
- 호출 스택 보기
- 다른 중단점 설정
앱을 계속 실행하려면 누릅니
<F5>
다.샘플 앱은 이전에 웹 프런트 엔드를 시작하지 않은 경우 목록(또는 빈 목록 [])을 반환합니다.
[{"id":"fb9c1cb3811349b993421fc0e815c4c1","name":"My List","description":null,"createdDate":"2022-06-27T01:10:16.7721172+00:00","updatedDate":null}]
기타 azd
통합
환경 관리 azd
환경을 관리하려면 다음을 수행합니다 azd
.
서비스 종속성 창의 오른쪽 위 모서리에서 ...를 선택합니다.
드롭다운 메뉴에서 다음 옵션 중 하나를 선택합니다.
- 새 환경 만들기
- 현재 활성 환경으로 특정 환경 선택 및 설정
- 환경 프로비전 해제
환경 리소스 프로비전
환경에 Azure 리소스를 프로비전할 수 있습니다.
커넥트 서비스에서 오른쪽 위에 있는 아이콘을 클릭하여 환경 리소스를 복원/프로비전합니다.
환경 이름, 구독 및 위치를 확인합니다.
앱 게시
업데이트를 수행하는 경우 다음 단계를 수행하여 앱을 게시할 수 있습니다.
솔루션 탐색기 커넥트 서비스를 확장합니다.
게시를 선택합니다.
게시 프로필 추가를 선택합니다.
Azure의 대상을 선택하고 다음을 선택합니다.
Azure 개발자 CLI 환경을 선택하고 다음을 선택합니다.
환경을 선택합니다.
마침을 선택합니다.
다른 리소스
도움말 요청
버그를 제출하거나, 도움말을 요청하거나, Azure 개발자 CLI에 대한 새 기능을 제안하는 방법에 대한 자세한 내용은 문제 해결 및 지원 페이지를 참조하세요.
다음 단계
피드백
https://aka.ms/ContentUserFeedback
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요.다음에 대한 사용자 의견 제출 및 보기