使用docker-compose在运行时向Vue.js应用程序传递环境变量

Question

我遇到了几个问题。以下是我的docker文件：

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是通过节点的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"

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

Answer 1

因此，我想出了如何以一种简单的方式来完成这一工作，这对我的用例来说是完美的。快速回顾一下我想做的事情：能够通过docker-compose文件将环境变量传递给Vue.js应用程序，以允许不同的团队成员根据他们的分配（如果在本地运行服务器，则为localhost，api-dev、api-staging、api-prod)测试不同的开发API。

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

导出常量serverURL='vue_app_server_url'

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时，您应该看到如下内容:警告：未设置SERVER_URL变量。默认为空字符串。

在正确设置了docker-compose之后，我们需要在VueJS应用程序中创建一个入口点脚本，以便在应用程序通过nginx启动之前运行。为此，导航回您的VueJS目录，并运行touch entrypoint.sh以创建一个空白的bash脚本。打开它，这就是我的：

#!/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

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-compose命令中提供的任何内容替换。这是一个痛苦的最终工作，但我希望这有助于任何人面临类似的麻烦。很棒的一点是，您可以添加任意多的环境变量，只需在entrypoint.sh文件中添加更多的行，并在vue.js应用程序和您的docker-compose文件中定义它们。我使用的一些方法是根据您是在本地运行还是托管在云中为USPS API提供不同的endpoint，根据实例是在生产中运行还是在开发中运行提供不同的Maps API键，等等。

我真的希望这能帮助一些人，让我知道如果任何人有任何问题，我希望能提供一些帮助。