Gatsby・Wordpress・Netlifyで開発したときの躓きと解決方法

こんにちは、株式会社カミナシのエンジニア @tomiです。

前回、「サービスサイトをGatsby×Wordpress×NetlifyでJamstackなサイトにリニューアル」という記事を書き、たくさんの反響をいただきました。ありがとうございます。

kaminashi-developer.hatenablog.jp

今回は、Gatsby・Wordpress・Netlifyで開発したときの躓きについての話で、似た構成で開発される方の役に立つと思います。

逆に、違う構成の場合は、全くためにならない内容となっていますので、ご容赦を。

開発していて躓いたところ

1. Docker上でWordpressからGraphQLでの記事の取得がエラーになる
2. WordpressをGraphQLで読み込む際プラグインのバグがある
3. Gutenbergのブロック作成に手こずった
4. GutenbergブロックのTypeScriptの型指定に困った
5. Netlifyでbuildエラー
6. Netlifyにネームサーバーを変更せずにルートドメインを繋げる

各躓きの解消方法

① Docker上のWordpressから記事の取得がエラーになる

Dockerで開発環境を整備している際、以下のようなエラーが発生した。

error  gatsby-source-wordpress  

Unable to connect to WPGraphQL. 

Received HTML as a response. Are you sure http://wordpress/graphql is the correct URL?

Wordpressへの接続エラーが発生してしまった。

原因は、WordpressのURL設定のアドレスに強制的にリダイレクトされるため

Wordpressの仕様として、サイトアドレスに設定されているURLにリダイレクトされる。

↑ 127.0.0.1:8000にアクセスするが、localhost:8000にリダイレクトされる

そのため、http://wordpress/graphqlから取得しようとするが、localhost:8000にリダイレクトされてしまう。

Gatsbyコンテナからlocalhost:8000にアクセスしてもWordressコンテナにアクセスすることはできないので、接続エラーが発生してしまった。

解決方法

http://wordpress/graphqlでアクセスできるように、docker-compose.ymlに以下の設定を追加しました。

wordpres:
  environment:
    WORDPRESS_CONFIG_EXTRA: |
      define('WP_SITEURL', 'http://' . $$_SERVER['HTTP_HOST']);
      define('WP_HOME', 'http://' . $$_SERVER['HTTP_HOST']);

この設定によって、Wordpressにアクセスした際のURLがサイトアドレスとなる。

このハックはWordpressをDockerで起動する際によく使いそうなので、覚えておくと便利そう。

② WordpressをGraphQLで読み込む際プラグインのバグがある

gatsby-source-wordpress-experienceはまだまだバグがありそうです。

gatsby-source-wordpressというのが今のメインバージョンだが、もうしばらくすると破壊的変更が来るので、多少のリスクは承知で次のバージョンであるgatsby-source-wordpress-experienceを使うことを選択しました。

今回引っかかったのは、カテゴリの小カテゴリが取得できないというバグ。（今は解決済み） https://github.com/gatsbyjs/gatsby-source-wordpress-experimental/issues/145

開発を進めていくうちに、あれ？うまく取得できない・・・みたいなことがある。

ちなみに、Gutenbergブロックの取得がデプロイするとき取得できず、たまにデプロイエラーが発生する。

発生条件は不明だが、WP管理画面から「WP GraphQL Gutenberg」プラグイン設定ページのUpdateボタンを押してからデプロイすると治る。。

③ Gutenbergのブロック作成に手こずった

Gutenbergブロックを自作しようと思っているなら、覚悟を持って取り組みましょう！

とりあえずドキュメントが少なすぎる！

必読なのは、公式のチュートリアル。
https://ja.wordpress.org/team/handbook/block-editor/tutorials/create-block/

これでGutenbergブロックを作るプラグインを作成する流れを掴むことができます。

次にブロックの設定周りはこちらのドキュメントを何度も見ました。 https://ja.wordpress.org/team/handbook/block-editor/developers/richtext/

ただし

• リスト形式のブロックを作りたいだとか、
• 投稿タイプのテンプレートにブロックを配置しておきたいとか、

基本的な部分はドキュメントに掲載されているが、実装されているすべての機能のドキュメントが見当たらなかった。

なので、やりたいことが実現できそうなコンポーネントを、こちらのメニューの一覧から探す。
https://developer.wordpress.org/block-editor/components/

