使用 docker-compose / docker 在运行时将 env 变量放入前端 js 文件

Question

我是使用 docker 的新手，目前正在尝试在运行时间 URL 中在前端 .js 文件中动态设置后端 URL =25=]。我有一个由前端和后端组成的应用程序。截至目前，后端 URL 可以在 docker-compose.yml 中指定如下：

myFrontend: build: context: ./frontend-dockerfile-location args: BACKEND_URL: myBackendUrl

在相应的docker文件中我创建了一个nginx base，将我所有的静态文件复制到那里然后设置正确的后端URL.

FROM nginx:latest #access the arg defined in the yml file ARG myBackendUrl #write the backend url into the containers environment ENV myBackendUrl=${myBackendUrl} COPY . /usr/share/nginx/html/ #replace the config.js URL placeholder with the environment variable RUN envsubst < /usr/share/nginx/html/js/config.js > /usr/share/nginx/html/js/config.js.tmp && mv /usr/share/nginx/html/js/config.js.tmp /usr/share/nginx/html/js/config.js

此设置的问题在于，每当我想更改后端时，我总是必须重新构建映像 URL。那时我开始寻找可能的解决方案，如何在运行时间内更改我的后端 URL。这就是我的第一个问题出现的地方。甚至可以在运行时间内更改环境变量，还是运行时间指的是“启动容器时设置环境变量”？

我的第二个问题是关于我遇到的可能的解决方案。首先，我想知道 webpack 是否适合解决我的问题。由于我的前端将服务于客户端并在他们的浏览器上运行，我不能简单地定义环境变量并通过 process.env 访问它们；我还没有可行的解决方案，但我相信这可能是我的问题的答案。我认为可行的另一种选择是入口点指令。我读到这允许定义启动命令，我想知道是否可以将我当前在 docker 文件中使用的 shell 脚本语法放入 shell 脚本中并制作这是我图像的入口点。如果我理解正确，启动容器时它总是运行我的脚本，这样我就可以更改 URL 而无需重建图像。

如果有人能帮助我解决这些问题，我将不胜感激，因为我很难理解其中的一些概念，即使在多次阅读它们之后也是如此。

Answer 1

我使用了与您相同的技巧，使用 sed 命令替换 Javascript 中的占位符。我很确定，有更好的方法可以做到这一点。但是关于您的问题，您可以使用您的脚本来替换占位符，它必须使用与您的 NGINX 命令链接的 CMD 或 ENTRYPOINT 命令执行，URL 由 env 传递而不使用构建参数。

....
#remove ARG + ENV with no value or default
ENV myBackendUrl
...
CMD envsubst < /usr/share/nginx/html/js/config.js > /usr/share/nginx/html/js/config.js.tmp && mv /usr/share/nginx/html/js/config.js.tmp /usr/share/nginx/html/js/config.js && nginx -g daemon off

在命令行上：

docker-compose --env-file <env_file> up 
docker-compose -e myBackendUrl=<url> up

使用 docker-compose / docker 在运行时将 env 变量放入前端 js 文件

Put env variable into frontend js file during runtime using docker-compose / docker

frontend

runtime

environment-variables

docker

docker-compose