🐙

Gatsby(GraphQL/React)とWordpressでJAMstackなサイトを構築してみる

2020/11/03に公開

Wordpressで作成したサイトをもうちょっとお手軽にメンテできないかと思って調べたところ、Gatsbyでできそうだったので試してみました。

やり方

概要

  • WordpressにGraphQLを生やす
  • GatsbyでGraphQLを使ってデータを集めてビルドする
  • ホスティングサービスを使ってデプロイする
  • 上記を自動化する

Wordpress

Wordpressを作成します。
今回は過去に個人的に作成した、友人のバンドのサイトを題材として使わせて頂きました。

pure g three

puregthree.com

サイトの構造は以下のとおりです。

前提として、Postのカテゴリーにliveblogがあります。

またサイドバーなどのウィジェット類についてはGatsby移行対象外とします。

  • top: 固定ページ
  • member: 固定ページ
  • live: カテゴリページ
    • 個別記事
  • blog: カテゴリページ
    • 個別記事
  • voice: 固定ページ

Wordpress プラグイン

Wordpressに以下を追加します

  • WP Gatsby: WordpressのGraphQLをGatsby向けに最適化してくれるプラグインです
  • WP GraphQL: WordpressにGraphQLが生えます

この時点で{Wordpress-site}/graphqlにアクセスできるようになっているはずです。

https://puregthree.com/graphql

Gatsby作成

Gatsbyの雛形を作成します

$ gatsby new {任意の名前} https://github.com/TylerBarnes/using-gatsby-source-wordpress-experimental

こちらではプラグインとしてgatsby-source-wordpress@v4 BETAを使用しているので状況によっては動作しない可能性があります。
※ 2020/10/28時点での正常動作を確認しています。

gatsby-config.jsの下記を変更します。

require("dotenv").config({
  path: `.env.GATSBY_CONCURRENT_DOWNLOAD`,
})

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

module.exports = {
  plugins: [
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/assets/images`,
      },
    },
    {
      resolve: `gatsby-source-wordpress-experimental`,
      options: {
        url:
          process.env.WPGRAPHQL_URL ||
          `https://puregthree.com/graphql`,   // <--- ここをWordpress側のGraphQLのURLに設定する
        verbose: true,
        develop: {
          hardCacheMediaFiles: true,
        },
        debug: {
          graphql: {
            writeQueriesToDisk: true,
          },
        },
        type: {
          Post: {
            limit:
              process.env.NODE_ENV === `development`
                ? // Lets just pull 50 posts in development to make it easy on ourselves.
                  500  // <--- デフォルトだと50ページまでしか取得しないので状況によって増やしたりする
                : // and we don't actually need more than 5000 in production for this particular site
                  5000,
          },
        },
        useACF: true,
      },
    },
    `gatsby-plugin-chakra-ui`,
    `gatsby-transformer-sharp`,
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /\.inline\.svg$/, // See below to configure properly
        },
      },
    },
    `gatsby-plugin-netlify-cache`,
  ],
}

これでWordpressからデータを取得できるようになります。

ローカルでGatsbyを立ち上げてみます。

$ yarn develop

立ち上がりました。

がliveとblogが404になります。
カテゴリページが取得できてないからですね。

Gatsbyページ追加

カテゴリページを作成します。

pages配下にblog.js, live.jsを新規作成します。

WPのデータからcategoryで絞り込んだpostのid,url,titleの一覧を取得しています。

import React from 'react'
import { Heading, Box } from '@chakra-ui/core';
import Layout from '../../components/layout';

export default ({data}) => (
  <Layout>
    <Box>
      <Heading as="h1" size="xl">Live List</Heading>
      <ul>
        {data.allWpPost.edges.map( (edge) => (
          <li key={edge.node.id}>
            <a href={edge.node.uri}>
              {edge.node.title}
            </a>
          </li>
        ))}
      </ul>
    </Box>
  </Layout>
)

export const query = graphql`
  {
    # live / blog でフィルターをかける
    allWpPost(filter: {categories: {nodes: {elemMatch: {slug: {eq: "live"}}}}}, sort: {order: DESC, fields: date}) {
      edges {
        node {
          id
          uri
          title
        }
      }
    }
  }
`

再度Gatsbyを起動します。

今度は無事に表示できました。

localhost 8000

今回は環境を構築することを主としているので、ページ作成はこれで完了とします。

Deployする

本記事ではNetlifyを使いました。

下記にデプロイしました。
(こちらは後で削除予定です。)

https://vibrant-lamport-4d47b2.netlify.app/

ビルドの連携

ホスティングまでできたので今度は自動化していきます。

やりたいことはWordpressが更新されるのをトリガーにしてGatsbyをビルド&デプロイすることです。

Netlify

事前にBuildHookを設定しておき、URLを確認します。

Wordpress プラグイン

以下のプラグインを追加します。

  • JAMstack Deployments: Wordpressの更新をトリガーにデプロイHookを呼び出せるようになります

導入後、設定 > Deployments画面でビルド設定をしていきます。

これで設定は完了です。

Wordpress側を更新するとNetlify上でGatsbyが再ビルドされたことがわかります。

今回はテストで テストpost というタイトルのpostを投稿しました。
(あとで削除します。)

スクリーンショット 2020-10-28 15.57.08

スクリーンショット 2020-10-28 15.54.40

変更がNetlify側に反映されました。

スクリーンショット 2020-10-28 15.59.18

メリット

  • 編集者と開発者が完全分離できる
  • 編集者は今まで通りのWordpressが使える
  • 開発者はWordpressを直接触らなくて良い
  • React/GraphQLを使ってコーディングができる

デメリット

  • まだプラグイン自体がBetaなので安定していない
  • 各設定の工数はかかる

まとめ

まだ商用Production環境に投入するのは厳しいと思いますが、個人ブログ等でCMSとしてWordpressを残したいがコーディングではPHPを直接触りたくない、jsで完結させたいということであれば試してみる価値はあると思います。

また、この場を借りて協力して頂いたpure g threeには感謝をお伝えします。

Discussion