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に移行したので、その手順とハマったポイントを解説する