react環境変数

環境変数の設定

reactで環境変数を設定するには.envファイルを作成する必要がある。
create-react-appで作成した場合と、Viteで作成した場合で変数名が少し変わる。

create-react-appの場合

変数名の先頭にREACT_APP_を付ける

REACT_APP_XXXXX=123456789

環境変数を使うときはprocess.env.を使う

const key = process.env.REACT_APP_XXXXX;

Viteの場合

こちらは先頭にVITE_が必要

VITE_XXXXX=987654321

使うときはimport.meta.env.になる

const key = import.meta.env.VITE_XXXXX;

環境変数を変更した場合はサーバーを再起動しないとエラーになる

参考サイト