[React].envファイルの使い方

はじめに

Reactでの.envファイルの使い方についてメモとして残しておきます。

Reactにおける.envファイルの使い方

.envファイルにはアプリケーションで使用する、環境変数や設定値を設定することが多いです。

以下がサンプルコードになります。

.env

REACT_APP_SAMPLE_VALUE=Hello World

Reactでは、頭文字に「REACT_APP_」を付けないといけません。
それでは呼び出してみましょう。

export const Sample = () => {
  const envValue = process.env.REACT_APP_SAMPLE_VALUE;

  return (
    <div>
        <p>{envValue}</p>
    </div>
  );
};

呼び出すときは、「process.env.(環境変数名)」という風に呼び出します。
画面を確認していきましょう。

すると、画像のように.envファイルの変数の値を取得することができました!

ちなみに、APIのシークレットキーなどの情報は、管理すべきではないそうです。
※gitignoreで隠しファイルとして設定しても、ビルド時のログを確認すると見れてしまうらしいです。

最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、