[解決済み] create-react-appでAPIキーを非表示にするには？

質問

create-react-appでお天気アプリを作りました。GitHubにコミットできるようにAPIキーを隠すにはどうしたらよいでしょうか。

今現在、キーはApp.jsの中にあります。 const API_KEY = "123456" です。

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

残念ながら、Reactクライアントで任意のキーを保持することは、たとえgitignoreと .env ファイルを使用している場合でも、残念ながら React クライアントにキーを保持することは安全ではありません。ClaudiuCreanga が指摘するように、React の環境変数はビルドに埋め込まれており、一般にアクセス可能な状態になっています。

APIキーやシークレットは、Node/Expressなどのバックエンドにのみ保存する必要があります。クライアントがバックエンド API にリクエストを送信し、バックエンド API が API キーで実際の API 呼び出しを行い、クライアントにデータを送り返すことができます。