使用 nginx 将环境变量从 docker-compose 传递到 vue 应用程序

Posted 2023-02-24

【中文标题】使用 nginx 将环境变量从 docker-compose 传递到 vue 应用程序

【英文标题】：Pass environment variables from docker-compose to vue app with nginx

【发布时间】：2019-12-26 10:52:27

【问题描述】：

我想对我的 vuejs 应用进行 docker 化，并从 docker-compose 文件中传递环境变量。

我怀疑应用程序仅在构建阶段获取环境变量，因此它没有从 docker-compose 获取环境变量。

vue 应用：

process.env.FIRST_ENV_VAR

Dockerfile：

FROM alpine:3.7

RUN apk add --update nginx nodejs

RUN mkdir -p /tmp/nginx/vue-single-page-app
RUN mkdir -p /var/log/nginx
RUN mkdir -p /var/www/html

COPY nginx_config/nginx.conf /etc/nginx/nginx.conf
COPY nginx_config/default.conf /etc/nginx/conf.d/default.conf

WORKDIR /tmp/nginx/vue-single-page-app

COPY . .

RUN npm install

RUN npm run build

RUN cp -r dist/* /var/www/html

RUN chown nginx:nginx /var/www/html

CMD ["nginx", "-g", "daemon off;"]

码头工人撰写：

version: '3.6'

services:

  app:
    image: myRegistry/myProject:tag
    restart: always
    environment:
      - FIRST_ENV_VAR="first environment variable"
      - SECOND_ENV_VAR="first environment variable"
    ports:
      - 8080:8080

有没有办法在构建阶段之后将环境变量传递给 Web 应用程序？

【问题讨论】：

您已经在运行阶段通过了 ENV，对于构建阶段，您需要使用 Build ARGs 问题一定是其他问题...

可能重复：***.com/questions/30494050/…

我知道如何将环境变量传递给容器，但是一旦构建了应用程序，它就无法再获取任何环境变量了

我找不到如何为 Vue 解决这个问题。但我找到了 Angluar。我们可以从那里得到这个想法并在 Vue 中使用：jvandemo.com/… 简要地说：他们有一个 env.js 文件，它不是构建后混淆代码的一部分（它用作资产）。所以它可以被安装在环境中的 env.js 替换。

【参考方案1】：

基于这个https://medium.com/@rakhayyat/vuejs-on-docker-environment-specific-settings-daf2de660b9，我制作了一个愚蠢的 npm 包来帮助你完成你想要的。

转到https://github.com/juanise/jvjr-docker-env 并查看自述文件。

基本上只运行npm install jvjr-docker-env。一个新的 Dockerfile、入口点和 json 文件将被添加到您的项目中。

您可能需要修改 Dockerfile 中的某些目录和/或文件名才能正常工作。

【参考方案2】：

在 vue js 应用程序中，您需要将 env 变量作为 VUE_APP_ 传递 所以在你的情况下它应该是 VUE_APP_FIRST_ENV_VAR

【讨论】：

这无关紧要，因为在这种情况下它不会解决任何问题。

【参考方案3】：

您可以在 docker 文档docker-compose reference envs 中看到 定义的环境值始终在容器中可用，不仅在构建阶段。

您可以通过更改 CMD 以执行命令“env”以显示容器中的所有环境来检查这一点。

如果您的应用程序没有获取 env 变量的实际值，则它应该是与您的应用程序相关的任何其他内容

【讨论】：

他知道如何将环境变量传递给容器，但是一旦构建了应用程序，它就无法再获取任何环境变量了，这是正常的，因为已经构建了 SPA

【参考方案4】：

你可以试试这个。 docker 内部的FIRST_ENV_VAR 的值将设置为主机系统上的FIRST_ENV_VAR_ON_HOST 的值。

version: '3.6'

services:

  app:
    image: myRegistry/myProject:tag
    restart: always
    environment:
      - FIRST_ENV_VAR=$FIRST_ENV_VAR_ON_HOST
      - SECOND_ENV_VAR=$SECOND_ENV_VAR_ON_HOST
    ports:
      - 8080:8080

【讨论】：

他知道如何将环境变量传递给容器，但是一旦构建了应用程序，它就无法再获取任何环境变量了，这是正常的，因为已经构建了 SPA