GatsbyJSで開発環境にのみページを存在させる方法

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

今回は、「Gaji-LaboのコーポレートサイトはGatsbyJSで作られています」の記事でもご紹介した、「GatsbyJSで開発環境にのみページを存在させる方法」をまとめたいと思います。

やりたかったこと

GatsbyJS でサイトの開発を行っているとき、開発時にのみ存在させておきたいページが生まれることがあります。例えばサイトの全ページへのリンクが載っているページや、HTML/CSSコンポーネント一覧のページなどです。

これは開発時にのみ必要なページのため、gatsby build で静的サイトをビルドする際には除外されている必要があります。

Gaji-Labo のコーポレートサイトでもそのようなページがあったため、ビルド時に特定のファイルをビルドから除外する方法を探しました。

GatsbyJS のプラグインで、 gatsby-plugin-exclude というビルドから特定のファイルを除外するプラグインがあったため、それを使用して開発環境にのみ特定のページを存在させるようにしました。

対応方法

gatsby-plugin-exclude の導入後、 gatsby-config.js でプラグインの設定を行います。

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-exclude',
      options: { paths: process.env.EXCLUDE_PATH.split(',') },
    },
  ]
}

gatsby-plugin-exclude のドキュメントに書かれている通り、通常 options の path には特定ディレクトリを指定しますが、今回は環境毎に除外するファイルを変えたいので、 .env ファイルを読み込んでディレクトリを指定するようにします。

gatsby-config.js の先頭に以下の記述を追加することによって、 process.env 変数が gatsby develop が実行された時には .env.development を、 gatsby serve もしくは gatsby build が実行された時には .env.production を指すようになります。

const activeEnv =
  process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development"
require("dotenv").config({
  path: `.env.${activeEnv}`,
})

.env ファイルの内容は以下のようになっています。

EXCLUDE_PATH=""

EXCLUDE_PATH="/foo/**, /sitemap/pagelist"

以上の設定を行うことによって、 gatsby develop で開発を行っている時は除外が行われず、 gatsby build でビルドが行われる時には .env.production で指定したファイルが除外されるようになります。

まとめ

今回は GatsbyJS で開発環境にのみページを存在させる方法をまとめました。 GatsbyJS を使っている方の参考にしていただけるとありがたいです。

Gaji-Laboブログ内には、他にもGatsbyJSについて取り上げた記事があります。
GatsbyJSの開発に興味がある方、GatsbyJSをどう使ったらいいかの情報が知りたい方、実践でのポイントを勉強したいと思っている方などにおすすめの記事シリーズを「GatsbyJSを実践で使ってみた」としてまとめていますので、あわせてお読みいただけるとうれしいです。