1

我有下一个 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"}

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

码头工人版本

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
4

2 回答 2

0

Quasar 允许您通过build.env.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);

不过有几点注意事项

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

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

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

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

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

这样，您的所有环境导入都有一个入口点。但是请注意，它不提供代码剥离：

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

这段代码永远不会被删除。要使用代码剥离，您必须使用process.env.DEBUG === "true"符号，因此它被替换为"false" === "true"quasar，后来被代码捆绑器剥离为无法访问的代码块。

于 2020-06-02T13:24:51.687 回答
-1

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

希望这有帮助

于 2018-04-04T20:19:18.473 回答