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 Version

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

希望这个帮助

Answer 2

Quasar允许您通过build.env的{{1}}属性传递自定义环境变量。

Quasar App CLI v2 +

quasar.conf.js

您现在将可以在类星体应用程序中使用env变量：

{
    // ...
    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),
        }
    }
}

v2之前的Quasar App CLI

您可以简单地做到：

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

或批量传递所有内容：

{
    // ...
    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!
        }
    }
}

您现在将可以在类星体应用程序中使用env变量：

{
    // ...
    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) ])
        )
    }
}

不过有几点笔记

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

vue-cli默认情况下会执行类似的操作：

请注意，只有console.log(process.env); console.log(process.env.APP_OAUTH_CLIENT);，NODE_ENV和以BASE_URL开头的变量将被静态嵌入到客户端包中（从vue-cli guide开始）。

Quasar不会开箱即用地嵌入任何内容，但可以让您完全控制使用VUE_APP_的config属性来嵌入内容和方式。

第二，请注意，当您传递build.env变量，然后像{ BACKEND_HOSTNAME: "localhost" }类星体一样静态地使用它时，将其{strong>替换并按原样var h = process.env.BACKEND_HOSTNAME; ，而不是尝试以某种方式序列化该值，因此它的值为localhost，这不是有效的JS，您可能会收到语法错误。相反，如果您出于安全考虑，建议在传递给quasar配置时，使用var h = localhost将所有env值序列化为字符串，以使JSON.stringify成为var h = process.env.BACKEND_HOSTNAME;。 / p>

我还发现定义一个专用于处理env变量的模块很有用：

var h = "localhost"

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

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"，然后用代码捆绑器作为不可访问的代码块将其剥离。

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

2 个答案:

Quasar App CLI v2 +

v2之前的Quasar App CLI