[angular] 빌드 구성

26 Dec 2023

angular

Angular 프로젝트를 릴리스 및 배포하기 위해 빌드 단계를 설정해야 합니다. Angular CLI를 통해 애플리케이션을 프로덕션 빌드할 때는 몇 가지 주요 구성 요소를 고려해야 합니다. 이 기사에서는 Angular 애플리케이션을 빌드하기 위한 구성에 대해 살펴보겠습니다.

설정 방법

Angular 프로젝트의 빌드를 구성하려면 angular.json 파일을 사용합니다. 이 파일은 프로젝트 구성을 저장하는 데 사용되며, 프로젝트의 구조, 빌드 옵션 및 배포 설정이 포함되어 있습니다.

다음은 angular.json 파일에서 빌드 구성을 위한 주요 구성 요소입니다.

빌드 옵션 설정: angular.json 파일 내부의 architect.build.options 섹션에서 빌드 옵션을 구성합니다. 이 섹션에서는 빌드 동작에 대한 다양한 설정(예: 소스 맵 생성 여부, AOT 컴파일 사용 여부, 압축 등)을 지정할 수 있습니다.

예시:

 "architect": {
     "build": {
         "options": {
             "outputPath": "dist/my-app",
             "sourceMap": false,
             "aot": true,
             "vendorChunk": false
         }
     }
 }

환경 구성: angular.json 파일 내부의 architect.build.configurations 섹션에서 다양한 환경에 대한 빌드 구성을 지정할 수 있습니다. 이를 통해 개발, 스테이징, 프로덕션과 같은 다양한 환경에 맞춘 빌드를 수행할 수 있습니다.

예시:

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

빌드 및 배포 스크립트: 빌드가 완료된 후 추가 작업(예: 자산 압축, 파일 이동, 배포 스크립트 실행)을 위해 package.json 파일에 사용자 지정 스크립트를 추가할 수 있습니다.

예시:
```
 "scripts": {
     "build:prod": "ng build --configuration=production && custom-script.sh"
 }
```

결론

빌드 구성은 Angular 애플리케이션의 성능, 안정성 및 보안에 중요한 영향을 미칩니다. 따라서 적절한 빌드 옵션 및 환경 구성을 설정하여 프로덕션 릴리스에 적합한 빌드를 수행하는 것이 매우 중요합니다. Angular CLI 및 angular.json 파일을 효과적으로 활용하여 이러한 빌드 구성을 쉽게 관리할 수 있습니다.

참고문헌: