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