React製の静的サイトジェネレーターであるGatsbyJSと、Headless CMSとして機能するWordPressのREST APIを連携させて、バックエンドはWordPressで管理しつつ、フロントエンドをGatsbyJSで簡単に構築する方法を紹介します。
はじめに
最近注目を集めているReact製の静的サイトジェネレーターであるGatsbyJSと、デフォルトでHeadless CMSとして機能させることができるWordPressのREST APIを連携させることで、WordPressの管理画面の使い勝手を維持したまま、フロントエンドをモダンに書き換えることが可能です。CMSを構築する上で今最も暑い組み合わせです。さらに、今回はJWT認証の設定までさらっと完成させます。
それでは、GatsbyJSとWordPress REST APIを連携させて動かしてみましょう。
GatsbyJSとは？
GatsbyJSとは、ReactとGraphQLを前提とした静的サイトジェネレーターです。静的サイトなので、ページの表示の際にGraphQLで必要な情報を1回取得し、静的ページを生成して表示する仕組みです。開発はReactで行うことになります。
前提
以下の準備が完了している必要があります。
- Dockerがインストールされていること
- NodeJSがインストールされていること
- WordPressのREST APIでJWT認証設定が完了している開発環境が構築済みであること(この環境がない人は以前の記事「WordPressのHeadless CMSのREST APIを使う開発環境をDocker上に構築する方法(JWT認証編)」を参照してください。)
詳しくは「環境」を参照してください。
WordPress REST APIとテストデータの準備
それでは、GatsbyJSとWordPress REST APIを連携していきましょう。
WordPressのREST APIを起動する
まずは、WordPress REST APIを起動します。WordPress REST APIの開発環境は以前の記事「WordPressのHeadless CMSのREST APIを使う開発環境をDocker上に構築する方法(JWT認証編)」から持ってきて使います。
$ cd wordpress-headless-cms
$ docker-compose up --build -d
$ docker-compose ps
Name Command State Ports
---------------------------------------------------------------------------------
db docker-entrypoint.sh --def ... Up 0.0.0.0:3306->3306/tcp, 33060/tcp
web docker-php-entrypoint apac ... Up 80/tcp, 0.0.0.0:8080->8080/tcp
以前の記事のWordPressの設定がすべて完了している前提で進めますが、一応補足しておくと、以下の2つのプラグインのインストールと設定が必要です。
WordPressにテストデータを入れる
今回用の固定ページおよびヘッダーメニューのテストデータを準備します。
$ docker exec web wp post delete $(docker exec web wp post list --post_type=page,post --format=ids)
$ docker exec web wp post create --post_type=page --post_title="Welcome Page" --post_content="Welcome to GatsbyJS page with WordPress;)" --post_name=welcom --post_status=publish
$ docker exec web wp post create --post_type=page --post_title="Test Page" --post_content="Let's getting started with GatsbyJS and WordPress Headless CMS\!" --post_name=test --post_status=publish
$ curl http://localhost:8080/wp-json/wp/v2/pages | jq
[
{
"id": 9,
...
"slug": "test",
"status": "publish",
"type": "page",
"link": "http://localhost:8080/test/",
"title": {
"rendered": "Test Page"
},
"content": {
"rendered": "Let’s getting started with GatsbyJS and WordPress Headless CMS\!
\n",
"protected": false
},
...
}
},
{
"id": 8,
...
"slug": "welcome",
"status": "publish",
"type": "page",
"link": "http://localhost:8080/welcome/",
"title": {
"rendered": "Welcome Page"
},
"content": {
"rendered": "Welcome to GatsbyJS page with WordPress;)
\n",
"protected": false
},
...
}
}
]
$ docker exec web wp menu delete $(docker exec web wp menu list --format=ids)
$ docker exec web wp menu create "Header menu"
$ curl http://localhost:8080/wp-json/wp-api-menus/v2/menus | jq
[
{
"term_id": 2,
"name": "Header menu",
"slug": "header-menu",
...
"meta": {
"links": {
"collection": "http://localhost:8080/wp-json/wp-api-menus/v2/menus/",
"self": "http://localhost:8080/wp-json/wp-api-menus/v2/menus/2"
}
}
}
]
$ docker exec web wp menu item add-post header-menu 8 --title="Welcome"
$ docker exec web wp menu item add-post header-menu 9 --title="Test Page"
WordPressの管理画面にログインして確認してみましょう。
大丈夫ですね。
GatsbyJSとWordPress REST APIの連携
GatsbyJSプロジェクトを作成する
GatsbyJSのプロジェクトを生成し、必要なプラグインをインストールします。
$ npm install -g gatsby-cli
$ gatsby new frontend
$ cd frontend/
$ npm install --save gatsby-source-wordpress slash dotenv
$ rm yarn.lock
$ rm src/pages/index.js
$ rm src/pages/page-2.js
$ mkdir -p src/templates
$ touch src/templates/page.js
$ touch .env
$ tree -a -I 'node_modules|.cache|public'
.
├── .env
├── .gitignore
├── LICENSE
├── README.md
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── package-lock.json
├── package.json
└── src
├── components
│ ├── header.js
│ ├── image.js
│ ├── layout.css
│ ├── layout.js
│ └── seo.js
├── images
│ ├── gatsby-astronaut.png
│ └── gatsby-icon.png
├── pages
│ └── 404.js
└── templates
└── page.js
GatsbyJSとWordPressを連携するために「gatsby-source-wordpress」というプラグインをインストールしています。
GatsbyJSにWordPress連携の設定を追加する
GatsbyJSにWordPress連携の設定を追加しましょう。
.env
API_PROTOCOL=http
API_URL=localhost:8080
JWT_USER=wordpress
JWT_PASSWORD=wordpress
gatsby-config.js
require('dotenv').config();
module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `@gatsbyjs`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`,
},
},
/*
* Gatsby's data processing layer begins with “source”
* plugins. Here the site sources its data from WordPress.
*/
{
resolve: 'gatsby-source-wordpress',
options: {
baseUrl: process.env.API_URL,
protocol: process.env.API_PROTOCOL,
hostingWPCOM: false,
useACF: false,
acfOptionPageIds: [],
auth: {
jwt_user: process.env.JWT_USER,
jwt_pass: process.env.JWT_PASSWORD,
jwt_base_path: '/jwt-auth/v1/token',
},
verboseOutput: false,
perPage: 100,
concurrentRequests: 10,
includedRoutes: [
'**/*/*/categories',
'**/*/*/posts',
'**/*/*/pages',
'**/*/*/media',
'**/*/*/tags',
'**/*/*/taxonomies',
'**/*/*/users',
'**/*/*/menus',
],
excludedRoutes: [],
normalizer({ entities }) {
return entities;
},
},
},
],
};
GatsbyJSのGraphiQL画面でWordPress連携を確認する
GatsbyJSを起動します。
$ gatsby develop
ブラウザで「http://localhost:8000/___graphql」にアクセスし、GraphQLでWordPressのページ情報「allWordpressPage」とヘッダーメニュー情報「allWordpressWpApiMenusMenusItems」を取得できるか確認します。
{
pages: allWordpressPage {
edges {
node {
id
link
status
template
title
content
slug
}
}
}
headerMenuItems: allWordpressWpApiMenusMenusItems(filter: {slug: {eq: "header-menu"}}) {
edges {
node {
name
slug
items {
title
object_slug
}
}
}
}
}
GatsbyJSとWordPressとの連携が確認できました。
GatsbyJSの画面を少し作る
WordPressから取得したデータを表示させるだけの簡単なフロントエンドをGatsbyJSで作ります。
gatsby-node.js
const path = require('path');
const slash = require('slash');
exports.createPages = async ({ graphql, actions }) => {
const { createPage, createRedirect } = actions;
createRedirect({
fromPath: '/',
toPath: '/welcome',
redirectInBrowser: true,
isPermanent: true,
});
const result = await graphql(`
{
allWordpressPage {
edges {
node {
id
link
status
template
title
content
slug
}
}
}
}
`);
if (result.errors) {
throw new Error(result.errors);
}
const { allWordpressPage } = result.data;
const pageTemplate = path.resolve(`./src/templates/page.js`);
allWordpressPage.edges.forEach(edge => {
createPage({
path: `/${edge.node.slug}/`,
component: slash(pageTemplate),
context: edge.node,
});
});
};
page.js
import React from 'react';
import Layout from '../components/layout';
import SEO from '../components/seo';
export default ({ pageContext }) => (
<Layout>
<SEO title={pageContext.title} />
<h1 dangerouslySetInnerHTML={{ __html: pageContext.title }} />
<div dangerouslySetInnerHTML={{ __html: pageContext.content }} />
</Layout>
);
header.js
import React from 'react';
import { graphql, StaticQuery, Link } from 'gatsby';
const Header = ({ siteTitle }) => (
<StaticQuery
query={graphql`
{
allWordpressWpApiMenusMenusItems(
filter: { slug: { eq: "header-menu" } }
) {
edges {
node {
name
slug
items {
title
object_slug
}
}
}
}
}
`}
render={props => (
<header
style={{
background: `rebeccapurple`,
marginBottom: `1.45rem`,
}}
>
<div
style={{
margin: `0 auto`,
maxWidth: 960,
padding: `1.45rem 1.0875rem`,
}}
>
<h1 style={{ margin: 0 }}>
<Link
to="/"
style={{
color: `white`,
textDecoration: `none`,
}}
>
{siteTitle}
</Link>
</h1>
<div style={{ marginTop: `10px` }}>
{props.allWordpressWpApiMenusMenusItems.edges[0].node.items.map(
item => (
<Link
style={{
color: `white`,
padding: `10px`,
}}
to={item.object_slug}
key={item.title}
>
{item.title}
</Link>
),
)}
</div>
</div>
</header>
)}
/>
);
export default Header;
簡単ですが完成です。
動作確認
最後にGatsbyJSを起動してWordPressから取得した情報が表示されることを確認しましょう。
まずはGatsbyJSを起動します。
$ gatsby develop
ブラウザで「http://localhost:8000/」にアクセスすると、「http://localhost:8000/welcome」にリダイレクトされ、WordPressから取得したWelcomeページが表示されました。
「Test Page」のリンクをクリックすると、「http://localhost:8000/test」に遷移し、WordPressから取得したTestページが表示されました。
OKですね。
最後に
いかがでしたか？これでGatsbyJSとWordPressのHeadless CMSのREST APIを連携させることができるようになったと思います。今回は取得まででしたが、JWT認証も設定しているので、記事の作成や更新もできます。試してみると面白いと思います。それでは。
環境
- Docker: 18.09.2, build 6247962
- NodeJS: v11.10.0
- gatsby-cli: 2.4.11
