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

Question

我想对我的 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 应用程序？

Answer 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 中的某些目录和/或文件名才能正常工作。

Answer 2

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

Answer 3

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

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

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

Answer 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