GatsbyJS + Netlifyで環境変数を設定する方法

この記事では

• GatsbyJS + Netlifyで環境変数を設定する方法

について紹介します。

Netlifyで登録している本番の環境変数の設定はできていたのですが、開発環境の環境変数の設定がまだだったので今回設定してみました。

今回の手順は以下のようになります。

• プラグインのインストール
• .envファイル作成
• 環境変数読み込み

プラグインのインストール

まずは、dotenvというプラグインをインストールしていきます。

dotenvとは？

dotenvとは、開発環境のルートに環境変数を記載した.envファイルを作成しておくと、process.env経由で参照してくれるプラグインになります。

dotenv

インストール

以下のコマンドでインストールします。

$ yarn add dotenv

または、以下のコマンドでインストールします。

$ npm install --save dotenv

.envファイル作成

次に環境変数を記載しておく.envファイルを作成していきます。

ルートに.envファイルを作成し、任意の環境変数を登録します。

自分の場合は、Contetfulの情報を登録しているので、以下のようになりました。

こちらは自分の環境に合わせて変数名や値を変えてみてください。

CONTENTFUL_SPACE_ID = XXXXXXXX
CONTENTFUL_ACCESS_TOKEN = XXXXXXXX
CONTENTFUL_HOST = XXXXXXXX

環境変数読み込み

次に作成した、.envファイルをgatsby-config.jsファイルで読み込んでいきます。

公式サイトにある通り、以下のコードを追加していきます。

require("dotenv").config()

これでprocess.env経由で.envファイルの環境変数を呼び出すことができました。

実際に呼び出している部分は以下のようになります。

resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: `gatsby-source-contentful`,
        options: {
          spaceId: process.env.CONTENTFUL_SPACE_ID,
          accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
          host: process.env.CONTENTFUL_HOST,
        }
      },
    ],
  },

これで開発環境での環境変数の設定が環境しました！

本番の環境変数はNetlifyで登録できるので、その環境変数を使っています。

以上になります。

読んでいただきありがとうございました。

参考記事

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

環境変数の代わりに .env ファイルを使用する (dotenv)