Gatsby(GraphQL/React)とWordpressでJAMstackなサイトを構築してみる
Wordpressで作成したサイトをもうちょっとお手軽にメンテできないかと思って調べたところ、Gatsbyでできそうだったので試してみました。
やり方
概要
- WordpressにGraphQLを生やす
- GatsbyでGraphQLを使ってデータを集めてビルドする
- ホスティングサービスを使ってデプロイする
- 上記を自動化する
Wordpress
Wordpressを作成します。
今回は過去に個人的に作成した、友人のバンドのサイトを題材として使わせて頂きました。
サイトの構造は以下のとおりです。
前提として、Postのカテゴリーにliveとblogがあります。
またサイドバーなどのウィジェット類については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を起動します。
今度は無事に表示できました。
今回は環境を構築することを主としているので、ページ作成はこれで完了とします。
Deployする
本記事ではNetlifyを使いました。
下記にデプロイしました。
（こちらは後で削除予定です。）
https://vibrant-lamport-4d47b2.netlify.app/
ビルドの連携
ホスティングまでできたので今度は自動化していきます。
やりたいことはWordpressが更新されるのをトリガーにしてGatsbyをビルド＆デプロイすることです。
Netlify
事前にBuildHookを設定しておき、URLを確認します。
Wordpress プラグイン
以下のプラグインを追加します。
- JAMstack Deployments: Wordpressの更新をトリガーにデプロイHookを呼び出せるようになります
導入後、設定 > Deployments画面でビルド設定をしていきます。
これで設定は完了です。
Wordpress側を更新するとNetlify上でGatsbyが再ビルドされたことがわかります。
今回はテストで テストpost というタイトルのpostを投稿しました。
（あとで削除します。）
変更がNetlify側に反映されました。
メリット
- 編集者と開発者が完全分離できる
- 編集者は今まで通りのWordpressが使える
- 開発者はWordpressを直接触らなくて良い
- React/GraphQLを使ってコーディングができる
デメリット
- まだプラグイン自体がBetaなので安定していない
- 各設定の工数はかかる
まとめ
まだ商用Production環境に投入するのは厳しいと思いますが、個人ブログ等でCMSとしてWordpressを残したいがコーディングではPHPを直接触りたくない、jsで完結させたいということであれば試してみる価値はあると思います。
また、この場を借りて協力して頂いたpure g threeには感謝をお伝えします。
Discussion