04.09.2024 в 13:05

Создание и обслуживание приложений Angular в различных средах с помощью Environment.ts (Angular 15+)

Для разработчика Angular развертывание вашего приложения в различных средах — разработке (dev), пользовательском приемочном тестировании (UAT) и рабочей среде — является обычным явлением. Однако постоянное изменение кода для удовлетворения этих особенностей среды может быть утомительным, подверженным ошибкам и снижающим эффективность.

В этой статье описывается пошаговый подход к созданию и обслуживанию вашего приложения Angular в различных средах без изменения кодовой базы, используя мощную функциональность Environment.ts.

Представьте себе приложение Angular, в котором интерфейс взаимодействует с серверными API, размещенными в разных средах. Давайте рассмотрим, как создавать новые среды, настраивать их и обслуживать/создавать приложение на основе целевой среды.

Настройка среды:

Создать файлы среды:

Запустите следующую команду в своем терминале:

ng generate environments

При этом в каталоге src создается папка с именем Environments, содержащая исходный файл Environment.ts. По умолчанию этот файл служит конфигурацией вашей среды разработки.

Определение переменных среды:

Откройте файл Environment.ts и определите переменные среды разработки:

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

Создание файлов для конкретной среды:

Для сред UAT и Production создайте отдельные файлы:

environment.test.ts (for UAT)

environment.prod.ts (for Production)

Добавьте соответствующие URL-адреса UAT и Production API в эти файлы:

// 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'
};

Использование окружения в коде

Чтобы использовать URL-адрес API в своем коде:

Импортируйте файл Environment.ts:

import { environment } from './environments/environment';

URL-адрес доступа к API:

В свой сервис или компонент добавьте переменную среды:

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

Настройка angular.json для сборок, специфичных для среды:

Целевые конфигурации:

Откройте angular.json и найдите раздел «Конфигурации» в разделе «Сборка». Это определяет конфигурации сборки для различных сред.

"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 во время производственных сборок и на Environment.test.ts для сборок UAT.

Для обслуживания приложений в нескольких средах вы можете добавить конфигурации обслуживания внутри angular.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, используйте:

ng serve --configuration=staging

Заключение

Использование конфигураций, специфичных для конкретной среды, значительно расширяет возможности разработчика. Он предлагает понятный и удобный в обслуживании подход, оптимизирующий развертывание приложений в различных средах и в конечном итоге сокращающий среднее время разработки (MTTP).

Источник:

Exit fullscreen mode

#JavaScript #Angular

Войти на сайт