再構築せずに動的に環境変数を変更する方法

あなたは、複数の環境に反応アプリケーションを展開する必要がありますか?
あなたがこれまでにしなければならなかったならば、このシナリオはあなたに慣れているかもしれません:あなたはすでに既存のビルドファイルを持っています、あなたは若干の環境変数を変えたいです、そして、それを新しい環境に再配備してください.
残念ながら、環境変数はビルドファイル内でハードコード化されていることがわかります.つまり、再構築せずに環境変数を変更することはできません.
環境変数を変更する方法はありますか?
我々は、他のプロジェクトがそれを扱うより良い方法を持っているかどうかについて、まわりで尋ねました.別のチームが独自のアプローチを持っていることがわかった.

一部のチームは、単にそれぞれの環境のためにそれを再構築

一部のチームは外部データソースから非同期的に環境変数を取得しました

つのチームは、アプリケーション内のすべての環境変数を格納し、URLに基づいて環境を選択した

一つのチームはプレースホルダ環境変数を保存し、ファイルを

理想的な流れはどんなものでしょうか?
上記のすべては、我々が意志がそうしなかった特定のトレードオフを持ちました.私たちは、以下を満たす何かを構築しようと思っていました

再構築を必要としない

必要最小限のコード変更

環境変数の同期アクセスを許可する

簡単に現在のワークフローと統合する

シンプルで簡単な

はENV : スタティックファイルがビルドされた後に環境変数を変更できるツール
短く簡単な説明は、env.js ファイル名/public フォルダ.ファイルを開始時に実行し、変数をwindow オブジェクト.

使い方はこちら

インレットインジェクト

npm install react-inject-env --save-dev
yarn add react-inject-env --dev

2 .追加するindex.html

<script src='/env.js'></script>

3 .新しいファイルを作成するenv.js 次のコードをコピーします.

export const env = { ...process.env, ...window['env'] }

4 .すべてのインスタンスを置き換えるprocess.env 新しく作成したenv 変数

import { env } from './env'

export const App = () => {
return (
  <div style={{backgroundColor: env.REACT_APP_COLOR}}>
    <span>{env.REACT_APP_MAIN_TEXT}</span>
  </div>
  )
}

静的ファイルのビルドnpm run build / react-scripts build /どのようなビルドスクリプトです.
6 .環境変数を以下のコマンドで設定します.

[env variables] npx react-inject-env set

# with a black background
REACT_APP_COLOR=black REACT_APP_MAIN_TEXT="Black Background" npx react-inject-env set

# with a blue background
REACT_APP_COLOR=blue REACT_APP_MAIN_TEXT="Blue Background" npx react-inject-env set

# for windows
set REACT_APP_COLOR=navy&& set REACT_APP_MAIN_TEXT=Navy Background&& npx react-inject-env set

オープンbuild/env.js 変数が存在するかどうかを確認します.
これらの変数は、実行時にアプリケーションによって読み込まれます.

そして、それはあなたが完了です!
環境変数を再度変更する必要がある場合は、次のいずれかを繰り返すことができますbuild/env.js 直接.

<挿入ツール>については?
このユーティリティは、できるだけ簡単なので、統合する必要がありますし、他のほとんどのツールで動作するように構築されました.
env/dotenvreact-inject-env 自動的にあなたの環境変数を検出します.env ルートフォルダにあるファイル.
注意:コマンドラインを通過した環境変数は.env 変数.
タイプスクリプト
ステップ単位で、ファイル名をenv.ts の代わりにenv.js

declare global {
  interface Window {
    env: any
  }
}

// change with your own variables
type EnvType = {
  REACT_APP_COLOR: string,
  REACT_APP_MAIN_TEXT: string,
  REACT_APP_LINK_URL: string,
  REACT_APP_LOGO_URL: string
}
export const env: EnvType = { ...process.env, ...window.env }

ドック
EINVにもインプレッションインレットを

FROM node:16.10-slim
COPY . /app
WORKDIR /app

RUN npm install
RUN npm run build

EXPOSE 8080

ENTRYPOINT npx react-inject-env set && npx http-server build

docker build . -t react-inject-env-sample-v2

docker run -p 8080:8080 \                   
-e REACT_APP_COLOR=yellow \
-e REACT_APP_LOGO_URL=./logo512.png \
-e REACT_APP_MAIN_TEXT="docker text" \
-e REACT_APP_LINK_URL=https://docker.link \
react-inject-env-sample-v2

概要
このパッケージは、大いに我々のワークフローを強化して、10分以上によって我々の構築と配備時間を切りました.過去に、我々は4 x回を構築しなければなりませんでした-一度、各々の環境のために-しかし、現在、我々はそれを1 xだけ構築する必要があります.展開は速く燃えている!
それは念頭に置いてシンプルで構築されたので、関係なくどのツールを使用して、あなたのワークフローの一部として統合することができる必要があります!
リンク
詳細な情報とサポートとサンプルについては、次のリンクを確認してください.

Samples

GitHub

npm