dotenvを使う

2020/09/20
Gatsby
dotenv

GatsbyJSでランタイムで利用する環境変数をdotenvで注入する方法。

環境

  • Gatsby 2.24.47
  • dotenv 8.2.0

dotenv-webpack

Environment Variables | Gatsbyの方法で環境変数が使えるが、 これはビルド時のためのものなので、ランタイム時には使えない。
そこで、ビルド時にdefine pluginをwebpack.config.jsに注入する。

手順

dotenvをインストール

$ npm install dotenv

gatsby-node.jsを編集してgatsbyがwebpack.config.jsを生成するときにdotenvの設定を入れるようにする。

const dotenv = require("dotenv");
const env = dotenv.config().parsed;
const envkeys = Object.keys(env).reduce((prev, current) =>{
  prev[`process.env.${current}`] = JSON.stringify(env[current]);
  return prev;
}, {});

exports.onCreateWebpackConfig = ({
  actions,
  plugins,
}) => {
  actions.setWebpackConfig({
    plugins: [
      plugins.define(envkeys)
    ],
  })
}

あとは普通に.envに定義した値を使う。

const value = process.env.SOME_VALUE;
Index

© 2019-2020 hassakulab.com, built with Gatsby