gatsby Environment Variables まとめ

問題

Environment Variables

ここで説明されている.envの指定方法が不明瞭。どういう設定で、クライアント側（ブラウザ）で使えるのか、使えないのか、ぱっと見よく分からない。

対応表

	.env.development	.env.production	.env.*
client side	設定の変数が使える	設定の変数が使える	GATSBY_ prefixがあれば使える
server side	設定の変数が使える	設定の変数が使える	設定の変数が使える

	.env.development	.env.production	.env.*
gatsby develop	自動的に読み込まれる		dotenvで各自が読み込む設定が要る
gatsby build		自動的に読み込まれる	dotenvで各自が読み込む設定が要る

例

1. 別々の条件がある2つのサイトを1つのgatsbyで作る必要がある。
2. 2つのサイトに共通する変数がある
3. サイトそれぞれに固有の変数がある

.env.development

BASIC_VAR=両方のサイトに必要な何らかの基本的な変数

.env.site-a

ONLY_AVAILABLE_ON_SERVER=prefixが無いのでこの変数はserver側でのみ有効
GATSBY_GOOGLE_ANALYTICS_ID=42424242
GATSBY_NAME=サイト名A

.env.site-b

GATSBY_GOOGLE_ANALYTICS_ID=11111111
GATSBY_NAME=サイト名B

.env.*が読み込まれるようにgatsby-config.jsの頭に下のようなdotenv読み込みコードを入れる。

gatsby-config.js

// https://www.gatsbyjs.org/docs/environment-variables/
let activeEnv = process.env.ACTIVE_ENV || process.env.NODE_ENV || "development"
require("dotenv").config({
  path: `.env.${activeEnv}`
})

package.jsonのscriptsを下のようなものに変える。

package.json

{
  "scripts": {
    "site-a.build": "ACTIVE_ENV=site-a gatsby build",
    "site-b.build": "ACTIVE_ENV=site-b gatsby build",
    "site-a.develop": "ACTIVE_ENV=site-a gatsby develop",
    "site-b.develop": "ACTIVE_ENV=site-b gatsby develop",
  }
}

gatsby build => .env.productionを自動的に読み込む
gatsby develop => .env.developmentを自動的に読み込む
ACTIVE_ENV => .env.???を読み込む

結果

yarn site-a.developを打てば、.env.developmentと.env.site-aを読み込む。

||BASIC_VAR|ONLY_AVAILABLE_ON_SERVER|GATSBY_GOOGLE_ANALYTICS_ID|GATSBY_NAME|
|---|---|---|---|---|---|
|from|.env.development|.env.site-a|.env.site-a|.env.site-a|
|server side|有効|有効|有効|有効|
|client side|有効||有効|有効|