目的のコンポーネントぽいな〜と思っても、このドキュメントには詳細は書かれていないので、コンポーネントのリポジトリを読み漁る！ https://github.com/WordPress/gutenberg/tree/master/packages/components/src

ひたすらトライ＆エラーを繰り返して感覚を掴むしかありません！ 経験あるのみ！

④ GutenbergブロックのTypeScriptの型指定に困った

WordpressからGraphQLで取得したデータもgatsby-plugin-typegenで型は自動生成できてとても便利だが、特定のブロックにだけあるプロパティを使うときの型指定が複雑になってしまった。

以下の画像のようにblocksの中に多数のブロックの型が含まれている。

セミナーの開催日時をGutenbergブロックから抽出しようとすると、日付のプロパティはSeminarGuidelineDateBlockTypeというブロックの型にしか含まれていないので、blocksの数ある中から型を指定しなければならなかった。

その型定義のために、コードが複雑になってしまった。

↓ SeminarGuidelineDateBlockTypeを指定するためだけに書いたコード

⑤ Netlifyでbuildエラー

4:26:04 PM: error There was an error in your GraphQL query:
4:26:04 PM: Unknown type "WpSeminarGuidelinesBlock". Did you mean "WpSeminarFlowBlock", "WpSeminarFieldsEnum", "WpSeminarFilterInput", "WpSeminarConnection", or "WpSeminarGroupConnection"?

上記画像のようにビルドするとエラーがでることがありました。

エラー内容から察するに、自作ブロックがGraphQLで見つけられないようです

コードは以下のように、blocksから自作ブロックを取得しているところが原因でした。

export const wpSeminarEdgeFields = graphql`
  fragment WpSeminarEdgeFields on WpSeminarEdge {
    node {
      blocks {
        name
        ... on WpSeminarGuidelinesBlock {
          innerBlocks {
            name
            ... on WpSeminarGuidelineBlock {
              attributes {
                content
                label
              }
              innerBlocks {
                name
                saveContent
                ... on WpSeminarGuidelineDateBlock {
                  attributes {
                    endAt
                    startAt
                  }
                }
              }
            }
          }
        }
      }
      featuredImage {
        node {
          localFile {
            childImageSharp {
              fixed(width: 1200, height: 628, cropFocus: CENTER) {
                ...GatsbyImageSharpFixed
              }
            }
          }
        }
      }
      id
      slug
      title
    }
  }
`

解決方法

gatsby-node.jsで生成するページを公開記事だけに絞り込むことで、解決できました。

  const createSeminar = async () => {

    // ...

    const result = await graphql(`{
      seminar: allWpSeminar(filter: { status: { eq: "publish" } }) {  // <--ここ
        pageInfo {
          totalCount
        }
        edges {
          node {
            slug
          }
        }
      }
    }`)

   // ...

    seminars.forEach((edge, i) => {
      createPage({
        path: `/seminar/${decodeURIComponent(edge.node.slug)}/`,
        component: showTemplate,
        context: {
          slug: edge.node.slug,
        },
      })
    })
  }

⑥ Netlifyにネームサーバーを変更せずにルートドメインを繋げる

Netlifyにカスタムドメインを設定する方法は、Netlify DNSを利用するか、外部DNSの設定を編集する、２パターンがあります。

今回は、外部DNSでかつルートドメイン（kaminashi.jp）をNetlifyに繋げました。

ドキュメントを見ると、CNAME, ANAME, ALIASで繋げる方法が載っているのですが、使ってるDNSサーバーがルートドメインに対してCNAME等が使えずに少しハマりました。

結局ドキュメントに目をしっかり通しておらず、Aレコードでの設定についても書いてあるのを見落としていただけでした。。。

Point the record to Netlify's load balancer IP address: 104.198.14.52.

まとめ

以上、Gatsby・Wordpress・Netlifyで開発したときに実際に躓いたところ、困ったところでした。

gatsby-source-wordpress-experimentalã‚‚wp-graphqlã‚‚Gutenbergもまだ成熟していないので、不安定なところが多いです。

しかし、SSGのGatsby、比較的新しいAPI企画のGraphQL、Wordpressの新しいエディタGutenbergと新しいことだらけでチャレンジしがいのあるの技術でした。

振り返ってみると、この投稿の前日に公開された、カミナシが掲げている3つのバリューのひとつである「β版マインド」を実行していたなと。
今後もトライ＆エラーを繰り返しながら愚直に成長していきます。

カミナシのミッション・バリューが気になった方はこちら

corp.kaminashi.jp