Управление переменными среды в Ionic 2

Перекрестное сообщение от https://blog.f5.works/managing-environment-variables-in-ionic-2-3/

Эта проблема

При разработке приложений Ionic 2 очень часто разработчики хотят хранить разные значения конфигурации приложения в разных средах. Например, URL-адреса API серверной части в разработке и производстве различаются. Или два разных ключа Google Map Api используются в среде контроля качества и в производственной среде.

Наш подход в F5 Works

• Хранение пар KEY = VALUE в одном файле .env, которые соответствуют методологии Двенадцатифакторное приложение.
• Внедрить содержимое .env в глобальную переменную ENV в процессе сборки Ionic (мы используем Webpack, но аналогичный подход может применяться к другим сборщикам, таким как RollupJS)
• Создайте инъекционный класс AppConfig, к которому можно будет получить доступ в приложении и который можно легко смоделировать для простоты тестирования.

Рецепт

Шаг 1. Создайте .env в корне проекта (хранилище KEY = VALUE)

API_URL=http://localhost:3000/api/v1  
GOOGLE_MAP_API_KEY=XxxYyyZzz

ПРИМЕЧАНИЕ: вам следует git игнорировать файл .env

Шаг 2. Добавьте содержимое .env в глобальную переменную ENV

• создайте config / webpack.config.js с содержимым ниже

var dotenvConfig = require('dotenv').config();  
var _ = require('lodash');  
var path = require('path');  
var webpack = require('webpack');  
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);
function getPlugins() {  
  var plugins = [
    new webpack.DefinePlugin({
      'process.env': _(process.env)
                      .pick(_.keys(dotenvConfig))
                      .mapValues((v) => (JSON.stringify(v)))
                      .value()
    })
  ];
  // for dev builds, use our custom environment
  return [
    ...plugins,
    ionicWebpackFactory.getIonicEnvironmentPlugin()
  ];
}
module.exports = {  
  entry: process.env.IONIC_APP_ENTRY_POINT,
  output: {
    path: '{{BUILD}}',
    publicPath: 'build/',
    filename: process.env.IONIC_OUTPUT_JS_FILE_NAME,
    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
  },
  devtool: process.env.IONIC_SOURCE_MAP_TYPE,
resolve: {
    extensions: ['.ts', '.js', '.json'],
    modules: [path.resolve('node_modules')]
  },
module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.ts$/,
        loader: process.env.IONIC_WEBPACK_LOADER
      }
    ]
  },
plugins: getPlugins(),
// Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};

ПРИМЕЧАНИЕ: исходную конфигурацию веб-пакета можно найти в node_modules / @ ionic / app-scripts

• добавьте ниже в package.json, чтобы процесс сборки Ionic знал об этом:

"config": {
    "ionic_webpack": "./config/webpack.config.js"
  }

• установите модуль npm dotenv и lodash:

npm install dotenv --save-dev  
npm install lodash --save-dev

Шаг 3. Создайте и внедрите класс AppConfig

• создать src / config / app.config.ts:

import { Injectable } from '@angular/core';
declare var process: any;
@Injectable()
export class AppConfig {  
  public apiBaseUrl: string;
  public googleMapApiKey: string;
constructor() {
    this.apiBaseUrl = this._readString('API_URL', 'http://localhost:3000/api/v1');
    this.googleMapApiKey = this._readString('GOOGLE_MAP_API_KEY', 'xxxyyy111');
console.debug('AppConfig', this);
  }
private _readString(key: string, defaultValue?: string): string {
    const v = process.env[key];
    return v === undefined ? defaultValue : String(v);
  }
}

• вставить AppConfig в src / config / app.module.ts:

import { NgModule }     from '@angular/core';  
import { AppConfig }    from '../config/app.config';
@NgModule({
  providers: [
    AppConfig,
// other injectables
  ]
})
export class AppModule {}

Шаг 4. Считывание значений в AppConfig из других компонентов

• теперь значения AppConfig доступны во всех компонентах, например src / app / app.component.ts:

import { Component, ViewChild } from '@angular/core';  
import { AppConfig } from '../config/app.config';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {  
  constructor(public appConfig: AppConfig) {
    console.debug('AppConfig', this.appConfig);
  }
}

• запускать приложение Ionic и просматривать результат в действии из инспектора Chrome

.env для другой среды

Теперь вы можете ввести различные заданные значения в .env с компьютера, на котором создается или запускается приложение Ionic. Например, наш агент CI в Jenkins имеет другой набор значений .env для создания приложений в разных средах.

Альтернатива

Вместо одного .env мы могли бы иметь файлы json для каждой среды.

config/developement.json  
config/production.json

Мы использовали этот подход в наших проектах Ionic1. Однако, когда проект растет, он становится немного беспорядочным, поскольку, как правило, создается больше личных конфигурационных json-файлов. Поэтому мы решили поэкспериментировать с подходом с единым окружением, который предлагает Двенадцатифакторное приложение:

Другой аспект управления конфигурацией - это группировка. Иногда приложения группируют конфигурацию в именованные группы (часто называемые «средами»), названные в честь конкретных развертываний, таких как среды development, test и production в Rails. Этот метод не масштабируется чисто: по мере создания новых развертываний приложения необходимы новые имена среды, например staging или qa. По мере дальнейшего развития проекта разработчики могут добавлять свои собственные специальные среды, такие как joes-staging, что приводит к комбинаторному взрыву конфигурации, что делает управление развертыванием приложения очень хрупким.

ОБНОВЛЕНИЕ 2018-08-31

Ionic 3 теперь поставляется с поддержкой управления переменными среды. Подробнее см. Здесь https://github.com/ionic-team/ionic-app-scripts#environments.