在运行时将 (Docker) 环境变量传递给 Vue/Quasar 应用程序

Question

阅读了 Quasar 框架对 Handling process.env 的描述后，我了解到可以在构建用于开发或生产的应用程序时添加环境变量。

You can even go one step further. Supply it with values taken from the quasar dev/build env variables:

// quasar.config.js build: { env: { FOO: process.env.FOO, } }

然后，我可以通过 process.env.FOO.
使用该变量
然而，为了暂存和生产，我正在构建一个 Docker 图像，它运行一个服务于最终 dist/spa 文件夹的 NGINX。我想在部署应用程序时传递一个环境变量，以便我可以根据 docker-compose.yml:
中的值配置 FOO 变量
// staging services: image: my-quasar-image environment: FOO: "STAGING" // production services: image: my-quasar-image environment: FOO: "PROD"

我找到了一些博客 post，其中提到您可以为 Docker 图像创建自定义 entrypoint.sh，它读取环境变量并将它们添加到 window对象，但我想知道是否有更“优雅”的解决方案。

主要问题是：是否可以在应用程序启动之前传入 (Docker) 个环境变量，然后在 process.env 上可用？

Answer 1

这就是我对完全适合我的用例的需求进行排序的方式。快速回顾一下我想做的事情：能够通过 docker-compose 文件将环境变量传递给 Vue.js 应用程序，以允许不同的团队成员根据他们的任务测试不同的开发 API（localhost if 运行本地服务器，api-dev，api-staging，api-prod).

更新 public/index.html 以在开头包含以下内容：

<script>
   // CONFIGURATIONS_PLACEHOLDER
</script>

不需要更新 vue.config.js，因为我们正在使用 public 文件夹进行配置。

创建新文件 env.js 以使用运行时变量（将其保存在 src 文件夹中）

export default function getEnv(name) {
    return window?.configs?.[name] || process.env[name];
}

在应用程序的根文件夹中创建新的bash文件set-env-variable.sh

#!/bin/sh
JSON_STRING='window.configs = { \
  "VUE_APP_VAR1":"'"${VUE_APP_VAR1}"'", \
  "VUE_APP_VAR2":"'"${VUE_APP_VAR2}"'" \
}'
sed -i "s@// CONFIGURATIONS_PLACEHOLDER@${JSON_STRING}@" /usr/share/nginx/html/index.html
exec "$@"

更新docker文件（假设它在你的vue应用程序的根文件夹中）

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html

COPY ./set-env-variable.sh /docker-entrypoint.d
RUN chmod +x /docker-entrypoint.d/set-env-variable.sh
RUN dos2unix /docker-entrypoint.d/set-env-variable.sh

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

部署

vue-app:
    ....
    volumes:
      - "./nginx/templates/:/etc/nginx/templates/"
    environment:
      VUE_APP_VAR1: my-app
      VUE_APP_VAR2: 8080

在 vue 应用程序中使用变量

import getEnv from "./service/env.js";
var myVar = getEnv("VUE_APP_VAR1");

在运行时将 (Docker) 环境变量传递给 Vue/Quasar 应用程序

Pass (Docker) environment variable into Vue/Quasar application at runtime

vue.js

quasar-framework