Gatsby.jsの環境変数とは？

例えばGatsby.jsで一つサイトを作ったとする。

全く同じプログラムで別サイトを立ち上げたい時、プログラム自体は変わらないが「タイトル」や「URL」の設定を変化させたい。

こんなときに環境変数を使って定数を管理する。

また、Gatsby.jsでは「開発」と「本番」で読み込むファイルを自動的に切り替えられるのも重要。

では、早速使い方に入る。

環境変数用のファイルを用意する

日本語だとここの解説をしているサイトが殆どない。

上級者から見れば書くまでもないのかもしれないが、初心者はここで躓いていると思う。

まずプロジェクトのルートディレクトリに次の2つの空のファイルを作っておく。

※gatsby-node.jsが入っているのと同じ階層

• .env.development
• .env.production

ドットから始まる変なファイル名だが、これで良い。

おまけ：.gitignore

ソースをGitで管理している場合は環境変数ごとアップロードするのはよろしくないので.gitignoreにも追記しておこう。

環境変数を記述

今回はテストなのでテスト用の変数だけ入れておく

.env.developmentには

TEST=DEVELOPMENTだよーん

.env.productionには

TEST=PRODUCTIONだよーん

※変数名=値 の書式ではあるがスペース等ない場合文字列のダブルクォーテーション等は省略できる。

適当なコンポーネントで読み込んでみる

もうこれだけでbuild or dev時に読み込まれるのでまずはコンポーネント側で読み込んでみる。

※環境変数を編集した場合はdevサーバなどは再起動しないと読み込まれないので注意

適当なコンポーネントに次の行を差し込む。特別なものをimportする必要もない。

console.log(process.env.TEST)

変数名はprocess.env.に続いてファイルごとに設定した変数名をつなげる。ここではTEST。

devサーバを立ち上げる

これでdevサーバーを立ち上げてブラウザのデバッグツールでconsoleを見てみよう。

なんの宣言もせずファイルを作ってコードを書いたで.env.developmentから環境変数が読まれていることがわかる。

当然だがBuildしたものを実際のWEBサーバーにアップロードして実行すると「PRODUCTIONだよーん」が表示される

非常に簡単。

gatsby-node.jsで読み込む場合

gatsby-node.js内で読み込む場合は次のインポート文が必要。

//環境変数を使うために必要
require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

こちらもdotenvを使っているがはじめからインストールされているのでnpm installなども必要ない。

とりあえずそういうルールだと覚えておけば良い。

以上

環境変数についてはGatsby.jsがデフォルトで用意している機能なので非常に簡単に実装できる。

今回は簡単な実装に絞って解説したが、更に複雑な使い方を知りたければ公式を参照。

Environment Variables | Gatsby