API キーを環境変数として保存しようとしていますが、アクセス方法がわかりません... npm を使用して dotenv をインストールし、ルート ディレクトリにファイルを作成し、そこにキーを置きました。 process.env.API_KEYを使用してjsファイルでアクセスしようとしましたが、変数が未定義であることが表示されます。
キーが必要なファイルの先頭に require('dotenv').config() を配置しようとしましたが、エラーが発生しました...
間違ったファイルに入れたか、何かが足りないかのどちらかだと思います
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
＃＃＃結論は：＃＃＃
React レイヤーで
API_KEY変数を読み取るには、ビルドする前に変数 REACT_APP_API_KEY をエクスポートする必要があります。その後、任意の React パーツで : を介して値を取得できます。 リーリー プレフィックス
REACT_APP_が必要な理由については、リンクを参照してください。 さらに、トークンが有効期間の長いトークンまたは有効期限のないトークンである場合は、フロントエンド (React) に公開しないでください。有効期限切れのトークン (
AuthCodeoauth2Auth) のみをフロントエンド層に公開する必要があります。 フロントエンド変数の処理方法については、リファレンスを確認してください
参考文献
JS utilファイル(CRA)の実行環境メソッドを検出する方法-
React サーバー環境変数をクライアント フロントエンドに使用することは可能ですか? -
Axios を使用して Env キーを取得する方法-
本番環境で、React が別の EC2 インスタンス上のバックエンド API サーバーと通信できるようにする-
バックエンド アプリケーションと同じように、フロントエンド JS アプリケーションで変数置換を使用するにはどうすればよいですか? -