如何使单个React Docker构建/镜像在所有环境中运行

Question

我正试图在一个Docker容器中部署React应用程序，该容器能够在OpenShift平台上运行dev、prerod和prod，在该平台上我只能推送标记的Docker映像。为了做到这一点，我有：

• 使用托管在Github上的create-rect应用程序生成的React应用程序
• 项目根目录下的Dockerfile，包含docker构建/运行过程
• 包含连续集成检查和部署方法的.gitlab-ci.yml文件
• 可访问的OpenShift平台

我能做什么：

我可以很容易地生成一个生产构建"/build"，它将被添加到docker镜像构建阶段，并将与生产上下文一起运行，或者我可以在运行开始时进行构建(但只是编写它感觉很糟糕(。

问题：

这个生成的映像不能在所有环境中运行，我不想为每个环境都有一个特定的构建。

我想要什么：

我希望能够生成一个能够在所有环境中运行的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;'

Answer 1

这篇博客文章描述了一种可能的方法

基本上：静态资源中所有特定于环境的部分都使用占位符。然后配置nginx的sub_filter，以在运行时用特定于环境的值替换这些值。

Answer 2

我终于找到了一种方法。

生成应用程序

第一步是对应用程序进行静态构建，与环境无关。(实际上，在我的情况下，这是由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 conf中使用的所有环境变量。

Dockerfile构建

在dockerfile构建部分，将构建移到nginx html文件夹中的正确位置，并处理您的配置文件，包括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运行

在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;'

你来了。