Angular (8) сборка приложения один раз (с производственной конфигурацией) и развертывание в нескольких средах

Question

У меня есть ситуация, когда я пытаюсь создать свое приложение angular с производственным конфигурацией и развернуть его в нескольких средах, скажем, ng build --configuration = production

рабочий процесс здесь, когда я строю, используя вышеупомянутую команду ( ng build --configuration = production ), файл environment.ts заменяется на environment.prod.ts

Конфигурации, которые у меня есть в environment.prod.ts выглядит следующим образом:

export const environment = {
  production: true,
  environment: 'Production',
  _webApiHost: 'prodsomename.company.com/api/',
};

У меня есть следующие конфигурации в environmentmrnt.test.ts:

export const environment = {
    production: true,
    environment: 'Test',
    _webApiHost: 'testsomename.company.com/api/',
};

У меня есть настройка для angular. json файла:

"configurations": {
            "production": {
              "fileReplacements": [ {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              } ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [ {
                "type": "initial",
                "maximumWarning": "2mb",
                "maximumError": "5mb"
              } ]
            },
            "test": {
              "fileReplacements": [ {
                "replace": "src/assets/configs/environment.ts",
                "with": "src/assets/configs/environment.test.ts"
              } ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [ {
                "type": "initial",
                "maximumWarning": "2mb",
                "maximumError": "5mb"
              } ]
            }
          }

Если я создаю решение для каждой среды отдельно и внедряю в соответствующую среду, как показано на рисунке ниже,

это работает как очарование, что означает, что

testApp связывается с _webApiHost: testsomename.company.com / api / и prodApp связывается с _webApiHost: prodsomename.company.com / api /

В приведенном выше случае артефакт , который тестируется QA, отличается от артефакта, развернутого в рабочей среде , который не идеальный способ продвижения кода в производство.

Но меня беспокоит то, что я хочу создать приложение только один раз и развернуть его в нескольких средах, где каждая среда будет взаимодействовать с соответствующим API, как показано на рисунке ниже

Когда я собираю его с помощью команды ng build --configuration = production , файл environment.ts будет иметь производственные конфигурации,

export const environment = {
  production: true,
  environment: 'Production',
  _webApiHost: 'prodsomename.company.com/api/',
};

Таким образом, если этот артефакт развернут в тестовой среде, testApp пытается установить связь с _webApiHost: 'prodsomename.company.com/ api /, что неверно.

Вот сценарий Azure DevOps для конвейера сборки, который я использую для построения решения.

Set-Location "$(Build.Repository.LocalPath)\Buffini.Web.UI\Angular"
Write-Host 'Angular Install Starting'
npm install -g @angular/cli@8.0.6 -Verbose
Write-Host 'Angular Install Finished'
Write-Host 'NPM Install Starting'
npm install -Verbose
Write-Host 'NPM Install Finished'
Write-Host 'NPM Update Starting'
npm update -Verbose
Write-Host 'NPM Update Finished'
Write-Host 'NPM Audit Starting'
npm audit fix -Verbose
Write-Host 'NPM Audit Finished'
Write-Host 'Angular Build Starting'
ng build --configuration=production --deleteOutputPath=true
Write-Host 'Angular Build Finished'

Я пытался найти решение в Интернете, но не смог найти. Пожалуйста, помогите мне в решении проблемы. Я высоко ценю ваше время и помощь в этом. Заранее спасибо.

Answer 1

Для замены конфигурации приложения во время выполнения. Вам необходимо создать файл config. json, который содержит конфигурации Dynami c (например, _webApiHost). Вы можете проверить пример кода в этом блоге , чтобы получить конфигурацию. json.

В конвейере вы можете добавить задачи расширения для замены конфигурации. json содержимое перед развертыванием в другой среде (например, тестирование, производство).

Таким образом, вам нужно создать приложение angular только один раз, и перед развертыванием нужно только заменить содержимое config. json соответственно в другую среду.

Доступные расширения вы можете проверить. Волхвы c Задача чанков или Задача RegEx Match & Replace . Вы можете проверить этот поток для примера использования этих задач.

Answer 2

Я не буду притворяться, что это ответ, обязательно, но он достаточно длинный, чтобы не помещаться в область комментариев. Возможно, вы найдете это полезным. (Полное раскрытие: я не использую Azure, а скорее GitLab. Так что будет необходим перевод, независимо от того, найдёте ли вы такой подход.)

В любом случае, я задавал тот же вопрос Некоторое время назад. После некоторых копаний я нашел эту ссылку полезной

Используя это руководство, я сделал следующее:

Сначала я делаю сборку c docker. В этой сборке у меня есть различные файлы среды, «готовые для запроса» в папке. Файл конфигурации, который фактически управляет приложением, находится в root.

. Затем я делаю еще одну сборку docker, единственную цель которой состоит в том, чтобы взять первую сборку и присвоить ей желаемую конфигурацию. (Я делаю это так, потому что первая сборка медленная, но я бы хотел вывести sh в производство без перекомпоновки.)

Далее я делаю сборку среды, которую хочу.

Для подготовки, например: В моем yaml конвейера CI / CD сборки GitLab у меня есть такая строка ...

docker build -t xxxxx --build-arg SERVE_CONFIGURATION=staging -f [A-Docker-File] .

Файл docker одинаков для всех сред, но основан на после передачи аргумента эта сборка docker извлекает другой файл и удаляет его на место водителя. Поскольку в развертывании Angular нет никаких секретов, не имеет значения, что в структуре папок скрываются дополнительные (неиспользуемые) файлы конфигурации (хотя, если они были мотивированы, их можно легко удалить.)

Во всяком случае, внутри этой 2 docker сборки у меня есть ...

...
FROM registry.gitlab.com/xxxxxxxxxxxx/compiled as default-config
FROM registry.gitlab.com/xxxxxxxxxxxx/compiled as final-config

COPY --from=default-config /usr/share/nginx/html/environments/environment.$SERVE_CONFIGURATION.js /usr/share/nginx/html/environment.js

Так что это docker изображение - не что иное, как сборка из предыдущего изображения, но с нужным файлом среды в его правильное место.

Во всяком случае, я, вероятно, пропустил некоторые детали, но я не уверен, что это поможет вам и остановится здесь.