Gatsby.js × WordPressでWeb開発を楽しく運営には優しく

4916 ワード
gatsby JAMstack WordPress WordPress テキストリンク

JamstackのWeb開発は楽しい！！ライブラリ・フレームワーク開発者にはいつも感謝しています。

ソースコードはローカルで完結するコンパクトさで把握しやすい。ライブリロードで作りながら確認できる。それに、なんといっても成果物のパフォーマンスが高いのがいいですね。速いは正義！

とはいえ、作ったものを使いにくいと思われてしまったら悲しい...。Jamstackを用いつつ、技術に明るくない運営の人にも気持ちよく使ってもらえたらベストではないかと。

運営に優しいバックエンドはWordPress

例えば、WordPressとか良いですね。僕も初学者のときからレンサバに簡単インストールして使ってきました。WordPressを選ぶとサイト運営側の学習コストを抑えられることが多いです。

開発側のメリットは「日本語入力に問題がない、CMSの定期的なバックアップと復旧が現実的、サーバーの場所を問わない、帯域幅制限に縛られにくい、GraphQLプラグインが優秀」など。

連携しやすいフロントエンドはGatsby.js

選ぶとすればGatsby.js。熱意ある開発者たちによってWordPressとの連携が快適になりました。必須ではありませんが、環境選定の話が都合よく進めば差分ビルドやプレビューも可能でしょう。

ビルド時以外のAPIリクエストを行わないため、WordPressサーバーが弱くても安心。メディアライブラリの画像をインクルードできるようになった点もありがたい。ReactとGraphQLを使って開発します。

WordPressで開発すること

WordPressには2つのプラグイン（WPGraphQL・WPGatsby）をインストールします。運営の人にはいつも通り投稿・固定ページ制作を行ってもらえばOKです。

※ACFやCPT UIを使っている場合は、追加プラグインが必要

WPGraphQL

WPGraphQLを有効化するとWordPress内にGraphQLサーバーが立ち上がり、管理画面でデータのプレビューできるようになります。上記スクショでは投稿データが引っ張れていますね。

WPGatsby

WPGatsbyを有効化しないと後述する設定のビルドが成功しません。GraphQLに専用の変換を施す、差分チェック、Build Hook設定など、便利な機能がまとまっています。

Gatsby.jsで開発すること

ローカル環境にNode.jsとgatsby-cliをインストールしておいて、スターターを使うと楽です。

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

Gatsby.jsのサイトが立ち上がりました。スターターの設定がデフォルトの状態だと、デモ用のWordPressからデータを取得するため、エラーも出ずに成功します。

プロジェクトのデータを取得する

データの取得先は gatsby-config.js に書かれています。直書き修正もできますが、Gatsby.jsはdotenvが入っているので、.env ファイルを作成して上書きすることもできます。

.env
WPGRAPHQL_URL="[プロジェクトWordPressのURL]/graphql"
gatsby-config.js
// dotenvの利用を上部に追加
require("dotenv").config()

Gatsby.jsのサイトを立ち上げ直すと、プロジェクトの投稿データに差し代わります。スターターは投稿一覧と投稿ページのみ用意されているので、複製して固定ページやカスタム投稿を作っていきます。

自動ビルド・デプロイ先の設定

簡単なのはNetlifyやVercelにGitHubリポジトリを紐づけてドメイン当てるとかですが、デプロイ先が決まっている場合はCircleCIなどを使ってビルド→デプロイします。

あとがき

これで、運営の人には馴染みあるWordPressでコンテンツを作ってもらいつつ、JamstackでWeb開発する基本の仕組みが整いました。成果物の爆速サイトを共に楽しみましょう！

資料