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

Question

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

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

在相应的 dockerfile 中，我创建了一个 nginx 基础，将我所有的静态文件复制到那里，然后设置正确的后端 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 访问它们；我还没有一个可行的解决方案，但我相信这可能是我问题的答案。我认为可行的另一种选择是入口点指令。我读到这允许定义启动命令，并且想知道是否可以将我当前在 dockerfile 中使用的 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