Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブgatsbyjs

2019年3月11日 By KD コメントを書く

GatsbyJSをWordPressのHeadless CMSのREST APIと連携する方法(JWT認証編)

GatsbyJSをWordPressのHeadless CMSのREST APIと連携する方法(JWT認証編)

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つのプラグインのインストールと設定が必要です。

  • JWT Authentication for WP REST API
  • WP API Menus

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の管理画面にログインして確認してみましょう。

NewImage

NewImage

大丈夫ですね。

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」を取得できるか確認します。

NewImage

{
  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ページが表示されました。

NewImage

「Test Page」のリンクをクリックすると、「http://localhost:8000/test」に遷移し、WordPressから取得したTestページが表示されました。

NewImage

OKですね。

最後に

いかがでしたか?これでGatsbyJSとWordPressのHeadless CMSのREST APIを連携させることができるようになったと思います。今回は取得まででしたが、JWT認証も設定しているので、記事の作成や更新もできます。試してみると面白いと思います。それでは。

環境

  • Docker: 18.09.2, build 6247962
  • NodeJS: v11.10.0
  • gatsby-cli: 2.4.11

カテゴリ : 技術 Tips & Tutorials タグ : gatsbyjs, headless-cms, jwt, rest-api, wordpress

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
    SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • DockerコンテナのThe PID 1 Problemとその解決策(NodeJS編)
    DockerコンテナのThe PID 1 Problemとその解決策(NodeJS編)

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes