【やたら簡単】Gatsby.jsで環境変数

November 14, 2020

解説が難しいサイトが多いのでできるだけシンプルかつやさしく解説。

yatara_environment

目次

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を見てみよう。

image-20201114061929150

なんの宣言もせずファイルを作ってコードを書いたで.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

この記事をシェア:

author icon

仮想トイレ @CrypticToilet
プログラミングや仮想通貨のシステムトレードに関する情報を更新中!どんな情報を流しても詰まらないトイレ。