在运行时将环境变量传递给带有docker-组合的Vue.js应用程序

Question

这是我关于这个问题的第二篇文章。从那以后，我删除了这个问题，因为我找到了一个更好的方法来解释我到底想做什么。

本质上，我希望将命令行参数传递给docker-compose up，并将它们设置为Vue.js web应用程序中的环境变量。目标是能够更改环境变量，而不必每次都重新构建容器。

我在这方面遇到了几个问题。这是我的码头文件：

用于Vue.js应用程序的Dockerfile。

FROM node:latest as build-stage
WORKDIR /app

# Environment variable.
ENV VUE_APP_FOO=FOO

COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build

FROM nginx as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf

VUE_APP_FOO是通过Node的process.env存储和访问的，似乎是在构建时传入的。

我的对接者

version: '3.5'

services:
    ms-sql-server:
        image: mcr.microsoft.com/mssql/server:2017-latest-ubuntu
        ports: 
            - "1430:1433"
    api:
        image: # omitted (pulled from url)
        restart: always
        depends_on: 
            - ms-sql-server
        environment:
            DBServer: "ms-sql-server"
        ports:
            - "50726:80"
    client:
        image: # omitted(pulled from url)
        restart: always
        environment:
            - VUE_APP_BAR="BAR"
        depends_on: 
            - api
        ports:
            - "8080:80"

当我使用docker exec -it <container_name> /bin/bash进入客户端容器时，VUE_APP_BAR变量的值为"BAR“。但是变量没有存储在我的Vue应用程序中的process.env对象中。似乎有些奇怪的事情发生在Node和环境变量上。就好像它忽略了容器环境。

我是否可以访问在我的Vue.js应用程序中的docker-compose.yml中设置的容器级变量？此外，是否存在将这些变量作为参数传递给docker-compose up的问题？如果你需要任何澄清/更多的信息，请告诉我。

Answer 1

所以我想出了如何以一种完全适合我的用例的方式来做这件事。快速回顾一下我想做的事情:能够通过Vue.js应用程序传递环境变量，以便不同的团队成员根据他们的分配测试不同的开发api(本地运行服务器的本地主机，api-dev，api-暂存，api-prod)。

第一步是在VueJS项目中的JS文件中声明变量(可以在任何地方定义)，格式如下：

export const serverURL = 'VUE_APP_SERVER_URL'

快速注意这个字符串的值：它必须对整个项目是完全唯一的。如果您的应用程序中有任何其他字符串或变量名与它匹配，它将被替换为我们使用此方法传递的docker环境变量。

接下来，我们必须转到docker-compose.yml，并在那里声明环境变量：

docker-compose.yml

your_vuejs_client:
    build: /path/to/vuejs-app
    restart: always
    environment: 
        VUE_APP_SERVER_URL: ${SERVER_URL}
    ports:
        - "8080:80"

现在，当您在终端中运行docker-compose up时，您应该会看到如下所示：WARNING: The SERVER_URL variable is not set. Defaulting to a blank string.

在我们正确地安装了我们的坞-组合设置之后，我们需要在VueJS应用程序中创建一个入口点脚本，以便在该应用程序通过nginx启动之前运行。为此，回到您的VueJS目录并运行touch entrypoint.sh来创建一个空白bash脚本。把它打开，这就是我自己的东西：

entrypoint.sh

#!/bin/sh

ROOT_DIR=/usr/share/nginx/html

echo "Replacing env constants in JS"
for file in $ROOT_DIR/js/app.*.js* $ROOT_DIR/index.html $ROOT_DIR/precache-manifest*.js;
do
  echo "Processing $file ...";

  sed -i 's|VUE_APP_SERVER_URL|'${VUE_APP_SERVER_URL}'|g' $file

done

sed -i 's|VUE_APP_SERVER_URL|'${VUE_APP_SERVER_URL}'|g' $file这一行横穿字符串'VUE_APP_SERVER_URL‘的整个应用程序，并将其替换为docker-compose.yml中的环境变量。

最后，我们需要在我们的VueJS应用程序Dockerfile中添加一些行，让它运行我们刚刚创建的在启动nginx之前创建的入口点脚本。因此，就在您的Dockerfile中的CMD ["nginx", "-g", "daemon off;"]行之前，添加下面的行：

VueJS Dockerfile

# Copy entrypoint script as /entrypoint.sh
COPY ./entrypoint.sh /entrypoint.sh

# Grant Linux permissions and run entrypoint script
RUN chmod +x /entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]

之后，运行docker-compose run -e SERVER_URL=yourserverapi.com/api，我们在JS文件中开始设置的serverURL常量将被您在docker命令中提供的任何内容替换。这是一个痛苦的终于开始工作，但我希望这能帮助任何面临类似问题的人。最重要的是，您可以随心所欲地添加多少环境变量，只需在entrypoint.sh文件中添加更多的行，并在Vue.js应用程序和docker-compose文件中定义它们。我使用过的一些程序为USPS提供了不同的端点，这取决于您是在本地运行还是托管在云中，根据实例是在生产中运行还是在开发中运行等等，提供了不同的Maps API密钥等等。

我真的希望这能帮到别人，如果有人有什么问题，请告诉我，我希望能有所帮助。

Answer 2

客户端应用程序在web浏览器上运行，但是环境变量在服务器上。客户端需要一种从服务器获取环境变量值的方法。

要做到这一点，您有几种选择，包括：

1. 利用Nginx为环境变量本身服务，使用一种类似于以下方法的方法：使用环境变量。这种方法可能是快速的、更动态的或更静态的，取决于您的需求，可能不那么正式和优雅。或
2. 实现服务器API (Node.js?)它读取环境变量并通过阿贾克斯调用将其返回给客户端。这种方法优雅，动态，以API为中心.或
3. 最后，如果环境变量是每个部署的每个nginx实例都是静态的，那么您可以在部署期间构建Vue应用程序的静态资产，并在静态资产中硬编码环境变量。这种方法有些优雅，但会在服务器细节上污染客户端代码，而且有些静态(只能在部署时更改)。

Answer 3

正如我在这里发布的https://stackoverflow.com/a/63097312/4905563，我已经开发了一个包，可以帮助。

尝试使用npm install jvjr-docker-env，看看README.md，看看一些使用的例子。