如何从 Quasar Framework 中的 docker compose 获取环境变量？

Question

我有下一个 docker-compose 配置

version: '3'

services:  
 frontend:
  image: frontend-image
  depends_on:
   - backend-image
  ports:
    - 8081:8081
  environment:
   - OAUTH_CLIENT="client"
   - OAUTH_CLIENT_KEY="Client111"
   - BACKEND_HOSTNAME="localhost"
   - BACKEND_PORT="8080"

这是前端镜像 Dockerfile

FROM  quasarframework/quasar-org:1.0.0

WORKDIR /opt/app

COPY package.json /opt/app/package.json

RUN rm -r node_modules

RUN npm install

RUN npm -g install quasar-cli

COPY . /opt/app

EXPOSE 4000

EXPOSE 8081

CMD ["quasar", "dev"]

但是当我执行 console.log(process.env) 我只得到一个属性：

{NODE_ENV:"development"}

前端一切正常，我唯一的问题是环境变量。 我的目标是为不同的环境设置不同的环境变量。

Docker 版本

Client:
 Version:       17.12.0-ce
 API version:   1.35
 Go version:    go1.9.2
 Git commit:    c97c6d6
 Built: Wed Dec 27 20:11:19 2017
 OS/Arch:       linux/amd64

Server:
 Engine:
  Version:      17.12.0-ce
  API version:  1.35 (minimum version 1.12)
  Go version:   go1.9.2
  Git commit:   c97c6d6
  Built:        Wed Dec 27 20:09:53 2017
  OS/Arch:      linux/amd64
  Experimental: false

Docker Compose 版本

docker-compose version 1.18.0, build 8dd22a9
docker-py version: 2.6.1
CPython version: 2.7.13
OpenSSL version: OpenSSL 1.0.1t  3 May 2016

Answer 1

Quasar 允许您通过quasar.conf.js 的build.env 属性传递自定义环境变量。

Quasar App CLI v2+

{
    // ...
    build: {
        env: {
            OAUTH_CLIENT: process.env.OAUTH_CLIENT,
            OAUTH_CLIENT_KEY: process.env.OAUTH_CLIENT_KEY),
            BACKEND_HOSTNAME: process.env.BACKEND_HOSTNAME,
            BACKEND_PORT: parseInt(process.env.BACKEND_PORT),
        }
    }
}

您现在可以在 quasar 应用程序中使用环境变量：

console.log(process.env.APP_OAUTH_CLIENT);
// note, that
console.log(process.env);
// won't work as you might expect

---

Quasar App CLI v2 之前

你可以这么简单：

{
    // ...
    build: {
        env: {
            OAUTH_CLIENT: JSON.stringify(process.env.OAUTH_CLIENT),
            OAUTH_CLIENT_KEY: JSON.stringify(process.env.OAUTH_CLIENT_KEY),
            BACKEND_HOSTNAME: JSON.stringify(process.env.BACKEND_HOSTNAME),
            BACKEND_PORT: process.env.BACKEND_PORT, // this will be integer at runtime!
        }
    }
}

或者批量传递所有内容：

{
    // ...
    build: {
        env: Object.fromEntries(Object.entries(process.env)
            /* Filter variables which you want to pass to quasar, for example only pass variables starting with APP_ */
            .filter(([ key, value ]) => /^APP_/.test(key))
            /* Enquote strings so that they remain strings when inlined to source code by quasar */
            .map(([ key, value ]) => [ key, JSON.stringify(value) ])
        )
    }
}

您现在可以在 quasar 应用程序中使用环境变量：

console.log(process.env);
console.log(process.env.APP_OAUTH_CLIENT);

不过有几点说明

首先，强烈建议过滤传递给您的类星体应用程序的变量，即公共范围。

vue-cli 默认做类似的事情：

请注意，只有NODE_ENV、BASE_URL 和以VUE_APP_ 开头的变量会静态嵌入到客户端包中...（来自vue-cli guide）。

Quasar 没有开箱即用地嵌入任何内容，但您可以使用它的 build.env 配置属性完全控制嵌入的内容和方式。

其次，请注意，当您传递{ BACKEND_HOSTNAME: "localhost" } 变量，然后像var h = process.env.BACKEND_HOSTNAME; quasar 一样使用它时，将其静态替换 为localhost 原样，而不是尝试以某种方式序列化该值，因此它的计算结果为var h = localhost，这不是一个有效的 JS，您可能会收到语法错误。相反，如果您想安全起见，我建议在传递给 quasar 配置时将所有 env 值序列化为带有 JSON.stringify 的字符串，以便 var h = process.env.BACKEND_HOSTNAME; 变为 var h = "localhost"。

我还发现定义一个专用模块来处理环境变量很有用：

export default {
    oauthClient: process.env.OAUTH_CLIENT,
    oauthClientKey: process.env.OAUTH_CLIENT_KEY,
    backendHostname: process.env.BACKEND_HOSTNAME,
    backendPort: process.env.BACKEND_PORT,
    debug: process.env.DEBUG === 'true'
}

这样，您的所有环境导入都有一个入口点。 但是请注意，它不提供code stripping:

import myenv from './myenv';
if (myenv.debug) {
    console.log('We are debugging something');
}

此代码从不将被删除。要使用代码剥离，您必须使用 process.env.DEBUG === "true" 表示法，因此它被 quasar 替换为 "false" === "true"，后来被代码捆绑器剥离为无法访问的代码块。

Answer 2

您无法从 quasar 应用程序中获取 docker ENV。 Quasar 应用程序是客户端应用程序并在浏览器上运行，因此它无权访问容器资源。我们可以在 quasar 中使用 process.env.* 是因为 Quasar 弥补了它的方便，而 quasar 中的这些 ENV 是由 webpack 定义的。

希望有帮助