연습 - Azure Functions 앱 생성 및 코드 리팩터링
이 연습에서는 Express 애플리케이션 대신 API를 실행하는 서버리스 Azure Functions 애플리케이션을 만듭니다. 그런 다음 Node.js Express 애플리케이션에서 Functions 애플리케이션으로 애플리케이션 논리를 마이그레이션합니다. 코드를 다시 작성하지 않아도 됩니다. 코드를 조금만 변경하면 전환할 수 있습니다.
새 Azure Functions 앱 만들기
Azure Functions용 Visual Studio Code 확장이 설치되어 있는지 확인합니다.
Visual Studio Code에서 F1 키를 눌러 명령 팔레트를 엽니다.
Azure Functions: 새 프로젝트 만들기를 입력하고 선택합니다.
리포지토리의 루트를 새 프로젝트의 위치로 선택합니다.
메시지가 표시되면 다음 값을 입력합니다.
속성 값 언어 TypeScript TypeScript 프로그래밍 모델 선택 모델 v4 템플릿 HTTP 트리거 이름 getVacations
애플리케이션의 API 엔드포인트를 제공하는 Functions 앱이 생성됩니다. 다음 단원에서는 휴가를 나열, 추가, 업데이트 및 삭제하는 함수를 만듭니다.
참고 항목
Functions 앱을 Angular 앱 과 구분하는 함수 폴더에 만들었습니다. 애플리케이션을 구성하는 방법을 결정할 수 있지만, 학습에 도움이 되도록 두 애플리케이션을 한 곳에서 확인하는 것이 좋습니다.
경로 처리기 코드 복사 및 리팩터링
데이터를 반환하는 Node.js Express 논리는 모두 server/services 폴더에 있습니다. Node.js Express 애플리케이션에서 Functions 애플리케이션으로 이 코드를 복사한 다음, 몇 가지 간단한 리팩터링을 수행하면 Node.js Express 대신 Functions에서 코드가 작동하게 할 수 있습니다.
다음 표에는 Node.js Express 애플리케이션과 Functions 애플리케이션 간의 핵심 차이점이 나와 있습니다.
| 구성 요소 | Node.js Express | Functions |
|---|---|---|
| 애플리케이션을 서비스하기 위핸 가져온 npm 패키지 | express |
@azure/functions |
| 요청 및 응답 개체 | req 및 res |
request 및 context |
먼저 적절한 npm 패키지를 가져오도록 코드를 리팩터링합니다. 그런 다음 Express와 Functions가 요청 및 응답 개체를 전달하는 방법의 차이를 처리할 수 있도록 리팩터링합니다.
Express 프로젝트에서 기존 코드 복사
Visual Studio Code에서 Express 애플리케이션의 서버 폴더에서 다음 하위 폴더를 복사하여 함수/폴더에 붙여넣습니다.
- 데이터
- models
- services
Azure Functions 앱에서 각 경로에 대한 새 함수를 만들므로 경로 폴더를 복사할 필요가 없습니다.
다음 단원으로 진행하여 함수를 만들고 엔드포인트와 경로를 리팩터링하세요.