Создание углового приложения CI / CD доказательство

У меня есть шанс поработать над изготовлением углового приложения CI/CD доказательство. Я думал о написании статьи на нем довольно некоторое время но Да, теперь, наконец, у меня было время. Я поделюсь своим опытом здесь так Что если кто-то в будущем ищет решение, они могли бы посмотреть на это, чтобы получить представление об этом.

Проблема

В Угловой Вы можете установить среду приложений только перед созданием сборки, но при работе с CI/CD, вам иногда необходимо установить среду после создания сборки. Потому что идея состоит в том, чтобы использовать одну сборку для всех.

Построить один раз, развернуть везде

Давайте разделим проблему и завоевать Выпуск № 1: Инъекция/Установите среду в приложение. Выпуск № 2: Получите окружающую среду и удерживайте ее перед запуском приложения. Выпуск № 2: какая среда для запуска приложения.

Решение

Проблема, которую мы имеем вот, что используя текущую систему окружающей среды, которую мы не можем установить и обновлять среду после создания сборки, потому что угловая команда не разработала ее таким образом. Давайте сделаем нашу заявку на работу на дорогу. Мы начнем сначала внизу. Представьте себе, какими должны выглядеть ваши скрипты, если вы хотите создать сборку и установить среду. Ваш package.json должны иметь скрипты для создания приложения и установить среду в приложении. Так что делает 2 сценария 1 для сборки и 1 для установки среды. Для нескольких сред вам понадобится несколько сценариев. Ваш package.json должен выглядеть что-то вроде этого.

{
  "name":"ssr-angular-app",
  "version": "...",
  ...
  "scripts": {
    ....
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "build:client-and-server-bundles": "ng build --prod --env=prod --aot --vendor-chunk --common-chunk --delete-output-path --buildOptimizer && ng build --prod --env=prod --app 1 --output-hashing=false",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
    "production": "set NODE_ENV=production && node dist/server.js",
    "development": "set NODE_ENV=development && node dist/server.js"
  }
  ...
}

Build: SSR и построить: клиент-серверные пучки являются командами сборки SSR, которые сделают Производство Создайте каждый раз и сценарии, как Развитие и Производство вставит среду после сборки. После обновления скриптов мы будем двигаться вперед и заставить наше приложение вести себя то, что мы говорим, чтобы не то, что угловые говорят это сделать.

Поэтому мы придумали это решение для создания и прочитанного JSON файл. JSON Должен быть в активах, потому что активы не получают домифицированные/UGLICED, а Bundler не имеет никакого влияния на папку активов, чтобы мы могли играть с ним так сильно, как нам нравится. В этом файле мы поместим информацию о который окружающая среда и использование второго сценария мы обновляем JSON Отказ Создать appconfig.json Файл внутри SRC/App/Asseets/Config/ каталог с окружающей средой.

{
  "env": "local"
}

Теперь, как у нас есть файл конфигурации, нам нужно прочитать его и найти среду в соответствии с этим. Угловой приходит с решением задачи, чтобы дождаться до нагрузки приложений. Это позволяет нам вызывать функции во время инициализации приложения. Добавьте следующую функцию в вас app.module.ts.

const appInitializerFn = (appConfig: AppConfigService) => {
  return () => {
    return appConfig.loadAppConfig();
  };
};

Кроме того, добавьте это в свой Поставщики множество

providers: [
  AppConfigService,
  {
    provide: APP_INITIALIZER,
    useFactory: appInitializerFn,
    multi: true,
    deps: [AppConfigService]
  },
]

Мы предоставляем App_initializer токен в сочетании с фабричным методом. Заводская функция, которая вызывается во время инициализации приложения, должна вернуть функцию, которая возвращает обещание. Теперь создайте сервис под названием app-config Отказ Который будет получать JSON Файл из каталога активов.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { setEnv } from '../../config';

@Injectable()
export class AppConfigService {
    private appConfig;
    private readonly CONFIG_URL = '/assets/config/appConfig.json';
    constructor(private http: HttpClient) { }

    loadAppConfig() {
        return this.http.get(this.CONFIG_URL)
            .toPromise()
            .then(data => {
                this.appConfig = data;
                setEnv(data);
            });
    }
}

Теперь мы все набор для местной среды, все будет работать, если мы сделаем NPM начать Но это не то, что мы хотим, мы хотим, чтобы заявка на строительство тоже. Давайте работать над этим тоже. Чтобы установить среду после сборки мы будем использовать ФС обновить appconfig.json Отказ Во втором скрипте мы Установить Тин окружающей среды, используя Node_env Что доступно в сервер. (TS | JS) Отказ Мы принесем ENV от Process.env и обновить appconfig.json. . В вашем Server.ts Добавьте следующий код

...
addEnv(process.env.NODE_ENV);
const environment = setEnv(process.env.NODE_ENV);
...

Теперь создайте index.ts и файлы окружающей среды, такие как Local.ts , Production.ts внутри Приложение/CONFIG. каталог Это должно выглядеть что-то подобное.

В index.ts Добавьте следующий код, чтобы установить ENV локально

import LocalEnvironment from './local';
import DevEnvironment from './development';
import ProdEnvironment from './production';

const AppConfigFilePath = 'dist/browser/assets/data/appConfig.json';

export let environment = LocalEnvironment;

export function setEnv(appEnv) {
    appEnv = appEnv.trim();
    switch (appEnv) {
        case 'production':
            environment = ProdEnvironment;
            return ProdEnvironment;
        case 'development':
            environment = DevEnvironment;
            return DevEnvironment;
        default:
            environment = LocalEnvironment;
            return LocalEnvironment;
    }
}

export const addEnv = (appEnv = 'development') => {
    const output = {
        env: appEnv.trim(),
    };
    writeFileSync(AppConfigFilePath, JSON.stringify(output));
};

В Local.ts И другие среды добавляют ваши переменные.

const LocalEnvironment = {
    production: false,
    googleAnalytics: "UA-XXXXXXXXX-1",
    fbId: 'XXXXXXXXXXXXXXXX'
};
export default LocalEnvironment;

Создайте другие файлы окружающей среды, а также VOILA! 😃 Вы закончили.

Плавник

Давайте повторим, что мы сделали

Мы создали appconfig.json Файл в наших активах, потому что Bundler не имеет никакого влияния на активы.
После этого мы сделаем наше приложение ждать и сначала загрузить среду.
После создания при использовании команды для установки среды мы обновляем appconfig.json.

Оригинал: «https://dev.to/mkamranhamid/making-angular-app-ci-cd-proof-2mp4»

Проблема

Построить один раз, развернуть везде

Решение

Плавник

Читайте ещё по теме: