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) を実行すると、取得できるプロパティは 1 つだけです。

{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
4

2 に答える 2

0

Quasar では、build.envのプロパティを介してカスタム環境変数を渡すことができますquasar.conf.js。

Quasar アプリ 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

v2 より前の Quasar App CLI

次のように簡単にできます。

{
    // ...
    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 アプリケーションに渡される変数をフィルター処理することを強くお勧めします。つまり、パブリック スコープを意味します。

vue-cli はデフォルトで同様のことを行います:

NODE_ENV、BASE_URL、および で始まる変数のみVUE_APP_がクライアント バンドルに静的に組み込まれることに注意してください... ( vue-cli guideから)。

Quasar はそのままでは何も埋め込みませんが、build.env構成プロパティを使用して、何をどのように埋め込むかを完全に制御できます。

{ BACKEND_HOSTNAME: "localhost" }次に、変数を渡してからvar h = process.env.BACKEND_HOSTNAME;quasarのように使用すると、何らかの方法で値をシリアル化しようとせずに静的に as is に置き換えるため、有効な JS ではない に評価され、おそらく構文エラーが発生することに注意してください。代わりに、安全を確保したい場合は、quasar config に渡すときにすべての env 値を文字列にシリアル化することをお勧めします。localhost var h = localhostJSON.stringifyvar h = process.env.BACKEND_HOSTNAME;var h = "localhost"

また、env 変数を処理するための専用モジュールを定義すると便利だと思います。

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 に答える