React

create-react-appで作成したプロジェクトでAPIキーを隠す

  /

結論

  1. プロジェクト直下に.envファイルを作成する
  2. ①にREACT_APP_というプレフィクスを付けた環境変数を宣言し、APIキーを代入する
  3. process.env.REACT_APP_〇〇で呼び出す

解説

.envファイルを作成し、下記のようにREACT_APP_で始まる環境変数を作成します。

REACT_APP_POSIPAN_API_KEY=[API_KEY]

process.env.REACT_APP_◯○で呼び出せます。
試しにconsole.logを使って確認してみると良いでしょう。

console.log(process.env.REACT_APP_POSIPAN_API_KEY);

実際にはこんな感じで使用します。

const url = 'https://example.com?key=' + process.env.REACT_APP_POSIPAN_API_KEY;

ではまた👍

関連記事