Как сделать одну сборку / образ React Docker для работы во всех средах? - PullRequest
Новая
       5

Как сделать одну сборку / образ React Docker для работы во всех средах?

0 голосов
/ 02 ноября 2018

Я пытаюсь развернуть приложение React в одном контейнере Docker, способном работать через dev, preprod и prod на платформе OpenShift, на которой я могу только выдвигать помеченные изображения докера. Для этого у меня есть:

  • приложение React, созданное с помощью приложения create-реагировать на приложение, размещенное на Github
  • файл Docker в корневом каталоге проекта, содержащий процесс сборки / запуска Docker
  • файл .gitlab-ci.yml, содержащий проверки непрерывной интеграции и методы развертывания
  • доступная платформа OpenShift

Что я могу сделать:

Я могу легко сгенерировать производственную сборку '/ build', которая будет добавлена ​​на этапе сборки образа Docker и будет работать в производственном контексте, или я могу собрать при запуске (но просто писать это плохо).

Проблема:

Этот сгенерированный образ не может работать во всей среде, и я не хочу иметь отдельную сборку для каждой среды.

Что я хочу:

Я хочу иметь возможность создавать один образ докера, который будет работать во всех средах без необходимости устанавливать зависимости или создавать, когда требуется только RUN.

вот мой Dockerfile: 

FROM nginx:1.15.5-alpine
RUN addgroup --system app \
    && adduser --uid 1001 --system --ingroup app app \
    && rm -rf /etc/nginx/conf.d/default.conf \
    && apk add --update nodejs nodejs-npm \
    && mkdir /apptmp
COPY . /apptmp
RUN chmod 777 /apptmp
COPY config/default.conf /etc/nginx/conf.d/
COPY config/buildWithEnv.sh .

RUN touch /var/run/nginx.pid && \
  chown -R app:app /var/run/nginx.pid && \
  chown -R app:app /var/cache/nginx && \
  chown -R app:app /usr/share/nginx/html
EXPOSE 8080
USER 1001
CMD sh buildWithEnv.sh

А вот и скрипт buildWithEnv.sh 

#!/bin/bash

echo "===> Changin directory: /apptmp ..."
cd /apptmp

echo "===> Installing dependencies: npm install ..."
npm install

echo "===> Building application: npm run build ..."
npm run build

echo "===> Copying to exposed html folder ... "
rm -rf /usr/share/nginx/html/*
cp -r build/* /usr/share/nginx/html/

echo "===> Launching http server ... "
nginx -g 'daemon off;'

Ответы [ 2 ]

0 голосов
/ 06 декабря 2018

Я наконец нашел способ.

Сборка приложения

Первый шаг - сделать статическую сборку вашего приложения, независимую от среды. (На самом деле для моей ситуации это делается CI, поэтому я напрямую получаю статическую сборку в части сборки Docker)

Создать Nginx conf

В вашем проекте создайте файл, содержащий конфигурацию по умолчанию для nginx, плюс нужную вам конфигурацию обратного прокси-сервера, и заполните proxy_pass значениями, которые можно легко и однозначно заменить. 

server {
  gzip on;
  gzip_types text/plain application/xml application/json;
  gzip_vary on;
  listen 8080;
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  location /api/ {
    proxy_set_header x-clientapikey REACT_APP_BAMBOO_API_KEY;
    proxy_pass REACT_APP_SERVICE_BACK_URL;
  }
  location /auth {
    proxy_set_header Authorization "Basic REACT_APP_AUTHENTIFICATION_AUTHORIZATION";
    proxy_pass REACT_APP_SERVICE_AUTH_URL;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

Конфигурация Openshift

В вашем приложении OC перейдите на вкладку «environment» и добавьте все переменные окружения, которые вы будете использовать в вашей конфигурации nginx.

Сборка Dockerfile

В части сборки dockerfile переместите свою сборку на правильную позицию в html-папку nginx и обработайте файлы конфигурации, включая nginx. 

FROM nginx:1.15.5-alpine
RUN addgroup --system app \
  && adduser --uid 1001 --system --ingroup app app \
  && rm -rf /etc/nginx/conf.d/default.conf \
  && apk --update add sed
COPY ./build /usr/share/nginx/html/
COPY config/default.conf /etc/nginx/conf.d/
RUN chmod 777 -R /etc/nginx/conf.d/
COPY config/nginxSetup.sh .

RUN touch /var/run/nginx.pid && \
  chown -R app:app /var/run/nginx.pid && \
  chown -R app:app /var/cache/nginx && \
  chown -R app:app /usr/share/nginx/html
EXPOSE 8080
USER 1001
CMD sh nginxSetup.sh

Dockerfile run

В части выполнения dockerfile (CMD) просто используйте инструмент командной строки sed, чтобы заменить пути в конфигурации обратного прокси-сервера nginx. 

#!/usr/bin/env bash
sed -i "s|REACT_APP_SERVICE_BACK_URL|${REACT_APP_SERVICE_BACK_URL}|g" /etc/nginx/conf.d/default.conf
sed -i "s|REACT_APP_SERVICE_AUTH_URL|${REACT_APP_SERVICE_AUTH_URL}|g" /etc/nginx/conf.d/default.conf
sed -i "s|REACT_APP_BAMBOO_API_KEY|${REACT_APP_BAMBOO_API_KEY}|g" /etc/nginx/conf.d/default.conf
sed -i "s|REACT_APP_AUTHENTIFICATION_AUTHORIZATION|${REACT_APP_AUTHENTIFICATION_AUTHORIZATION}|g" /etc/nginx/conf.d/default.conf
echo "===> Launching http server ... "
nginx -g 'daemon off;'

А вот и вы.

0 голосов
/ 09 ноября 2018

Возможный подход описан в этом блоге

В основном: вы используете заполнители для всех специфических для окружающей среды частей в ваших статических ресурсах. Затем вы настраиваете nginx, чтобы заменить их во время выполнения значениями, специфичными для среды.

...