Рубрики
Uncategorized

Впрыскивая угловые переменные окружающей среды по времени сборки

В этой статье я предполагаю, что вы контейнерируете свое угловое приложение, а также есть CI / CD … Помечено с AWS, угловым, DevOps, Docker.

В этой статье я предполагаю, что вы будете контейнерировать ваше угловое приложение, а также иметь процесс CI/CD на месте. Хотя пример в статье также AWS конкретно, вы можете использовать тот же принцип в других облачных службах.

По умолчанию угловые вводит переменную среды при времени сборки приложения.

Приведенная выше диаграмма изображает регулярный поток для нашего развертывания приложений.

  1. Наше приложение Frontend. Включательны переменные окружающей среды, подтолкнутся к репо
  2. Наш процесс сборки поднимает его, строит и развертывает наш сервер.

Хотя вышеизложенное работает очень хорошо, существуют очень уникальные случаи, когда вам потребуется не подтолкнуть файлы окружающей среды к вашим репозитории приложений. Если это произойдет, зная, что угловые вводит переменные среды в состав времени, нам нужно было бы найти способ ввести файлы окружающей среды во время процесса сборки.

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

1. Увеличение безопасности. Хотя достойно отметить, что самый безопасный способ сохранить ваш секрет — не ставить их в свои приложения Frontend. Таким образом, без учетной записи не должно разместить любой секрет на приложении Frontend, будь то как переменная среды или внутри приложения.

2. DEVOPOPS FLOC: Существуют ситуации, когда параметры ваших приложений могут варьироваться в зависимости от различных сред, в то время как вы можете знать специфические для файла окружающей среды. E.G Окружающая среда Dev, добываемые данные для производства могут быть добавлены в ваше приложение вашей командой DevOps или вашего клиента. Чтобы избежать их внесения изменений в ваше приложение или проходить через PR поток (что может потребоваться в зависимости от вашей политики). Вы хотели бы изолировать файл окружающей среды из вашего приложения.

3. МУЛЬЦИАЛЬНЫЕ ИСПОЛЬЗОВАНИЯ С ДИНАМИЧЕСКИМИ РАЗМЕЩЕНЫ: Существуют сценарии, в которых у вас будет один репозиторий для вашего приложения, но несколько экземпляров развертывания, которые требуют разных файлов конфигурации (переменная среды). Эти типы переменных могут быть стили, изображения, тип валюты, настройки приложения, базовый URL и многие другие переменные, которые различаются на основе каждого экземпляра. Ниже приведен изображение.

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

Если мы будем следовать потоку переменных нашей среды в репозитории, не было бы способов установить разные конфигурации для каждого из различных экземпляров, кроме мы реализуем логику переменных настроек на уровне приложения на основе пользователей, которые не будут 100% идеальное решение, если нам нужна некоторая конфигурация при запуске приложения.

По моему опыту я столкнулся с тремя (3) ситуациями выше.

Мое решение

  1. Добавьте путь среды к вашему .gitignore. . Это гарантирует, что вы не подталкиваете файлы среды в хранилище.

  2. Создайте частное репо на AWS S3. . Вы можете назвать это (Frontend Eng. Переменные) б. Создайте подпункты для каждого из ваших приложений с. Загрузите различные файлы среды. например (разработка, постановка и прод) (В случае нескольких экземпляров с динамическими переменными это следует реплицировать в каждой из сред.

  3. Убедитесь, что наш процесс сборки имеет разрешение на чтение из репозитория S3

  4. Измените файл BuildSpec, чтобы скопировать файл из репозитория S3 в папку root приложения во время процесса сборки.

Структура папки S3

Buildspec file.

 build:
    commands:
      - echo Build started on `date`
      - printenv
      - aws s3 cp s3://frontend-env-variable/payment- application/ src/ --recursive
      - docker build -t payment-app --build-arg IMAGE_TAG=$IMAGE_TAG .
      - docker images -a
      - echo Building the Docker image...
      - docker tag $APP_NAME:latest $AWS_ACCOUNT_ID.dkr.ecr.eu-west-1.amazonaws.com/$IMAGE_REPO_NAME:$IMAGE_TAG
      - docker images -a
      # - command
  post_build:

Перед ссылками файла Docker нами уже есть файл окружающей среды, скопированный из папки S3 в папку приложения, как видно выше в нашем файле BuildSpec.

Для сценария с несколькими экземплярами с различными переменными среды в разных облачных экземплярах,

  1. Создайте отдельные файлы BuildSpec для каждой среды в вашем корневом приложении. например. (induction1.buildspec.yml, induction2.buildspec.yml) и каждый из них будет иметь ссылку на соответствующий путь S3.

  2. В вашем AWS CDK или CodeBuild (или какой бы этот процесс создания у вас на месте, укажите имя файла BuildSpec для конкретной среды

С вышеуказанным процессом вы можете успешно

  1. Разверните свое приложение в REPO без файлов окружающей среды

  2. У вас есть DEVOPS, клиент или кто-либо для каждого из ваших бизнес-экземпляров, которые необходимо обновить переменные среды, сделайте это.

Просто дополнительная информация о том, что файл Docker File выглядит файл

#building angular App
FROM node:14.0.0 as node

WORKDIR /app
COPY package.json /app/
RUN npm install
COPY ./ /app/
ARG IMAGE_TAG=dev
RUN npm run build -- --prod --configuration $IMAGE_TAG

# building nginx
FROM public.ecr.aws/nginx/nginx:1.20-alpine

# FROM nginx:1.12.2-alpine
COPY --from=node /app/dist/payment-app /usr/share/nginx/html
COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf

Заключение

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

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

Не добавляйте ни одного секрета на ваше приложение Frontend

Оригинал: «https://dev.to/valoni01/injecting-angular-environment-variables-at-build-time-84c»

Читайте ещё по теме: