Angular에서 배포 또는 실행 환경(environment) 추가하는 방법

Angular에서 배포 또는 실행 환경(environment) 추가하는 방법

프로젝트를 build할 때 내부적으로 QA 테스트를 위해 환경과 배포할 때의 환경을 다르게 해야할 때가 있습니다. QA할 때의 Server 주소와 배포할 때의 Server 주소가 다른 경우와 같이 말이죠.

Angular에선 특정 환경에 맞게 build(또는 실행)를 하는 것이 가능한데요. 이번 글에선 build(또는 실행) 환경을 추가하고 그 결과를 출력해보도록 하겠습니다.

일반적으로 Angular CLI의 ng new 명령어를 통해 Angular 프로젝트를 생성하실 경우 environments 폴더가 생성되고 안에는 아래의 두 ts 파일이 있는 것을 확인할 수 있습니다.

environment.prod.ts environment.ts

설정변경 없이 ng serve 를 해서 프로젝트를 실행할 경우엔 environment.ts 를 참조하고 build를 하면 environment.prod.ts 를 참조하게 됩니다.

실제로 참조하는 파일이 바뀌는지 확인하기 위해 AppComponent에서 로그를 찍어보겠습니다.

ngOnInit(): void { console.log(environment.production); }

먼저 ng serve를 하고 Console을 열어보면 아래와 같이 로그가 출력된 것을 확인할 수 있습니다.

false

그리고 ng serve — prod를 하시면 Console에 아래와 같이 로그가 출력되게 됩니다.

true

그렇다면 여기에 더하여 내부적으로 특수한 환경이 필요한 경우를 추가해야 할 경우 어떻게 하면 될까요?

environments 폴더 안에 ts 파일을 추가한 후 angular.json 파일 내에 환경을 추가해주면 됩니다.

테스트를 위해 qa라는 환경을 environments 폴더 안에 추가해보겠습니다. 파일 이름은 environment.qa.ts로 하였습니다(추가되는 환경 이름은 environment.[환경].ts 규칙을 가집니다).

export const environment = { production: false, qa: true }

그리고 angular.json에 qa 환경을 추가해줍니다.

“serve”: { … “configurations”: { “production”: { “browserTarget”: “project-name:build:production” }, “qa”: { “browserTarget”: “project-name:build:a” } } }

AppComponent 에서 출력하던 로그를 아래와 같이 변경해줍니다.

ngOnInit(): void { console.log(environment?.qa); }

이제 qa 환경일 때 출력이 되는지 확인하기 위해 아래 명령어를 실행해 줍니다.

ng serve --configuration=qa 또는 ng serve -c qa

명령어 실행 후 Console을 출력하시면 true 값이 출력되는 것을 확인할 수 있습니다.

만약 ng serve가 아닌 ng build를 할 때도 적용하고 싶다면 아래와 같이 angular.json에 설정을 추가 후

“architect”: { “build”: { … “configurations”: { “production”: { “fileReplacements”: [ { “replace”: “src/environments/environment.ts”, “with”: “src/environments/environment.prod.ts” } ] }, “qa”: { “fileReplacements”: [ { “replace”: “src/environments/environment.ts”, “with”: “src/environments/environment.qa.ts” } ] } } } }

아래 명령어를 실행시켜주시면 됩니다.

ng build --configuration=qa 또는 ng build -c qa

필요한 상황에 따라 환경을 추가하여 serve 또는 build를 하면 간편하게 설정을 변화시킬 수 있습니다.

from http://clap-yeon.tistory.com/81 by ccl(A) rewrite - 2021-12-02 19:01:18