여러 환경을 지원하도록 Angular 앱 구성

Angular 앱에는 개발과 생산이라는 두 가지 환경이 있지만 대부분의 경우 테스트나 품질 관리를 위해 서로 다른 환경에서 앱을 빌드하거나 시작하려고 합니다.

이 게시물에서는 여러 환경을 지원하도록 Angular 앱을 구성하는 방법을 살펴봅니다.

목차

Requirements

Project Setup

Project walk-through

Add staging configuration

Staging configuration explained

Conclusion

Sources

요구 사항

NodeJs

프로젝트 설정

Angular 프로젝트를 만들었다고 가정하고 다음 명령을 실행하여 새 프로젝트를 만듭니다.

터미널을 열고 Angular CLI를 전역적으로 설치합니다.

npm i -g @angular/cli

그런 다음 프로젝트를 만듭니다.

ng new my-app

위의 내용은 my-app 라는 프로젝트를 생성하고 앱에 들어가서 선호하는 IDE 또는 텍스트 편집기로 엽니다.

cd my-app && code .

프로젝트 연습

angular.json 구성 파일을 찾아 엽니다. 이 파일은 프로젝트의 루트에 있어야 합니다.

기본 개체 키를 접으면 다음이 표시됩니다.



이제 다음에서 찾을 수 있는 build 키로 작업할 것입니다.

projects > my-app > architect > build > configurations

기본 구성 개체는 다음과 같습니다.



이제 기본값, 개발 및 프로덕션을 볼 수 있습니다. 이 게시물을 위해 구성을 하나 더 추가할 것이지만 필요한 만큼 언제든지 추가할 수 있습니다.

스테이징 구성 추가

구성을 쉽게 추가하려면 프로덕션 항목을 복사하여 프로덕션 아래에 붙여넣고 항목 이름을 production에서 staging로 지정하고 다른 중요한 부분은 환경 파일 대체 이름을 prod에서 staging .

스테이징 구성 설명

위의 구성을 추가했을 때 어떤 일이 발생하는지 설명하려면 다음을 수행하십시오.

ng build --prod

프로덕션 빌드 프로세스를 트리거하고 자세히 살펴보면 environment.ts 변수와 함께 개발environment.prod.ts 파일 변수를 사용하고 environment.staging.ts와 함께 사용할 스테이징 구성에도 동일한 일이 발생합니다.

이제 이것이 지워졌으므로 스테이징 환경 파일을 생성하고 environments 폴더의 src 폴더로 이동하여 다음과 같이 생성합니다.



프로덕션 파일의 콘텐츠를 복사하여 붙여넣으면 준비 환경이 설정됩니다.

필요한 것은 구성을 지정하는 동안 빌드 명령을 실행하기 위해 해당 구성으로 앱을 실행하는 것입니다.

ng serve --prod --configuration staging

스테이징 구성으로 앱을 빌드하려면 다음을 수행하십시오.

ng build --prod --configuration staging

결론

Voila, 우리는 API URL 등과 같은 다양한 변수로 새로운 구성을 사용하고 있습니다.

출처

각진 documentation

언제나 그렇듯이, 여러분이 무언가를 배웠기를 바랍니다.

유용한 정보를 찾으셨나요? 친구들과 자유롭게 공유하십시오.

here의 뉴스레터에 가입하여 새 게시물과 업데이트를 알려주세요.

게시물이 좋아요? coffee ❤️ 구매를 고려하십시오.