개발 중인 Angular 앱 실행하기

Angular CLI 애플리케이션은 ng serve 명령어로 실행할 수 있습니다. 이 명령어는 애플리케이션을 컴파일하고 불필요한 최적화 과정을 건너뛴 뒤 개발 서버를 시작하며, 이후 변경 사항이 생기면 자동으로 다시 빌드하고 실시간으로 새로고침합니다. 서버를 중지하려면 Ctrl+C를 누르면 됩니다.

ng serve는 angular.json에 지정된 기본 프로젝트에서 serve 대상으로 설정한 빌더만 실행합니다. 어떤 빌더든 사용할 수 있지만, 가장 일반적으로 사용하는 기본 빌더는 @angular/build:dev-server입니다.

특정 프로젝트에서 어떤 빌더를 사용하는지 알아보려면 해당 프로젝트의 serve 대상을 확인하면 됩니다.

{
  "projects": {
    "my-app": {
      "architect": {
        // `ng serve`는 `serve`라는 Architect 대상을 실행합니다.
        "serve": {
          "builder": "@angular/build:dev-server"
          // ...
        },
        "build": {/* ... */},
        "test": {/* ... */}
      }
    }
  }
}

백엔드 서버로 프록시하기

--proxy-config 빌드 옵션에 파일을 전달하면 프록시 기능을 사용해서 특정 URL의 요청을 백엔드 서버로 보낼 수 있습니다. 예를 들어 http://localhost:4200/api로 보내는 모든 요청을 http://localhost:3000/api에서 실행 중인 서버로 보내려면 다음과 같이 하면 됩니다.

1. 프로젝트의 src/ 폴더에 proxy.conf.json 파일을 생성합니다.
2. 생성한 프록시 파일에 다음 내용을 추가합니다:

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

1. CLI 설정 파일인 angular.json에서 serve 대상에 proxyConfig 옵션을 추가합니다:

{
  "projects": {
    "my-app": {
      "architect": {
        "serve": {
          "builder": "@angular/build:dev-server",
          "options": {
            "proxyConfig": "src/proxy.conf.json"
          }
        }
      }
    }
  }
}

1. 이 프록시 설정으로 개발 서버를 실행하려면 ng serve를 실행합니다.

경로 매칭 방식

• /api는 /api와 /api/users/123, /api-docs처럼 해당 문자열로 시작하는 모든 경로에 매칭됩니다.
• /api/*는 /api/users에 매칭되지만 /api나 /api/users/123에는 매칭되지 않습니다.
• /api/**는 /api, /api/users, /api/users/123에 매칭되지만 /api-docs에는 매칭되지 않습니다.