Переменные окружения для Angular приложения

Вдохновление Immutable Web Apps

Речь о контейнеризированном приложении

FROM nginx:1.19
LABEL maintainer="admin@tyapk.ru"
COPY /dist/apps/tyapk /usr/share/nginx/html
RUN sed -i '/^}/i \ \ \ \ error_page  404 /index.html;' /etc/nginx/conf.d/default.conf

Option 1

Значения-заменители создаются в environment.prod.ts файле окружения.

export const environment = {
  production: true,
  apiUrl: '__API_URL__',  // <== __API_URL__ будет заменено на реальное значение
};

Option 2

В приложении имеется index.html, который не кэшируется. В нем создаётся глобальная константа __env со значениями заменителями.

<body>
    <script>
        // именно var, не const
        var __env = {
            API_URL: '__API_URL__',
            GA: '__GA__',
        }
    </script>  
    <div id="root"></div>
    <!-- spa scripts -->
    <script src="dist/bundle.js"></script>
    ...

Из переменной __env читаются значения в environment.prod.ts файл

export const environment = {
  production: true,
  apiUrl: (window as any).__env.API_URL,
  gaCode: (window as any).__env.GA,
};

Option 2 позволяет легко править значения в runtime. Вместо простого файла можно сделать сервис

Далее необходимо создать скрипт, который перед запуском приложения или во время deploy будет заменять заглушки на реальные значения т.е. вместо __API_URL__ появится https://api.awesome.app.

В простом случае можно использовать sed

docker-entrypoint.sh

#!/usr/bin/env bash
set -Eeo pipefail
sed -i "s|__API_URL__|${API_URL}|"  /usr/share/nginx/html/index.html
exec "$@"

В Dockerfile добавлется копирование сценария и его запуск при старте контейнера.

FROM nginx:1.19
LABEL maintainer="admin@tyapk.ru"
COPY /dist/href-deploy /usr/share/nginx/html
RUN sed -i '/^}/i \ \ \ \ error_page  404 /index.html;' /etc/nginx/conf.d/default.conf
COPY docker-entrypoint.sh /
RUN chmod +x docker-entrypoint.sh
ENTRYPOINT ["/docker-entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]

Напоминание про ENTRYPOINT vs CMD

docker build -t tyapk/href .
docker run -p 8080:80 -e API_URL=vasya tyapk/href

Альтернативно использовать envsubst в docker-entrypoint.sh, чтобы заменить все переменные. Для этого надо создать файл шаблон index.env.html

    <script>
      var __env = {
        API_URL: "${API_URL}",
        GA: "${GA}",
        ENV3: "${ENV3}",
        ENV4: "${ENV4}",
        ENV5: "${ENV5}",
      };
    </script>

И вызывать команду envsubst < "src/index.env.html" > "src/index.html".


Похожие записи

RxJs Subjects

Выдержки из доклада Андрея Алексеева (Tinkoff) про RxJs (Subject, Behaviour Subject, Replay Subject, Async Subject). Применение в Angular.

Angular dependency injection

Определение Provider (useClass, useValue, useFactory ), Injector. Декоратор @Inject, ключ multi: true

13 ноября 2018 г. в Angular