이전

다음

연습 - Azure Functions와 Angular 실행 및 디버그

완료됨

이 연습에서는 Angular 애플리케이션과 Azure Functions 애플리케이션을 함께 실행하고 디버그합니다. 브라우저에서 웹앱을 표시하는 Angular 코드에, 그리고 휴가를 가져오고 렌더링하는 Functions 코드에 중단점을 설정합니다. 그런 다음 Angular 및 Functions 중단점을 바탕으로,디버거를 이용해 Functions 및 Angular 코드를 단계별로 실행합니다.

참고

.vscode/launch.json 및 .vscode/tasks.json 파일은 이 프로젝트의 디버깅 환경에 필수적입니다.

로컬 함수 스토리지에 대한 Azurite 시작

Azure Functions는 Azure Storage를 사용하여 데이터를 저장합니다. Azure Storage의 로컬 에뮬레이터인 Azurite를 사용하여 Functions 앱을 로컬로 실행할 수 있습니다. Azurite는 개발 목적으로 Azure Blob, Queue 및 Table Services를 에뮬레이트하는 로컬 환경을 제공합니다.

1. Visual Studio Code에서 새 터미널을 엽니다.

2. 다음 명령을 실행하여 Azurite를 시작합니다.

   npx -y azurite --location ./.azurite/data --debug ./.azurite/logs
   

   이 명령은 azurite를 설치하고 현재 디렉터리에서 시작합니다. 플래그는 --location 데이터의 위치를 지정하고 플래그는 --debug 로그의 위치를 지정합니다.

3. .gitignore 파일을 열고 다음 줄을 추가하여 Azurite 데이터 및 로그를 무시합니다.

   .azurite
   

   이 줄은 Azurite 데이터 및 로그가 리포지토리에 커밋되지 않도록 합니다.

중단점 설정

전체 스택 애플리케이션이 시작되면 Angular 프런트 엔드 클라이언트는 Functions 백 엔드 애플리케이션에서 휴가 데이터를 요청합니다. 두 애플리케이션은 함께 작동하여 데이터를 가져오고 브라우저에서 렌더링합니다.

휴가 목록을 표시하기 위해 Angular 애플리케이션은 vacations.component.ts 파일에서 getVacations() 함수를 실행합니다. 이 파일은 Azure Functions API에서 vacations 엔드포인트를 호출합니다. 파일 함수/getVacations.ts 엔드포인트의 경로를 정의합니다. 이러한 파일에서 중단점을 설정하므로, 휴가를 가져오는 코드를 디버깅 과정에서 단계별로 실행할 수 있습니다.

1. Visual Studio Code에서 애플리케이션의 src/app/vacations/vacations.component.ts 파일을 열고 getVacations() 함수를 찾습니다.

2. getVacations() 함수 안에 있는 코드의 첫 번째 줄인 this.vacationService.getAll(); 왼쪽에 있는 편집기 여백을 선택하여 중단점을 설정합니다.

   

3. functions/src/functions/getVacations.ts 파일을 열고, 줄 왼쪽 try { 에 있는 편집기의 여백을 선택하여 중단점을 설정합니다.

애플리케이션 실행 및 디버그

이제 Angular 및 Functions 앱 모두에 중단점이 있으므로, 두 앱을 함께 단계별로 실행하고 디버그할 수 있습니다.

참고

아직 Azure에서 함수를 실행하지 않았습니다. Azure Functions CLI(핵심 도구)를 사용하여 로컬로 실행하고 디버그합니다.

Angular에서 Azure Functions로 요청을 프록시

Azure Functions API는 포트 7071에서 실행되며, Angular 애플리케이션은 포트 4200에서 실행됩니다. Angular 애플리케이션은 도메인 전체에서 Functions 애플리케이션에 대한 요청을 수행할 수 없으며, 따라서 Angular 애플리케이션에서 Functions 애플리케이션으로 호출을 프록시합니다.

Angular 애플리케이션이 Functions 애플리케이션과 통신하고 요청을 프록시할 수 있게 하려면, proxy.conf.json을 열고 포트를 7071로 변경해야 합니다.

{
  "/api": {
    "target": "http://localhost:7071",
    "secure": false
  }
}

참고

Node.js Express 애플리케이션은 포트 7070을 사용했습니다. Node.js Express 애플리케이션을 제거한 경우, Functions 애플리케이션에 포트 7070을 사용할 수도 있습니다. 그러나 여기서는 학습이 목적이니 두 애플리케이션을 모두 유지해야 합니다.

두 애플리케이션 디버그

애플리케이션을 함께 실행하고 디버그하면, 앱이 중단점에서 일시 중지되므로 두 애플리케이션이 함께 작동하는 방식을 탐색할 수 있습니다.

1. F1 키를 눌러 Visual Studio Code 명령 팔레트를 엽니다.

2. 보기: 실행 및 디버그 표시를 입력하고 선택합니다.

3. 실행 및 디버그 창 상단의 드롭다운 목록에서 Functions 및 Angular 디버그를 선택합니다.

4. F5 키를 눌러 디버거를 시작합니다.

   애플리케이션이 시작되어 휴가 목록을 가져옵니다. Angular VacationComponent에서 휴가를 가져오기 위해 HTTP 요청을 시작합니다. 브라우저가 열리면 getVacations() 함수에 있는 vacations.component.ts 파일의 첫 번째 중단점에서 코드 실행이 일시 중지됩니다.

   

5. F5 키를 눌러 일시 중지를 해제하고 실행을 계속합니다.

6. Angular 애플리케이션이 Functions vacations 경로에 도달하므로, 코드는 functions/vacations-get/index.ts 파일의 두 번째 중단점에서 일시 중지됩니다. F5 키를 눌러 일시 중지를 해제하고 실행을 계속합니다.

7. 디버깅 프로세스는 Angular 및 Azure Functions에 하나씩 총 두 개가 실행되고 있습니다. Shift+F5를 눌러 활성 디버거를 중지합니다

8. Shift+F5를 눌러 나머지 디버거를 중지합니다

계속