如何在应用启动期间从 .env 加载配置？

Question

我有一个 quasar 应用程序，它使用 DOTENV - Quasar Framework app extension 从文件 .env 加载配置。

当 quasar 应用程序构建时，它将从 .env 文件加载所有配置，但我想在应用程序启动时加载 .env 文件。

应用在 Kubernetes 上运行，所有配置存储为ConfigMap。在容器启动过程中，我将.env文件挂载如下：

      containers:
        - name: argo-ui-test
          image: "example.io/ui/argo-ui-test:0.1.9"
          volumeMounts:
          - name: svc-config-url
            mountPath: /app/.env
            subPath: .env
          imagePullPolicy: Always
          ports:
            - name: http
              containerPort: 8080
              protocol: TCP
          livenessProbe:
            httpGet:
              path: /
              port: http
          readinessProbe:
            httpGet:
              path: /
              port: http
          resources:
            {}
      volumes:
        - name: svc-config-url
          configMap:
            name: svc-url

当我查看容器内部时，文件已成功挂载：

drwxr-xr-x 1 root root  4096 Oct 17 10:33 .
drwxr-xr-x 1 root root  4096 Oct 17 10:33 ..
-rw-r--r-- 1 root root    97 Oct 17 10:33 .env
-rw-r--r-- 1 root root   494 Oct  6 09:12 50x.html
drwxr-xr-x 2 root root  4096 Oct 17 09:33 css
-rw-r--r-- 1 root root 16645 Oct 17 09:33 favicon.ico
drwxr-xr-x 2 root root  4096 Oct 17 09:33 fonts
drwxr-xr-x 2 root root  4096 Oct 17 09:33 icons
-rw-r--r-- 1 root root   905 Oct 17 09:33 index.html
drwxr-xr-x 2 root root  4096 Oct 17 09:33 js
I have no name!@argo-ui-test-5c65cb78dc-jnshk:/app$ cat .env
KC_SVC_URL=https://oic.dev.example.io/auth/
USER_SVC_URL=https://user.dev.svc.example.io/api/

quasar 应用在​​启动时不会从.env 文件中加载配置。 我做错了什么？

Answer 1

环境变量实际上在构建时（npm build 阶段）而不是运行时被引用并烘焙到构建的工件中。

如果您想在运行时更改它们。你必须做更多的工作。一种适用于我的方法是提供自定义入口点 shell 脚本（例如在您的 docker 文件中）：

CMD ["sh", "/entrypoint.sh"]

shell 脚本会：

#!/bin/sh

# Replace env vars in JavaScript files
echo "Replacing env vars in JS"
for file in app/js/app.*.js;
do
  echo "Processing $file ...";

  # Use the existing JS file as template
  if [ ! -f $file.tmpl.js ]; then
    cp $file $file.tmpl.js
  fi

  envsubst '$VUE_APP_BACKEND_HOST' < $file.tmpl.js > $file
done

echo "Starting Nginx"
nginx -g 'daemon off;'

这将使用传递给 kube pod/docker run 的当前环境变量从构建的代码中更改 $VUE_APP_BACKEND_HOST 的任何实例，这个 shell 实际上启动了一个 nginx 来提供文件，但你可以将它更改为任何你想要的

我还使用此脚本作为应用程序中的助手来从一个位置引用所有变量，我在开发期间仅使用 .env 文件，在部署时我使用配置映射将这些值直接映射到 env 变量。

export default class Configuration {
  static get CONFIG () {
    return {
      backendHost: '$VUE_APP_BACKEND_HOST',
    }
  }

  static value (name) {
    if (!(name in this.CONFIG)) {
      console.log(`Configuration: There is no key named "${name}"`)
      return
    }

    const value = this.CONFIG[name]

    if (!value) {
      console.log(`Configuration: Value for "${name}" is not defined`)
      return
    }

    if (value.startsWith('$VUE_APP_')) {
      // value was not replaced, it seems we are in development.
      // Remove $ and get current value from process.env
      const envName = value.substr(1)
      const envValue = process.env[envName]
      if (envValue) {
        return envValue
      } else {
        console.log(`Configuration: Environment variable "${envName}" is not defined`)
      }
    } else {
      // value was already replaced, it seems we are in production.
      return value
    }
  }
}