Gatsbyでサクッと環境変数を扱う

Gatsbyで環境変数を扱う

Reactで環境変数を扱うためには、dotenvを使うとか、webpackで...など方法が様々です。
ただ、私が使い方をわかっていないのか、なかななかうまく環境変数がプログラム側に渡らず困っていたところで見つけたライブラリを紹介します。

Gatsby Environment Variables Plugin を導入する

その名もズバリ！ですね。まさにGatsbyで環境変数を扱うためのプラグインです。

https://www.gatsbyjs.com/plugins/gatsby-plugin-env-variables/

導入方法は上記ページを見ればすぐにわかると思います。

導入後の使い方

導入後、次のようにして使います。

例えば、サンプルのような設定の場合。

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-env-variables`,
      options: {
        allowList: ["MY_VAR", "MY_OTHER_VAR"]
      },
    },
  ],
}

Mac/Linux系のOSでbash系のシェルを利用している場合

export MY_VAR='hoge hoge'
export MY_OTHER_VAR='fugafuga'

Windowsコマンドプロンプトの場合

set MY_VAR="hoge hoge"
set MY_OTHER_VAR="fugafuga"

React側で使う時

const myval = proccess.env.MY_VAR || 'no value'
const myothervar = proccess.env.MY_OTHER_VAR || 'no other value'

まとめ

ライブラリインストールしてconfigに設定するだけですぐに使えるようになりとても便利でした。
Gatsbyで環境変数を扱うときは、本ライブラリの使用も検討されてはいかがでしょうか?