Help us understand the problem. What is going on with this article?

gatsby Environment Variables まとめ

More than 1 year has passed since last update.

問題

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 有効 有効 有効
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away