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

ishigaki

こんにちは、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を実践で使ってみた」としてまとめていますので、あわせてお読みいただけるとうれしいです。

Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています

Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。

現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい!

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!


ishigaki

投稿者 石垣 祥太郎

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