【React】本番環境で使用できる環境変数の設定の仕方

Question

実現したいこと

本番環境 (わたしの場合は vercel を使用しています) でも API を取得したい

発生している問題・分からないこと

ローカルでは API が取得できるのですが、本番環境 (わたしの場合は vercel を使用しています) で API が取得できない。

理由はおそらく API を取得する際に使用する環境変数が関係していそう...

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

行ったこととしては

.env.development と .env.production に

REACT_APP_XXX=< APIキー >

を記述して .gitignore に当該ファイルを記述しました

なぜローカルではAPIが取得できるのに、本番環境ではエラーとなるのか理由がわかりませんでした。
すみません、こちらについてご存知でしたら教えて頂けないでしょうか

補足

特になし

Comments

[mike2mike4]

本番環境の環境変数にキーを指定してますか？　基本的な質問で失礼ですが、明確に書かれてないように思えたので。あと、考え方の一部だけのリンクを貼らせていただきます（回答ではないですが、参考になるかとおもうので）
https://mike2mike.xyz/2023/05/22/%e7%92%b0%e5%a2%83%e5%a4%89%e6%95%b0%e3%82%92-env%e3%81%ab%e7%bd%ae%e3%81%8f%e3%81%ae%e3%81%af%e3%82%84%e3%82%81%e3%81%a6%e3%81%8a%e3%81%84%e3%81%9f%e3%81%bb%e3%81%86%e3%81%8c%e3%81%84%e3%81%84/

Answer 1

Vercel であれば、 .env のようなファイルを使わずに、vercel の設定画面から環境変数を指定する必要があるはずです。

https://vercel.com/docs/projects/environment-variables

Comments

[_chii]

ありがとうございます！
おっしゃる通りでした🙇‍♀️