Share via

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를 통해

  1. Visual Studio Code를 엽니다.

  2. 보기 메뉴에서 확장을 선택합니다.

  3. 검색 필드에 .를 입력합니다 Azure Developer CLI.

  4. 설치를 선택합니다.

Marketplace를 통해

  1. 브라우저를 사용하여 Azure 개발자 CLI - VS Code 확장 페이지로 이동합니다.

  2. 설치를 선택합니다.

새 앱 초기화

  1. Visual Studio Code에서 새 디렉터리를 만들고 엽니다.

  2. 보기 메뉴에서 명령 팔레트...를 선택합니다.

  3. 를 입력하고 선택합니다 Azure Developer: init.

    Screenshot of the option to initialize a new app.

  4. 템플릿 Azure-Samples/todo-nodejs-mongo을 선택합니다.

    Screenshot of selecting the todo-nodejs-mongo sample template.

디렉터리에 포함된 .vscode 다음 파일을 탐색합니다.

파일 설명
launch.json 디버그 웹 및 디버그 API와 같은 디버그 구성을 정의합니다. 디버그 구성 옵션을 보려면 보기 메뉴에서 실행을 선택합니다. 사용 가능한 디버그 구성이 창의 맨 위에 나열됩니다. Visual Studio Code의 디버깅에 대한 자세한 내용은 디버깅을 참조 하세요.
tasks.json 웹 또는 API 서버를 시작하는 구성을 정의합니다. 이러한 구성 옵션을 보려면 명령 팔레트를 열고 작업: 실행 태스크를 실행합니다. Visual Studio Code 작업에 대한 자세한 내용은 작업을 통해 외부 도구와 통합을 참조 하세요.

참고 항목

C# SWA-func MS SQL 템플릿을 사용하는 경우 API 시작 작업을 수동으로 시작한 다음, API 디버그(F5)를 시작해야 합니다. 실행 중인 .NET 프로세스 목록에서 선택하라는 메시지가 표시되면 애플리케이션의 이름을 검색하여 선택합니다.

Azure 리소스를 프로비전

디버깅을 시작하기 전에 필요한 Azure 리소스를 프로비전합니다.

  1. 명령 팔레트를 엽니다.

  2. Azure 개발자를 입력 합니다. Azure 리소스를 프로비전합니다.

    Screenshot of option to provision the Azure resources for a new app.

API 디버그

디버그 구성 디버그 API 는 자동으로 API 서버를 실행하고 디버거를 연결합니다. 이 패턴을 테스트하려면 다음 단계를 수행합니다.

  1. 프로젝트의 src/api/src/routes 디렉터리에서 을 엽니다 lists.ts.

  2. 줄 16에서 중단점을 설정합니다.

  3. 작업 모음에서 실행 및 디버그 디버그>API 디버그 구성 >디버깅 시작 화살표를 선택합니다.

    Screenshot of setting the debug configuration to Debug API.

  4. 보기 메뉴에서 디버그 콘솔을 선택합니다.

  5. 디버거가 포트 3100에서 수신 대기 중임을 나타내는 메시지를 기다립니다.

    Screenshot of the message in the Debug Console indicating the debugger is listening on port 3100.

  6. 기본 터미널 셸에서 다음 명령을 입력합니다. curl http://localhost:3100/lists

    Screenshot of using cURL to connect to the API server.

  7. 이전에 설정한 중단점이 적중되면 앱 실행이 일시 중지됩니다. 이 시점에서 다음과 같은 표준 디버깅 작업을 수행할 수 있습니다.

    • 변수 검사
    • 호출 스택 보기
    • 다른 중단점을 설정합니다.

  8. 앱을 계속 실행하려면 누릅니 <F5> 다. 샘플 앱은 빈 목록을 반환합니다.

React 프런트 엔드 앱 디버그

디버그 웹 구성을 사용하려면 다음을 모두 시작해야 합니다.

  • API 서버
  • 개발 웹 서버

이 패턴을 테스트하려면 다음 단계를 수행합니다.

  1. 명령 팔레트를 열고 작업: 실행 태스크를 실행 합니다.

    Screenshot of running a Visual Studio Code Task.

  2. API 및 웹 시작 입력 및 선택

    Screenshot of selecting the option to Start API and Web.

    웹 브라우저http://localhost:3000에서 다음 URL로 이동하여 로컬 웹 서버가 실행되는지 검사 수 있습니다.

  3. 프로젝트의 src/web/src/components 디렉터리에서 을 엽니다 todoItemListPane.tsx.

  4. 150줄(함수의 deleteItems 첫 번째 줄)에 중단점을 설정합니다.

  5. 작업 모음에서 디버깅 시작 화살표를 사용하여 실행 및 디>버그 웹 디버그 구성 > 을 선택합니다.

    Screenshot of setting the debug configuration to Debug Web.

  6. 웹앱을 실행하면 기본 브라우저에서 다음 URL http://localhost:3000이 열립니다. 이제 항목을 추가하고 목록에서 선택한 다음 삭제를 선택하여 앱을 디버그할 수 있습니다.

    Screenshot of the sample Node JS Mongo DB app.

  7. 이전에 설정한 중단점이 적중되면 앱 실행이 일시 중지됩니다. 이 시점에서 다음과 같은 표준 디버깅 작업을 수행할 수 있습니다.

    • 변수 검사
    • 호출 스택 보기
    • 다른 중단점 설정

  8. 앱을 계속 실행하려면 누릅니 <F5> 다. 그러면 선택한 항목이 삭제됩니다.

