反応プロジェクトでdotenvを使用できますか？

Question

私はいくつかの環境変数を設定しようとしています（dev/prodエンドポイントへのAPI呼び出し、dev/prodに依存するキーなど）、dotenvを使うとうまくいくのだろうかと思います。

私はdotenvをインストールしました。私はwebpackを使用しています。このファイルには、私はその後require('dotenv').config()

を入れているよう

マイWebPACKのエントリは、main.jsで、私のWebPACKの設定で、私はこれを入れている：

new webpack.EnvironmentPlugin([ 
    'NODE_ENV', 
    '__DEV_BASE_URL__' //base url for dev api endpoints 
    ]) 

しかし、それはまだ定義されていません。どうやってこれを正しく行うことができますか？

Answer 1

短い答えはノーです。ブラウザーはローカルまたはサーバーの環境変数にアクセスできないため、dotenvには何も検索されません。代わりに、通常は設定モジュールでReactアプリケーションで通常の変数を指定します。

ビルドマシンから環境変数を取得し、設定ファイルに書き込むことができます。しかし、実際には、実行時ではなくビルド時に文字列を置き換えることになります。したがって、アプリケーションの各ビルドには値がハードコードされています。これらの値は、process.envオブジェクトからアクセスできます。

var nodeEnv = process.env.NODE_ENV; 

また、あなたが明示的にビルドターゲット（DEV、PRODなど）に応じて異なる値を指定できますWebPACKのためDefinePluginを使用することができます。すべての値がJSON.stringifyに渡されなければならないことに注意してください。

new webpack.DefinePlugin({ 
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') 
}), 

これは、公共の詳細の任意の並べ替えのための罰金ですが、は秘密鍵、パスワードやAPIの秘密の任意の並べ替えのために使用すべきではありません。これは、焼き付けられたすべての値が公開されており、機密情報が含まれていると悪意のある値で使用される可能性があるためです。そのようなことには、サーバー側のコードを記述し、シークレットを使用してサードパーティAPIで認証できる単純なAPIを構築し、関連する詳細をクライアント側のアプリケーションに渡す必要があります。サーバー側のAPIは仲介者として機能し、必要なデータを取得しながら秘密を保護します。