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

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

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

대본:

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

환경 설정:

환경 파일 생성:

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

환경 생성

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

환경 변수 정의:

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"
  },

특정 환경을 위한 구축 및 서비스:

프로덕션용 빌드:

프로덕션용 애플리케이션을 구축하려면 다음을 사용하세요.

ng build --configuration=production

angular.json에 정의된 구성 이름 사용(우리 시나리오에서는 프로덕션, 스테이징)

UAT를 위한 봉사:

UAT에 대한 애플리케이션을 제공하려면 다음을 사용하세요.

ng 봉사 --configuration=staging

결론

환경별 구성을 사용하면 개발자 경험이 크게 향상됩니다. 깔끔하고 유지 관리 가능한 접근 방식을 제공하여 다양한 환경에서 애플리케이션 배포를 간소화하고 궁극적으로 MTTP(평균 생산 시간)를 단축합니다.

또한 이 기사를 재미있게 읽으셨다면 여기에서 저에 대해 더 자세히 알아볼 수 있습니다.

위 내용은 Environment.ts(Angular)를 사용하여 여러 환경에서 Angular 애플리케이션 구축 및 제공의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!