Visual Studio 및 Azure 개발자 CLI(azd)를 사용하여 로컬 머신에서 빌드된 앱을 실행하고 디버그합니다. 이 가이드에서는 Azure 템플릿에서 C# API 및 MongoDB와 함께 React Web App을 사용합니다. 이 문서에서 학습한 원칙을 Azure 개발자 CLI 템플릿에 적용할 수 있습니다.

필수 조건

미리 보기 기능 설치 및 사용

  1. Visual Studio 미리 보기 설치

    참고 항목

    Visual Studio와 다릅니다. 미리 보기가 아닌 Visual Studio 버전이 있는 경우에도 이 버전을 설치해야 합니다.

  2. Visual Studio 미리 보기를 엽니다.

  3. 도구 메뉴에서 옵션>미리 보기 기능을 선택합니다.

  4. azd와 통합해야 Azure 개발자 CLI 가 사용하도록 설정됩니다.

    Screenshot of the Visual Studio option to turn on integration with the Azure Developer CLI.

API 솔루션 열기

  1. Todo.Api.sln 디렉터리에서 /src/api 솔루션을 엽니다.

    통합 기능을azure.yaml 사용하도록 설정한 azd 경우 파일이 검색됩니다. Visual Studio는 앱 모델을 자동으로 초기화하고 실행됩니다 azd env refresh.

  2. 커넥트 서비스를 확장하여 모든 종속성을 확인합니다.

    Azure 앱 Service에서 실행되는 웹 프런트 엔드는 API 솔루션의 일부가 아니지만 서비스 종속성에서 검색되고 포함됩니다.

    Screenshot of the message indicating the Azure Developer CLI is initialized.

실행 및 디버그

  1. 프로젝트의 src/api 디렉터리에서 을 엽니다 ListController.cs.

  2. 줄 20에서 중단점을 설정합니다.

    Screenshot of the breakpoint set in the sample code.

  3. <F5>를 누릅니다.

  4. 웹 서버가 포트 3101에서 수신 대기 중임을 나타내는 메시지를 기다립니다.

    Screenshot of the status bar message indicating the debugger is listening on port 3101.

  5. 기본 설정 브라우저에서 다음 주소를 입력합니다. https://localhost:3101/lists

  6. 이전에 설정한 중단점이 적중되면 앱 실행이 일시 중지됩니다. 이 시점에서 다음과 같은 표준 디버깅 작업을 수행할 수 있습니다.

    • 변수 검사
    • 호출 스택 보기
    • 다른 중단점 설정

  7. 앱을 계속 실행하려면 누릅니 <F5> 다.

    샘플 앱은 이전에 웹 프런트 엔드를 시작하지 않은 경우 목록(또는 빈 목록 [])을 반환합니다.

    [{"id":"fb9c1cb3811349b993421fc0e815c4c1","name":"My List","description":null,"createdDate":"2022-06-27T01:10:16.7721172+00:00","updatedDate":null}]

기타 azd 통합

환경 관리 azd

환경을 관리하려면 다음을 수행합니다 azd .

  1. 서비스 종속성 창의 오른쪽 위 모서리에서 ...를 선택합니다.

  2. 드롭다운 메뉴에서 다음 옵션 중 하나를 선택합니다.

    • 새 환경 만들기
    • 현재 활성 환경으로 특정 환경 선택 및 설정
    • 환경 프로비전 해제

    Screenshot of the options to manage the Azure Developer CLI environment in Visual Studio.

환경 리소스 프로비전

환경에 Azure 리소스를 프로비전할 수 있습니다.

  1. 커넥트 서비스에서 오른쪽 위에 있는 아이콘을 클릭하여 환경 리소스를 복원/프로비전합니다.

    Screenshot of option to provision Azure Developer CLI environment resources in Visual Studio.

  2. 환경 이름, 구독 및 위치를 확인합니다.

앱 게시

업데이트를 수행하는 경우 다음 단계를 수행하여 앱을 게시할 수 있습니다.

  1. 솔루션 탐색기 커넥트 서비스를 확장합니다.

  2. 게시를 선택합니다.

  3. 게시 프로필 추가를 선택합니다.

  4. Azure의 대상을 선택하고 다음을 선택합니다.

  5. Azure 개발자 CLI 환경을 선택하고 다음을 선택합니다.

    Screenshot of message in Debug Console indicating debugger is listening on port 3100.

  6. 환경을 선택합니다.

  7. 마침을 선택합니다.

다른 리소스

도움말 요청

버그를 제출하거나, 도움말을 요청하거나, Azure 개발자 CLI에 대한 새 기능을 제안하는 방법에 대한 자세한 내용은 문제 해결 및 지원 페이지를 참조하세요.

다음 단계

GitHub Actions를 사용하여 파이프라인 구성 및 업데이트 푸시