react env
3.1.0
環境は、ビルドタイムではなく実行時に.envファイルから入力します。
.envファイルをサポートします。 このパッケージは、 REACT_APP_プレフィックスを持つ白い上場の環境変数を含む複数の.envファイルから__ENV.jsファイルを生成します。
< script src =" /public/__ENV.js " />ブラウザでは、変数はwindow.__ENV.REACT_APP_FOOおよびサーバーprocess.env.REACT_APP_FOOで利用可能になります。値を簡単に取得するためのヘルパー関数を含めました。
# .env
REACT_APP_NEXT= " Next.js "
REACT_APP_CRA= " Create React App "
REACT_APP_NOT_SECRET_CODE= " 1234 "...
import env from "@beam-australia/react-env" ;
export default ( props ) => (
< div >
< small >
Works in the browser: < b > { env ( "CRA" ) } </ b > .
</ small >
< small >
Also works for server side rendering: < b > { env ( "NEXT" ) } </ b > .
</ small >
< form >
< input type = "hidden" defaultValue = { env ( "NOT_SECRET_CODE" ) } />
</ form >
< small >
Entire safe environment:
< pre >
< code > { { JSON . stringify ( env ( ) ) } } </ code >
</ pre >
</ small >
</ div >
) ;次の優先順位を持ついくつかの正気なデフォルトを実装しました。
{path-to-file} // from the --path, -p argument.env.{key} // from the --env, -e argument.env.local.env構成は、サーバー上のブラウザとprocess.envで使用できます。 .gitignoreに.env.localを追加することをお勧めします。
次のようなフレームワークは.env.local, .env.production, .envなどのいくつかの素晴らしいデフォルトを可能にします。これには、「ステージング、統合、QA」などのさまざまな環境でアプリを実行することをお勧めしますが、 NODE_ENV=productionを使用して「生産」アプリを構築することができます。 React-envでこれは可能です：
# .env.staging
REACT_APP_API_HOST= " api.staging.com "
# .env.production
REACT_APP_API_HOST= " api.production.com "
# .env.qa
REACT_APP_API_HOST= " api.qa.com "
# .env.integration
REACT_APP_API_HOST= " api.integration.com "
# .env.local
REACT_APP_API_HOST= " api.example.dev "
# .env
REACT_APP_API_HOST= " localhost "ステージングの場合、アプリを実行する場所でAPP_ENV=stagingを設定するだけです。
{
...
"scripts": {
"start": "react-env --env APP_ENV -- next start" // where .env.${APP_ENV}
}
...
}
したがって、 REACT_APP_API_HOST=api.staging.comステージング環境で。
環境変数の名前を
--envに渡す必要があることに注意してください。
- ✔有効な使用（MACOS）：
APP_ENV=staging react-env --env APP_ENV -- next start- 一般的な間違い：
react-env --env staging -- next start
また、特定のENVファイルへのパスを指定することもできます。
{
...
"scripts": {
"start": "react-env --path config/.env.defaults -- next start"
}
...
}
これら2つの引数の任意の組み合わせをデフォルトの.env, .env.localとともに使用して、ランタイム構成を構築できます。
また、ホワイトリストの環境変数のプレフィックスを指定することもできます。
{
...
"scripts": {
"start": "react-env --prefix NEXT_APP -- next start"
}
...
}
# .env
NEXT_APP_NEXT= " Next.js "
NEXT_APP_CRA= " Create React App "
NEXT_APP_NOT_SECRET_CODE= " 1234 " テスト中にenv()使用する場合、Jestコマンドの前にREACT_ENV_PREFIX env変数を追加する必要があります。
{
...
"scripts": {
"test": "REACT_ENV_PREFIX=NEXT_APP jest --maxWorkers=3"
}
...
}
このパッケージをDockerFile内のENTRYPOINTスクリプトとして使用することができます。これにより、コンテナのブーツ時に__ENV.js構成ファイルが生成され、 package.jsonスクリプトが変更されないようになります。もちろん、 nodeバイナリがコンテナに存在する必要があります。
FROM node:alpine
ENTRYPOINT yarn react-env --env APP_ENV
CMD yarn start$ react-env < args > -- < command ><command> NodeJSエントリファイルなどのコマンドをreact-env CLIツールに渡すことができます。たとえば、 react-scripts 、 next dev 、 next start
--env 、 -e （デフォルト：null）既存の環境変数の名前を指定します。その価値は、環境の名前である環境の名前であり、環境固有の環境に分類されます。たとえば、最初にAPP_ENV=stagingを設定してから、 --env APP_ENVフラグを適用できます。 React-envは.env.staging, .env.local, .envをその順序でロードし、後者が優先されます。
--path 、 -p （デフォルト：null）特定のENVファイルを指定して、EG react-env --path .env.testing .env.testing, .env.local, .envロードします。 --env APP_ENV --path testingの組み合わせAPP_ENV=staging loads .env.testing, .env.staging, .env.local, .env優先順序として。
--dest 、 -d （default：./public） __ENV.jsファイルを生成するためのデフォルトの宛先を変更します。
--prefix （デフォルト：React_App）ホワイトリストに登録されたENV変数のデフォルトのプレフィックスを変更します。 exemple react-env --prefix CUSTOM_PREFIX 、 CUSTOM_PREFIX_PUBLIC_KEY=my-public-keyのようなホワイトリスト変数になります
--debug （デフォルト：false） React-envのデバッグを有効にします。これにより、 react-env --debug
大幅な壊れた変化として、 --env引数を介して特定のファイルを指定する能力を削除しました。この引数は、環境ファイルが実行中の環境に応じて解析されることを指定するようになりました。たとえば、 --env APP_ENVまたは-e APP_ENV WHERE APP_ENV=staging .env.stagingで読み取ります。プラットフォームがstaging, qa, integration環境をNODE_ENV=productionた「生産」モードで構築することが非常に一般的です。これにより、そのユーザーや他の多くが可能になります。
- --path, -p引数を介してファイルを指定することができます。
また、これはセキュリティリスクであるため、デフォルトでNODE_ENVを追加することもドロップしました。
ファイルには__ENV.jsという名前が付けられました
depandandコマンドは現在、Format react-env <args> -- <command>にあります
