環境変数を使用して React プロジェクトに関数を実装するにはどうすればよいですか?

Question

API キーを環境変数として保存しようとしていますが、アクセス方法がわかりません... npm を使用して dotenv をインストールし、ルート ディレクトリにファイルを作成し、そこにキーを置きました。 process.env.API_KEYを使用してjsファイルでアクセスしようとしましたが、変数が未定義であることが表示されます。

キーが必要なファイルの先頭に require('dotenv').config() を配置しようとしましたが、エラーが発生しました...

リーリー

間違ったファイルに入れたか、何かが足りないかのどちらかだと思います

Answer 1

＃＃＃結論は：＃＃＃

React レイヤーで

API_KEY

変数を読み取るには、ビルドする前に変数 REACT_APP_API_KEY をエクスポートする必要があります。その後、任意の React パーツで : を介して値を取得できます。 リーリー プレフィックス

REACT_APP_

が必要な理由については、リンクを参照してください。 さらに、トークンが有効期間の長いトークンまたは有効期限のないトークンである場合は、フロントエンド (React) に公開しないでください。有効期限切れのトークン (

AuthCodeoauth2Auth

) のみをフロントエンド層に公開する必要があります。 フロントエンド変数の処理方法については、リファレンスを確認してください

参考文献

JS utilファイル(CRA)の実行環境メソッドを検出する方法
React サーバー環境変数をクライアント フロントエンドに使用することは可能ですか?
Axios を使用して Env キーを取得する方法
本番環境で、React が別の EC2 インスタンス上のバックエンド API サーバーと通信できるようにする
バックエンド アプリケーションと同じように、フロントエンド JS アプリケーションで変数置換を使用するにはどうすればよいですか?