Environment.ts(Angular)를 사용하여 여러 환경에서 Angular 애플리케이션 구축 및 제공-JS 튜토리얼-php.cn

Environment.ts(Angular)를 사용하여 여러 환경에서 Angular 애플리케이션 구축 및 제공

王林

풀어 주다： 2024-09-03 21:00:53

원래의

696명이 탐색했습니다.

Angular 개발자로서 개발(개발), 사용자 승인 테스트(UAT), 프로덕션 등 다양한 환경에 애플리케이션을 배포하는 것은 흔한 일입니다. 그러나 이러한 특정 환경에 맞게 코드를 끊임없이 변경하는 것은 지루하고 오류가 발생하기 쉬우며 효율성을 저해할 수 있습니다.

이 문서에서는 코드베이스를 수정하지 않고 강력한 Environment.ts 기능을 활용하여 다양한 환경에서 Angular 애플리케이션을 구축하고 제공하는 단계별 접근 방식을 설명합니다.

대본:

프런트엔드가 다양한 환경에서 호스팅되는 백엔드 API와 상호작용하는 Angular 애플리케이션을 상상해 보세요. 새로운 환경을 생성하고 구성하며 대상 환경을 기반으로 애플리케이션을 제공/구축하는 방법을 살펴보겠습니다.

환경 설정:

환경 파일 생성:

터미널에서 다음 명령을 실행하세요.

환경 생성

이렇게 하면 src 디렉터리 내에 초기 환경.ts 파일이 포함된 환경이라는 폴더가 생성됩니다. 기본적으로 이 파일은 개발 환경 구성 역할을 합니다.

Building and Serving Angular Applications Across Environments with environment.ts (Angular )

환경 변수 정의:

environment.ts를 열고 개발 환경 변수를 정의합니다.

export const environment = {
  production: false, //Set to False for development
  apiUrl: 'http://my-dev-url' //Replace with your development URL
};

로그인 후 복사

환경별 파일 생성:

UAT 및 프로덕션 환경의 경우 별도의 파일을 만듭니다.

environment.test.ts(UAT용)
Environment.prod.ts(프로덕션용)

해당 UAT 및 프로덕션 API URL을 다음 파일에 추가하세요.

// environment.test.ts (UAT)
export const environment = {
  production: false,
  apiUrl: 'http://my-uat-url'
};

// environment.prod.ts (Production)
export const environment = {
  production: true,
  apiUrl: 'http://my-prod-url'
};

로그인 후 복사

코드에서 환경 활용:

코드 내에서 API URL을 활용하려면:

environment.ts 가져오기:

'./environments/environment'에서 { 환경 } 가져오기;

액세스 API URL:

서비스 또는 구성 요소에 환경 변수를 삽입합니다.

export class MyService {
  constructor() {}
  apiUrl = environment.apiUrl;
}

로그인 후 복사

환경별 빌드를 위한 angle.json 구성:

대상 구성:

angular.json을 열고 "build" 아래의 "configurations" 섹션을 찾으세요. 이는 다양한 환경에 대한 빌드 구성을 정의합니다.

"configurations": {
  "production": {
    // Rest of the configs
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  },

"staging": {
    // Rest of the configs
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.test.ts"
      }
    ]
  },
  // ... other configurations
},

"defaultConfiguration": "production"

로그인 후 복사

이는 Angular CLI가 프로덕션 빌드 중에는 기본 Environment.ts를 Environment.prod.ts로 바꾸고 UAT 빌드의 경우 Environment.test.ts로 바꾸도록 지시합니다.

여러 환경에서 애플리케이션을 제공하기 위해 다음과 같이 angle.json 내에 제공 구성을 추가할 수 있습니다.

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": { … },
    "configurations": {
      "development": {
        // Use the `development` configuration of the `build` target.
        "buildTarget": "my-app:build:development"
      },
      "staging": {
        // Use the `development` configuration of the `build` target.
        "buildTarget": "my-app:build:staging"
      },
      "production": {
        // Use the `production` configuration of the `build` target.
        "buildTarget": "my-app:build:production"
      }
    },
    "defaultConfiguration": "development"
  },

로그인 후 복사