Edited at

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.jsonscriptsを下のようなものに変える。


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
有効

有効
有効