React.js: .env ファイルから API キーにアクセスするには、使用時に REACT_APP プレフィックスが必要なのはなぜですか?つまり。 (プロセス.env.REACT_APP_API_KEY)

Question

私の理解によれば、.env ファイルには REACT_APP プレフィックスとその名前が続く API キーが保持される必要があり、変数を使用するには REACT_APP プレフィックスを省略する必要がありますが、場合によっては動作が異なることに気付きました。の。

.env ファイルに環境変数を次のように設定します: REACT_APP_YOUR_KEY_NAME=9999999999999。 process.env.YOUR_KEY_NAME 経由でアクセスすると仮定します。しかし、場合によっては (一意ではありませんが) プレフィックスが必要であることに気付きました。そうでない場合、キーは 未定義 のように見えます。したがって、process.env.REACT_APP_YOUR_KEY_NAMEを使用した場合にのみ機能します。

const FetchData= async () => {
  試す {
    const キャッシュ = localStorage.getItem('apiData');
    if (キャッシュ) {
      JSON.parse(キャッシュ)を返します。
    } それ以外 {
      const response = await fetch(`${url}?key=${process.env.REACT_APP_API_KEY}`);
      const jsonData = 応答を待ちます.json();
      localStorage.setItem('gameData', JSON.stringify(jsonData));
      jsonData を返します。
    }
  } キャッチ (エラー) {
    console.error('エラーが発生しました:', エラー);
    null を返します。
  }
};

デフォルトの FetchData をエクスポート;

Answer 1

create-react-app を通じて作成されたアプリケーション内のすべてのカスタム環境変数については、環境変数名に REACT_APP_ プレフィックスを使用する必要があります。これは要件です。規則に従わない場合、変数にアクセスできなくなります。 , 以上です。VITE と同じように、VITE_.. または Nextjs と NEXT_PUBLIC... (クライアント コンポーネントのみ) を組み合わせる必要があります。

また、すべての値はクライアント (ブラウザー) でアクセスできることに注意してください。ユーザーがブラウザーでアクセスすべきではないデータ/資格情報や、スーパー シークレット API キーには使用しないでください。

セキュリティを最大限に高めるには、これをバックエンドで使用する必要があり、バックエンドではプレフィックスは必要ありません。

詳細については、CRA の古いドキュメントを (もう一度) チェックしてください。

https://create-react-app.dev/docs/adding-カスタム環境変数