在 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"

这是前端图像Docker文件

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"}

前端一切正常，我的独特问题是环境变量。我的objective是针对不同的环境设置不同的环境变量

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 撰写版本

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

希望对您有所帮助

Answer 2

Quasar 允许您通过 build.env 属性 of quasar.conf.js.

传递自定义环境变量

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);

一些注意事项，不过

首先，强烈建议过滤传递给 quasar 应用程序的变量，即 public 范围 .

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

Note that only NODE_ENV, BASE_URL, and variables that start with VUE_APP_ will be statically embedded into the client bundle ... (from vue-cli guide).

Quasar 不会立即嵌入任何东西，但您可以使用它的 build.env 配置属性.

完全控制嵌入的内容和方式

其次，请注意，当您传递 { BACKEND_HOSTNAME: "localhost" } 变量然后像 var h = process.env.BACKEND_HOSTNAME; 类星体一样静态使用它时将替换为 localhost 原样，没有尝试以某种方式序列化该值，因此它的计算结果为 var h = localhost，这不是有效的 JS，您可能会收到语法错误。相反，如果您想安全起见，我建议在传递给类星体配置时将所有环境值序列化为带有 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" ，后来被代码打包器剥离为无法访问的代码块。

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

How can I get environment variables from docker compose in Quasar Framework?

node.js

environment-variables

docker-compose

quasar-framework

Quasar App CLI v2+

Quasar App CLI v2 之前