WordPress をヘッドレスとして使い、Gatsby でフロントを作る( Gatsby Source WordPress v4 )

gatsby-source-wordpress-experimental として、WordPress を Gatsby で使えるようにするプロジェクトが実験的に行われていましたが、いつの間にか Gatsby Source WordPress v4 が公開されていたので、早速試してみました。

Gatsby は React の静的サイトジェネレータを簡単に行えるもので、データの取得に GraphQL を使うなど少し特殊です。

今回はこの Gatsby Source WordPress v4 を使って、

フロント … Gatsby
API … WordPress

の構成で作っていきます。WordPress は今流行り？のヘッドレス CMS として使う感じですね。

準備

基本的には冒頭で貼ったリンク先の説明を元にして進みます。

データのダウンロード

gatsby new my-wordpress-gatsby-site https://github.com/gatsbyjs/gatsby-starter-wordpress-blog

必要なデータをダウンロードします。my-wordpress-gatsby-siteは自分のプロジェクト名に変えておいてください。

gatsby cli が無くコマンドが実行できない方は、いずれかで入れておきます。

npm install --global gatsby-cli

or

yarn global add gatsby-cli

WordPress の用意

ここでは端折りますが、Local by Flywheel や、Docker などで WordPress のローカル環境を整えておきましょう。

そこで立ち上げたローカルの WordPress に下記2つのプラグインを追加しておきます。

WPGraphQL … WordPress で GraphQL を使えるようにする
WPGatsby … Gatsby で使うために使用する

有効化すると /graphql にアクセスした時、graphql のエラーメッセージが表示されるはずです。

{"errors":[{"message":"GraphQL Request must include at least one of those two parameters: \"query\" or \"queryId\"","extensions":{"category":"request"}}],"extensions":{"debug":[{"type":"DEBUG_LOGS_INACTIVE","message":"GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."}]}}

Gatsby の設定

環境変数の設定

API 側の WordPress の URL を設定ファイルに記述します。ですが、本番環境と開発環境で URL が変わると思うので、事前に環境変数に設定しておきます。

開発環境（development）

開発環境で使う環境変数は、.env.developmentに定義します。

プロジェクトルートディレクトリに.env.developmentファイルを作成し、URL を書いておきます。変数名はわかればなんでも良いですが、今回は下記の名前にしておくと楽です。

WPGRAPHQL_URL=http://localhost:8080/graphql

今回自分の環境は localhost:8080 なのでこんな感じ。

本番環境は.env.productionに同じように定義しますが、さらに詳しくは公式リファレンスを参照してください。

コンフィグ（gatsby-config.js）の修正

環境変数を読み込めるようにする

先ほどのファイルから環境変数を読み込むため、ファイルの上部に記述します。

gatsby-config.js に追記

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

そして少し下に進むと、先ほど設定しておいた環境変数WPGRAPHQL_URLがすでに定義されているのが分かります。

      resolve: `gatsby-source-wordpress`,
      options: {
        // the only required plugin option for WordPress is the GraphQL url.
        url:
          process.env.WPGRAPHQL_URL ||
          `https://wpgatsbydemo.wpengine.com/graphql`,
      },

process.env.WPGRAPHQL_URLが falsy の場合、https://wpgatsbydemo.wpengine.com/graphqのテストサイトのデータを取得するようですが、消しておいてもいいでしょう。

起動

なんと！設定はこれで終わりです。早速起動してみます。

gatsby develop

http://localhost:8000 を見てみると…

見事表示されました！

さいごに

WordPress は重い、セキュリティが心配という声もありますが、フロント側を React や Vue で作ってしまえばその辺りは改善できます。

個人的に WordPress の管理画面、というか Gutenberg はとても使いやすくて好きなので、今後は WordPress をヘッドレス CMS のような扱いにして、フロント側は好きなもので構築するのが良いなと思いました。

また Gutenberg は React で作られていることもあり、今後は React との親和性が高まっていくのかなーと思ってます。

その中で React の静的サイトジェネレータである Gatsby は良い選択肢ではないでしょうか？とても簡単なので、ぜひ試してみてください！

またこのブログもいずれこちら側に移行しようと思っているので、随時まとめていきます。