ふとGatsby.jsで.eveファイルを使って環境変数を使いたいと思い、同じような境遇にいらっしゃる方の参考になればなと思い、この記事を書きます。
実際、公式ドキュメントにも書いてるので、詳しい説明を見たいという方は下記URLでご覧ください。
・https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/
やり方はさほど難しくありません。
すぐ終わるので、肩の力を抜いてご覧ください！
それでは説明していきます！！
パッケージのインストール
dotenvというパッケージをインストールします。
これは主にNode.jsで.envファイルを参考する際に使うものです。
Gatsbyではこれを使って.envファイルを参照していきます。
npm install dotenv
dotenvの設定
次に、gatsby-config.jsかgatsby-node.jsで下記のコードをコピペしてください。
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`
})
envファイルの作成、呼び出し
最後に.env.developmentを作成し、任意の変数名を付けて下さい。
.env.development
FAVORITES_FOOD = POTATO
あとは呼び出すだけ。
console.log(process.env.FAVORITES_FOOD)
簡単！
ちなみにビルド時は.env.productionを作成すれば、同じように環境変数を参照できますのでぜひ忘れないうちに.env.productionを作成してください。
以上、「Gatsby.jsで.envファイルを使用する方法」でした！
Thank you for reading