연습 - 샘플 프로젝트 설정 및 검색

  • 5분

이 단원에서는 GitHub에서 기존 애플리케이션의 코드를 가져오고, 코드를 준비하고, 개발 환경을 설정합니다.

코드 가져오기 및 준비하기

  1. Bash 터미널에서 코드 리포지토리를 복제합니다.

    git clone https://github.com/MicrosoftDocs/mslearn-module-shifting-nodejs-express-apis-to-serverless learn-functions

  2. 코드 리포지토리 디렉터리로 변경합니다.

    cd learn-functions

  3. npm 패키지 종속성을 설치합니다.

    npm install

  4. Node.js Express 및 Angular 코드를 빌드합니다.

    npm run full:build

애플리케이션 구조 이해

샘플 애플리케이션은 다음 엔드포인트를 제공하는 네 가지 메서드가 있는, 전통적인 Node.js 및 Express API입니다.

메서드 경로 엔드포인트
GET vacations
POST vacations
PUT vacations:id
DELETE vacations/:id

Visual Studio Code 프로젝트를 열고 서버 폴더를 열어 API의 구조를 탐색합니다.

server
 | - data
 | | - vacations.json
 | - models
 | | - vacation.model.ts
 | - routes
 | | - index.ts            👈 1. Entry point
 | | - vacation.routes.ts  👈 2. The vacation routes
 | - services
 | | - index.ts
 | | - vacation.service.ts 👈 3. The logic and data 
 | - index.ts
 | - server.ts             👈 The Express server
 | - tsconfig.json
  1. 진입점은 server/index.ts 파일입니다. 이 파일은 server.ts 코드를 실행하여 Express 서버를 시작합니다.
  2. 이렇게 하면 /routes 폴더로부터 /vacations 같은 경로가 로드됩니다.
  3. 이러한 경로는 /services 폴더에서 적절한 코드를 실행합니다. 데이터 저장소 구성은 vacation.service.ts 파일에 정의됩니다.

Angular 클라이언트 앱은 경로에 /api/vacations 대한 요청을 수행하고 HTTP GET 경로는 routes/vacation.routes.ts 파일의 데이터 논리를 services/vacation.service.ts 호출하여 휴가를 가져옵니다.

프록시 구성

Angular 애플리케이션은 Node.js Express API에 요청할 수 있어야 합니다. Angular 애플리케이션은 프록시를 사용하여 Express 서버에 요청을 전달합니다. 프록시를 설정하면 브라우저가 Express 서버를 찾을 수 있습니다. proxy.conf.json 열고 포트가 Express 앱의 포트로 7070설정되어 있는지 확인합니다.

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