애플리케이션 환경 설정하기

프로젝트에 development, staging과 같이 이름이 있는 빌드 설정을 여러 개 정의하고 서로 다른 기본값을 지정할 수 있습니다.

이름이 있는 각 설정에는 build, serve, test 등 다양한 빌더 대상에 적용되는 옵션의 기본값을 지정할 수 있습니다. 그러면 Angular CLI의 build, serve, test 명령어가 대상 환경에 맞는 파일로 교체할 수 있습니다.

Angular CLI 설정

Angular CLI 빌더는 configurations 객체를 지원합니다. 이 객체를 사용하면 명령줄에서 지정한 설정에 따라 빌더의 특정 옵션을 덮어쓸 수 있습니다.

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            // 기본적으로 소스 맵을 생성하지 않습니다.
            "sourceMap": false
          },
          "configurations": {
            // `debug` 설정에서는 소스 맵을 생성합니다.
            "debug": {
              "sourceMap": true
            }
          }
        },
        …
      }
    }
  }
}

사용할 설정은 --configuration 옵션으로 선택합니다.

ng build --configuration debug

설정은 모든 Angular CLI 빌더에 적용할 수 있습니다. 쉼표로 구분해서 여러 설정을 지정할 수도 있습니다. 설정은 지정한 순서대로 적용되며, 옵션이 충돌하면 마지막 설정의 값을 사용합니다.

ng build --configuration debug,production,customer-facing

환경별 기본값 설정하기

@angular/build:application은 빌드 실행 전에 소스 파일을 다른 파일로 바꾸는 파일 교체 옵션을 지원합니다. 이 옵션을 --configuration과 함께 사용하면 애플리케이션의 환경별 데이터를 설정할 수 있습니다.

먼저 환경 파일 생성 명령어를 실행해서 src/environments/ 디렉터리를 만들고 프로젝트가 파일 교체 기능을 사용하도록 설정하세요.

ng generate environments

프로젝트의 src/environments/ 디렉터리에는 프로덕션 기본 설정을 제공하는 기본 설정 파일 environment.ts가 있습니다. development, staging 등의 추가 환경에서는 대상별 설정 파일로 기본값을 덮어쓸 수 있습니다.

예를 들면 다음과 같습니다:

my-app/src/environments
├── environment.development.ts
├── environment.staging.ts
└── environment.ts

기본 파일인 environment.ts에는 기본 환경 설정이 들어 있습니다. 예를 들면 다음과 같습니다:

export const environment = {
  production: true,
};

환경을 지정하지 않으면 build 명령어는 이 설정을 빌드 대상으로 사용합니다. 환경 객체에 프로퍼티를 추가하거나 별도 객체를 만들어 변수를 더 추가할 수 있습니다. 예를 들어 기본 환경에 변수의 기본값을 추가하면 다음과 같습니다:

export const environment = {
  production: true,
  apiUrl: 'http://my-prod-url',
};

environment.development.ts와 같은 대상별 설정 파일을 추가할 수 있습니다. 다음 내용은 개발 빌드 대상의 기본값을 설정합니다:

export const environment = {
  production: false,
  apiUrl: 'http://my-dev-url',
};

앱에서 환경별 변수 사용하기

정의한 환경 설정을 사용하려면 컴포넌트에서 원래 환경 파일을 가져와야 합니다:

import {environment} from './environments/environment';

그러면 빌드 및 실행 명령어가 특정 빌드 대상에 맞는 설정을 찾을 수 있습니다.

다음 컴포넌트 파일(app.ts)의 코드는 설정 파일에 정의된 환경 변수를 사용합니다.

import {environment} from './../environments/environment';

// 프로덕션에서는 `http://my-prod-url`, 개발 환경에서는 `http://my-dev-url`에서 데이터를 가져옵니다.
fetch(environment.apiUrl);

CLI의 기본 설정 파일 angular.json에서 각 빌드 대상의 설정에는 fileReplacements 항목을 지정할 수 있습니다. 이를 통해 TypeScript 프로그램의 파일을 해당 대상에 맞는 파일로 교체할 수 있습니다. 프로덕션이나 스테이징처럼 특정 환경을 대상으로 빌드할 때 해당 환경에 맞는 코드나 변수를 포함하는 데 유용합니다.

기본적으로는 파일을 교체하지 않지만 ng generate environments를 실행하면 이 설정이 자동으로 추가됩니다. angular.json 설정을 직접 편집해서 특정 빌드 대상의 파일 교체 설정을 수정하거나 추가할 수 있습니다.

"configurations": {
  "development": {
    "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.development.ts"
        }
      ],
      …

이 설정에서는 ng build --configuration development로 개발 설정을 빌드하면 src/environments/environment.ts 파일이 대상별 파일인 src/environments/environment.development.ts로 교체됩니다.

스테이징 환경을 추가하려면 src/environments/environment.ts를 src/environments/environment.staging.ts라는 이름으로 복사한 뒤 angular.json에 staging 설정을 추가하세요:

"configurations": {
  "development": { … },
  "production": { … },
  "staging": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.staging.ts"
      }
    ]
  }
}

이 대상 환경에 다른 설정 옵션도 추가할 수 있습니다. 빌더가 지원하는 옵션은 모두 빌드 대상 설정에서 덮어쓸 수 있습니다.

스테이징 설정으로 빌드하려면 다음 명령어를 실행하세요:

ng build --configuration staging

기본적으로 build 대상에는 production과 development 설정이 포함되며 ng serve는 애플리케이션의 개발 빌드를 사용합니다. buildTarget 옵션을 지정하면 ng serve가 특정 빌드 설정을 사용하도록 구성할 수도 있습니다:

"serve": {
  "builder": "@angular/build:dev-server",
  "options": { … },
  "configurations": {
    "development": {
      // `build` 대상의 `development` 설정을 사용합니다.
      "buildTarget": "my-app:build:development"
    },
    "production": {
      // `build` 대상의 `production` 설정을 사용합니다.
      "buildTarget": "my-app:build:production"
    }
  },
  "defaultConfiguration": "development"
},

defaultConfiguration 옵션은 기본으로 사용할 설정을 지정합니다. defaultConfiguration을 지정하지 않으면 options를 수정 없이 그대로 사용합니다.