Чтение переменной выпуска VSTS во время выполнения (TypeScript / Webpack SPA)

Question

Я изо всех сил пытаюсь найти решение, которое должно быть довольно распространенной проблемой, путем передачи переменной выпуска Visual Studio Team Services ( VSTS ) в одностраничное приложение ( SPA )Веб-сайт.Есть довольно много движущихся частей, которые я попытаюсь объяснить ниже.

Я создал переменную релиза ServiceLocations.ApiBaseUri в VSTS, уникальную для каждой среды (dev/test/stage/prod), и моя конечная цель -значение этой переменной для использования классом машинописного текста (~/src/services/ApiService.ts).

• Я не могу выполнить замену текста как часть сборки веб-пакета, поскольку выходные данные сборки являются общимимежду средами.

• Я не могу внедрить в вывод сборки, поскольку содержимое ~/src/ dir передается через веб-пакет как часть сборки в минимизированные / uglified пакеты ES5 с динамическимимена файлов.

• Сайт размещен в оболочке ASP.NET Core, работающей в IIS, в противном случае я мог бы использовать библиотеку файловой системы Node для чтения из статического файла.

• Я могу заставить VSTS записать значение в appsettings.json в корне проекта (за пределами wwwroot), но не уверен, как SPA может прочитать это во время выполнения.

Может кто-нибудьпожалуйста, предложите какие-нибудь предложения по практическому подходу?

Answer 1

Поскольку ваш SPA размещен в оболочке ASP.NET Core, я думаю, вы также можете получить настройки вашего приложения ApiBaseUri в вашем файле Layout.cshtml и создать глобальную переменную js с этим значением.

ПустьЯ знаю, если вы обнаружите некоторые недостатки этого решения.

Answer 2

Когда вы создаете или редактируете сборку в VSTS, помимо вкладки Задачи у вас также есть вкладка Переменные.Там вы можете настроить переменные среды, включая базовый URL-адрес API - это то, что мы делаем, когда создаем приложение реагирования на VSTS (скриншот из реальной сборки, которую мы имеем)

Затем в коде вы используете его следующим образом: export const baseUrl = process.env.REACT_APP_BASE_API_URL; Это Javascript, но он должен быть похож на Typescript.

Единственным недостатком является то, что вам придется иметь отдельные определения для каждой среды.

Answer 3

Процесс выпуска VSTS предоставляет возможность замены переменных в файл JSON в рамках задачи развертывания IIS Site.

Мы используемэто для записи значения ServiceLocations.ApiBaseUri в файл (~/clientconfig/settings.json), который имеет следующее начальное содержимое, позволяющее локальную разработку:

{
  "ServiceLocations": {
    "ApiBaseUri": "https://localhost:44390"
  }
}

В файле ASP.NET Core Startup.cs мыстатически размещая этот файл, чтобы он был доступен для SPA:

app.UseStaticFiles(new StaticFileOptions
{
  FileProvider = new PhysicalFileProvider(
    Path.Combine(
      Directory.GetCurrentDirectory(), "clientconfig")),
  RequestPath = "/clientconfig"
});

Затем в SPA ApiService.ts мы используем fetch для создания HTTP-запроса для файла настроек:

fetch("/clientconfig/settings.json", {
  method: "GET",
  credentials: "omit"
}).then(response => {
  return response.json();
}).then(settings => {
  this._apiBaseUri = settings.ServiceLocations.ApiBaseUri;
})

Answer 4

Вы можете построить проект, используя --environment="ENV_NAME", где ENV_NAME" - это имя среды, на которую вы нацелены.
(Обратите внимание, что он должен быть зарегистрирован в файле конфигурации .angular-cli.json под узлом environments)

Затем вы можете определить разные значения для одной и той же переменной в разных файлах среды. При сборке Angular будет использовать значения из указанного env-файла, используя флаг --environment.

Чтобы использовать переменную, вам нужно будет импортировать ее из файла среды, выполнив

import { /*Your vars and/or functions */ } from "../../environments/environment";

НЕЗАВИСИМО * от среды, на которую вы нацелены.