Gatsbyで管理しているブログをJAMStack構成に。

yyy

WordpressをヘッドレスCMSとして使用し、Gatsbyで投稿データをgraphqlで取得し、静的サイトを生成する構成へ

yyy

作業の流れ

WordpressをAWSに配置(lightsail使う)
Wordpress側諸々設定
gatsby-source-wordpressを導入
コンテンツ移行し表示などGatsby側で調整

yyy

WordpressをAWSに配置(lightsail使う)

基本的にlightsail公式に書いてあるとおりに実行

Route53にLightsailの静的IPアドレスをAレコードとして作成。
参考: https://qiita.com/tomokei5634/items/a5dfb8504989ed93c31b

作成したURLにアクセスすることで、Lightsailのデフォルトの画面が表示されることを確認
※ 今回はもともとドメインは取得済みであったが未済の場合はもちろん取得する必要がある。

yyy

Wordpress側諸々設定

以下を参照。

基本的にWPGatsuby・WPGraphQLをインストールするだけ。

yyy

gatsby-source-wordpressを導入

gatsbyのレポジトリにてgatsby-source-wordpressをインストールして設定ファイル更新し、gatsby developしたところ、以下エラー。

    gatsby-source-wordpress  Your remote version of WPGatsby is not within the accepted range
    (>=0.9.0 <2.0.0)
    
    This is not a bug and it means one of two things:
     you either need to upgrade WPGatsby or gatsby-source-wordpress.
    
    1. If the version of WPGatsby in your WordPress instance is higher than 2.0.0
    it means you need to upgrade your version of gatsby-source-wordpress.
    
    2. If the version of WPGatsby in your WordPress instance is lower than 0.9.0
    it means you need to upgrade your version of WPGatsby.
    
    Download a matching version at https://github.com/gatsbyjs/wp-gatsby/releases
    or update via http://test-fss.famitra.jp/wp-admin/plugins.php

gatsby-source-wordpressの最新バージョンは6.7.0だが今のpackage.jsonだと4.0.8が限界のよう。
4.0.8だとWPGatsby側のバージョンが2.0.0未満である必要がある。本来、Gatsby側をUpdateすべきだが他への影響を考え今回は一旦WP側をダウングレードすることに。