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

GatsbyJS + Netlifyで環境変数を利用するのに迷った話

私は自分のポートフォリオサイトをGatsbyJSで作成してNetlifyでホスティングしています。
タイトルの通り、環境変数で迷った話とその解決策を書きます。

この記事を要約すると

Gatsbyで作ったサイトをNetlifyなどでホスティングするなら、環境変数の名前は全てGATSBY_から始めるのが楽。

本題に入る前に

迷った話の前に、GatsbyとNetlifyそれぞれの環境変数の設定の仕方について書きます。
既にご存知の方はこのセクションは飛ばしてください:pray:

Gatsbyの環境変数

公式ドキュメントはこちら

Gatsbyはデフォルトでは.env.development.env.productionの2種類の環境変数に対応しています。

以下のコードを書くとprocess.env.ENVIRONMENT_VARIABLESの書式で環境変数を呼び出せるようになります。

gatsby-config.js
require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

gatsby developを叩いたときは.env.development
gatsby buildまたはgatsby serveを叩いたときは.env.productionが読まれます。

Netlifyの環境変数

team > 対象のsite > Site settings > Build & deploy > Environment > Environment variables >
Edit variables

と進むとNetlify上で環境変数を設定できます。

以下はスクショ

Frame 2.png

Frame 7.png

Frame 6.png

Frame 5.png

Frame 4.png

Frame 3.png

KeyValue、それぞれに任意の値を入れてSaveすれば次回のデプロイから有効化されます。

何に迷ったか

やっと本題です。
.env.*ファイルをリポジトリにアップしているのは良くありません。

そのためやりたかったことは以下です。

  1. .env.development.env.production、ともにはローカルだけに置いて開発時だけ使う
  2. Netlifyに環境変数を保存、本番のビルドではこちらを使用

ですが普通のやり方でNetlifyで保存した環境変数がビルド時に使われることはありませんでした。

解決策

.env.*の中の変数も、Netlifyに保存する変数も、どちらもGATSBY_から始める

でした。

.env.development.env.production以外の場所に保存されている環境変数であっても、GATSBY_プレフィックスを持っていれば使用できるようです。

おまけ

ここまで色々書いたんですが、私のサイトは開発環境でも本番環境でも使用する変数の中身は一緒です。

そのためgatsby-config.jsの記載を以下のように変更し、

gatsby-config.js
- require("dotenv").config({
-   path: `.env.${process.env.NODE_ENV}`,
- })
+ require("dotenv").config()

.env.development.env.production.envに統合し、

.env内の変数に全てGATSBY_プレフィックスを付与すれば、

.env
- ENV_VAR = XXXXX
+ GATSBY_ENV_VAR = XXXXX

同じ値を2つのファイルに記載する必要がなくなって少し楽になりました。
めでたしめでたし。

xrxoxcxox
デザイナーです。HTMLとCSS、それと少しだけJavaScriptも書きます。
https://www.keisukewatanuki.work/
increments
「エンジニアを最高に幸せにする」ために Qiita、Qiita Team、Qiita Jobs を開発・運営しています。
https://increments.co.jp/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした