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 は Jamstack 開発の知見があります

高パフォーマンス、表示が早く、SEO についての不安も少ない Jamstack。フロントエンド開発の専門家として、技術選定からサーバーサイド開発側との調整まで対応が可能です。「Jamstack にしたいが、社内調整ができるか不安」「Jamstack 開発がわかるエンジニアがいない」などのお困りごとに対して、メリット/デメリットの判断からお手伝いできます。まずは一度お気軽に Gaji-Labo にご相談ください。

オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。

フロントエンドの相談をする!

投稿者 Ishigaki Shotaro

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。