Question

我想对我的vuejs应用进行dockerize，并从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;"]

docker-compose：

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

在vue js应用中，您需要将环境变量作为VUE_APP_传递因此您的情况应该是VUE_APP_FIRST_ENV_VAR

Answer 2

您可以尝试一下。 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

Answer 3

基于此https://medium.com/@rakhayyat/vuejs-on-docker-environment-specific-settings-daf2de660b9，我制作了一个愚蠢的npm软件包，可帮助您完成所需的操作。

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

基本上只运行>>> class Container: ... def __getitem__(self, item): ... print('Container.__getitem__ called with', item) ... def __delitem__(self, item): ... print('Container.__delitem__ called with', item) ... >>> container = Container() >>> container[:] Container.__getitem__ called with slice(None, None, None) >>> del container[:] Container.__delitem__ called with slice(None, None, None) >>> del container。新的Dockerfile，入口点和json文件将添加到您的项目中。

可能需要修改Dockerfile中的某些目录和/或文件名才能起作用。

Answer 4

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

您可以通过更改CMD来执行此命令，以执行命令“ env”以显示容器中的所有环境。

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

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

4 个答案: