docker-compose / dockerを使用して、実行時に環境変数をフロントエンドjsファイルに配置します

okwaves2024-01-25  9

私は docker の使用が初心者で、現在、実行時にフロントエンド .js ファイル内にバックエンド URL を動的に設定しようとしています。フロントエンドとバックエンドで構成されるアプリケーションがあります。現時点では、バックエンド URL は次のように docker-compose.yml で指定できます。

myFrontend:
build:
  context: ./frontend-dockerfile-location
  args:
    BACKEND_URL: myBackendUrl

対応する dockerfile で nginx ベースを作成し、そこにすべての静的ファイルをコピーして、正しいバックエンド URL を設定します。

FROM nginx:latest
#access the arg defined in the yml file
ARG myBackendUrl
#write the backend url into the containers environment
ENV myBackendUrl=${myBackendUrl}
COPY . /usr/share/nginx/html/
#replace the config.js URL placeholder with the environment variable
RUN envsubst < /usr/share/nginx/html/js/config.js > /usr/share/nginx/html/js/config.js.tmp && mv      /usr/share/nginx/html/js/config.js.tmp /usr/share/nginx/html/js/config.js

このセットアップの問題は、バックエンド URL を変更したい場合は常にイメージを新たに構築する必要があることです。そこで私は、実行時にバックエンド URL を変更する方法を考えて解決策を探し始めました。ここで私の最初の疑問が生じます。実行時に環境変数を変更することは可能ですか、それとも runti「コンテナの起動時に環境変数を設定する」ということですか?

2 番目の質問は、私が遭遇した考えられる解決策に関するものです。まず、私の問題に対する適切な解決策が webpack であるかどうか疑問に思いました。私のフロントエンドはクライアントに提供され、クライアントのブラウザ上で実行されるため、単純に環境変数を定義して process.env 経由でアクセスすることはできません。まだ有効な解決策はありませんが、これが私の質問に対する答えになるかもしれないと信じています。私が機能すると思うもう 1 つの代替案は、エントリーポイント命令です。これにより startup コマンドの定義が可能になると読んだので、現在 dockerfile で使用しているシェル スクリプト構文をシェル スクリプトに入れて、これをイメージのエントリポイントにできないか疑問に思いました。この間違いを理解できれば正確には、コンテナの起動時に常にスクリプトが実行されるため、イメージを再構築することなく URL を変更できます。

これらの概念については、何度読んでも理解するのが難しいため、誰かがこれらの質問を手伝ってくれると本当に助かります。



------------------------

私はあなたと同じトリックを使用し、sed コマンドを使用して Javascript のプレースホルダーを置き換えます。もっと良い方法があると確信しています。ただし、問題については、スクリプトを使用してプレースホルダーを置き換えることができます。これは、CMD または ENTRYPOINT コマンドで実行する必要がありますNGINX コマンドでチェーンされている場合、URL はビルド引数を使用せずに env によって渡されます。

....
#remove ARG + ENV with no value or default
ENV myBackendUrl
...
CMD envsubst < /usr/share/nginx/html/js/config.js > /usr/share/nginx/html/js/config.js.tmp && mv /usr/share/nginx/html/js/config.js.tmp /usr/share/nginx/html/js/config.js && nginx -g daemon off

コマンドラインで:

docker-compose --env-file <env_file> up 
docker-compose -e myBackendUrl=<url> up

1

ありがとう、うまくいきました。リアルタイムの側面に関しては、express.js と ejs を使用したサーバーサイド レンダリングを使用しました。同様の問題に遭遇した人にとっては興味深いかもしれません。

– カメ

2020 年 10 月 6 日 7:28

総合生活情報サイト - OKWAVES
総合生活情報サイト - OKWAVES
生活総合情報サイトokwaves(オールアバウト)。その道のプロ(専門家)が、日常生活をより豊かに快適にするノウハウから業界の最新動向、読み物コラムまで、多彩なコンテンツを発信。