Переменные окружения для 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".


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

@Directive v/s @Component in Angular

Компоненты создают DOM элементы и добавляют к ним поведение, а директивы только добавляют поведение к существующим DOM элементам

13 августа 2018 г. в Angular

ngx translate attribute

Используется конструкция

<img src="image.jpg" [alt]="'KEY' | translate"> 
20 августа 2018 г. в Angular

Идемпотентные методы HTTP

Методы GET, PUT, DELETE являются идемпотентными - многократные идентичные запросы такого типа приводят к такому же эффекту, как и от одиночного запроса, при условии что не сервер не меняет своё состояние между запросами

AWS шпаргалка

Названия более 50 службами amazon web services на понятном языке

Про развитие языков программирования

Типизация приносит производительность. И если раньше эта производительность была направлена на создание более быстрого кода, то сейчас на более быстрое написание кода.