Angular 빌드 실행 환경 분리

Angular 개발할때  local, stg, prod 등 빌드 환경을 분리해야 하는 경우가 있다.

 

1. 기본 제공 환경

프로젝트를 생성하면 기본적으로 두개의 environment 파일이 생성된다.

└──myProject/src/environments/
                   └──environment.ts
                   └──environment.prod.ts

빌드 환경을 따로 지정하지 않은 상태로 build 명령을 실행하면 environment.ts 파일이 기본으로 사용되고

실행옵션으로 --prod 를 추가하면 environment.prod.ts 파일을 참조하여 실행된다.

• ng build  → environment.ts 참조하여 build
• ng build --prod → environment.prod.ts 참조하여 build

2. 환경설정 추가하기 : stg 환경을 추가할경우

 environment.ts 파일을 복사해서 environment.stg.ts 파일을 만들고

 stg 환경에 대한 설정을 angular.json 파일에 다음과 같이 추가하고

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

 stg 환경에서 build를 수행하려면 다음 명령을 실행한다.

• ng build --configuration=stg → environment.stg.ts 참조하여 build

 

3. 실행환경

빌드 환경과 마찬가지로 실행환경도 비슷하다.

• ng serve  → environment.ts 참조하여 실행
• ng serve --prod  → environment.prod.ts 참조하여 실행 

 

4. 실행환경 추가 : 위에서 생성한 stg 환경에서 실행하기

  새로 추가한 환경으로 ng serve 명령을 실행하려면 angular.json 파일의 "serve:configurations" 내용을 다음과 같이 수정(추가)한다.

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-project-name:build"
  },
  "configurations": {
      "stg": {
      "browserTarget": "your-project-name:build:stg"
    }
  }
},

  stg 환경에서 ng serve를 수행하려면 다음 명령을 실행한다.

• ng serve --aot --configuration=stg → environment.stg.ts 참조하여 실행

 

참고 : https://angular.kr/guide/build