[解決済み] reactプロジェクトでdotenvを使用することは可能ですか？

質問

私はいくつかの環境変数を設定しようとしています（dev/prodのエンドポイントへのAPIコールを行うため、dev/prodに依存するキーなど）、dotenvを使用して動作するかどうか疑問に思っています。

dotenvをインストールし、webpackを使用しています。

私のwebpackのエントリは main.js で、このファイルには require('dotenv').config()

そして、webpackのconfigに、こう書いています。

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

しかし、まだ未定義です。 どうしたら正しくできるのでしょうか？

どのように解決するのですか？

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

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

var nodeEnv = process.env.NODE_ENV;

さらに DefinePlugin を使うことで、ビルドターゲット (dev, prod, など) に応じて異なる値を明示的に指定することができます。ただし、この場合 JSON.stringify に渡されるすべての値を指定する必要があります。

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

これはどんな種類の公開情報でも構いませんが、次のようにすべきです。 秘密鍵、パスワード、API の秘密などには決して使用しないでください。 . これは、焼き付けられた値はすべて一般にアクセス可能であり、機密情報を含む場合は悪意を持って使用される可能性があるためです。これらの種類のものについては、サーバーサイドのコードをいくつか書いて、秘密を使用してサードパーティのAPIで認証できる簡単なAPIを構築し、関連する詳細をクライアントサイドのアプリケーションに渡す必要があります。サーバー側APIは仲介役として機能し、必要なデータを取得しながらも、秘密を保護します。