🕌
[React].envファイルの使い方
はじめに
Reactでの.envファイルの使い方についてメモとして残しておきます。
Reactにおける.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で隠しファイルとして設定しても、ビルド時のログを確認すると見れてしまうらしいです。
Discussion