HeadlessCMS(WordPress)とGatsby.jsで制作したサイトをNetlifyで公開する手順

Gatsby.jsで制作したサイトを静的Webホスティングサービスの「Netlify」で公開する手順をまとめました。

※Headless CMS(WordPress)とGatsby.jsでサイト制作するの備忘録については別の記事としてまとめています。「Headless CMS(WordPress)とGatsby.jsでサイト制作する際の備忘録」

localのWordPressのdataをhostingされたWordPressに移行

WordPressのプラグイン「All-in-One WP Migration」を使用

• localではexport機能でファイルをダウンロード
• hostingされたWordPressでそのファイルをimport

※ファイルサイズを拡大させるには.httaccess、wp-config.phpを編集

デプロイ準備

• netlifyのアカウント作成
• Production branchをmasterにする
• GithubのRepositoryを指定(Gitlab、Bitbucketも可)
• Build commandを設定(例: gatsby build)
• Publish directoryを指定(例: public/)

環境変数を設定

• netlifyのEnvironment variablesでhostingされているWordPressのAPI_PROTOCOLとAPI_URLを指定
• .envファイルにlocal環境のAPI_PROTOCOLとAPI_URLを指定
• gatsby-config.jsで下記設定

gatsby-config.js

require("dotenv").config({
  path: '.env',
});
{
  resolve: "gatsby-source-wordpress",
  options: {
    baseUrl: process.env.API_URL,
    protocol: process.env.API_PROTOCOL,
  }
}

publicのルートに_headersファイルと_redirectsファイルを自動的に生成

• npmのpackagegatsby-plugin-netlifyをinstall
• gatby-config.jsのpluginに追加

WordPressの投稿保存をトリガーにbuild

functions.php

add_action('save_post', 'netlify_build');

function netlify_build() {
	wp_remote_post({netlifyのsetting/Build hooksに設定したURL});
}

ハマったポイント

以上の手順でbuildするとsuccessするが、deployすると下記のエラーが起こる

Path: /wp-json
The server response was "403 Forbidden"
error "gatsby-source-wordpress" threw an error while running the sourceNodes lifecycle:
Cannot read property 'data' of undefined

TypeError: Cannot read property 'data' of undefined

これはWordPressを置いてるサーバーがレンタルサーバーの「エックスサーバー」だから起こるエラーで、海外IPからのwp-jsonへのアクセスを許可してないためでした。
そのため国外IPアドレスからのアクセスを許可する必要があります。
サーバーについて ＞ WordPressセキュリティ設定 ＞ 国外IPアクセス制限設定

参考サイト
ブログをWordpressからGatsbyに移行したので、その手順とハマったポイントを解説する