docker - VueCLI3 应用程序(nginx/docker)使用环境特定变量

Question

如何从 Vue 应用程序外部化和使用环境变量:

创建于 VueCLI3

部署在 docker 容器中

使用 NGINX

一些细节:

该项目是 建成一次并部署到测试和实时环境。所以，我想外部化一些 的变量。改变环境 (例如要调用的 URL、域、用户名等)。 .env 的经典用法 VUE_APP_ 的文件变体prefixed 对这个问题没有帮助，因为它们的值在构建阶段被注入(inject)到代码中:一旦构建它们就不是变量。

试了一下，找到了 blog post使用 dotenv和一些额外的配置；但我无法将它与 this VueCLI 3 official guide 中的配置放在一起.该解决方案虽然不需要采用类似的方法，但我只是想找到一条出路。

可能不是有用的信息，但我打算在 Config Maps 中定义这些环境变量在 Kubernetes 配置中。

Answer 1

我想我已经完成了克服这个案子。我把决议留在这里。

在 .env.development 中定义特定于环境的环境变量(用于开发目的)并将它们也添加到 Pod configuration具有相应的值。

添加 configuration.js在你的 Vue 项目源文件夹中的某处创建文件。它将充当一个包装器，用于确定运行时是开发(本地)还是生产(容器)。就像显示的 here , 但导入/配置 dotenv不需要:

export default class Configuration {
  static get EnvConfig () {
    return {
      envKey1: '$ENV_KEY_1',
      envKey2: '$ENV_KEY_2'
    }
  }

  static value (key) {
    // If the key does not exist in the EnvConfig object of the class, return null
    if (!this.EnvConfig.hasOwnProperty(key)) {
      console.error(`Configuration: There is no key named "${key}". Please add it in Configuration class.`)
      return
    }

    // Get the value
    const value = this.EnvConfig[key]

    // If the value is null, return
    if (!value) {
      console.error(`Configuration: Value for "${key}" is not defined`)
      return
    }

    if (!value.startsWith('$VUE_APP_')) {
      // value was already replaced, it seems we are in production (containerized).
      return value
    }

    // value was not replaced, it seems we are in development.
    const envName = value.substr(1) // Remove $ and get current value from process.env
    const envValue = process.env[envName]

    if (!envValue) {
      console.error(`Configuration: Environment variable "${envName}" is not defined`)
      return
    }

    return envValue
  }
}

创建 entrypoint.sh .经过一些修改，它看起来如下所示:

#!/bin/bash

function join_by { local IFS="$1"; shift; echo "$*"; }

# Find vue env vars
vars=$(env | grep VUE_APP_ | awk -F = '{print "$"$1}')
vars=$(join_by ',' $vars)
echo "Found variables $vars"

for file in /app/js/app.*;
do
  echo "Processing $file ...";

  # Use the existing JS file as template
  cp $file $file.tmpl
  envsubst "$vars" < $file.tmpl > $file
  rm $file.tmpl
done

nginx -g 'daemon off;'

在您的 Dockerfile , 添加 CMD用于运行 entrypoint.sh上面的脚本 作为容器创建期间的引导脚本 .这样，每次启动容器时，它都会从 pod 配置中获取环境变量，并将其注入(inject)到步骤 2 中所示的 Configuration 类中。

# build stage
FROM node:lts-alpine as build-stage

# make the 'app' folder the current working directory
WORKDIR /app

# Copy package*.json and install dependencies in a separaate step to enable caching
COPY package*.json ./
RUN npm install

# copy project files and folders to the current working directory
COPY ./ .

# install dependencies and build app for production with minification
RUN npm run build

# Production stage
FROM nginx as production-stage

RUN mkdir /app

# copy 'dist' content from the previous stage i.e. build
COPY --from=build-stage /app/dist /app

# copy nginx configuration
COPY nginx.conf /etc/nginx/nginx.conf

# Copy the bootstrapping script to inject environment-specific values and pass it as argument current to entrypoint
COPY entrypoint.sh entrypoint.sh

# Make the file executable
RUN chmod +x ./entrypoint.sh

CMD ["./entrypoint.sh"]

最后，而不是 process.env使用我们的包装器配置类，如 Configuration.value('envKey1') .瞧!