Gatsbyの持っている強みとWordPressの持っている強みをかけ合わせてのブログ構築に挑戦中。
GatsbyCloudでのWebhook設定はとてもかんたんにできたのですが、他のホスティングサービスでもできるのか、やってみました。まだまだ初学者に毛が生えたくらいなので、本当はもっとちゃんとしたやり方があるかもしれませんが、その経過を残しておきたいと思います。
Webフックとは
Webhookとは？ @soarflatさんの記事より
- アプリケーションの更新情報を他のアプリケーションへリアルタイム提供する仕組みや概念のこと。
- イベント（リポジトリにプッシュなど）発生時、指定したURLにPOSTリクエストする仕組みのこと。
要するにここでは、WordPressの投稿が更新されたことをリアルタイムでホスティングサービスに伝えて、ビルド操作を自動で行うことを言っています。NetlifyではGithubリポジトリと連動してビルドが自動で走るようになっていますが、データベース（ここではWordPress）からの更新はGithubには直接反映されないので、自動で更新されません。
ヘッドレスWordPressブログにおいては、ブログ更新するだけでは、ブログが更新されません。次のいずれかの操作が必要です。
netlify deploy --prodなにかファイル更新をして、Githubリポジトリを更新
この記事のウェブフックを設定することで、今まで通りのWordPressの更新作業だけで、本番サイトも更新されるようになるのは大きなメリットです。
前提
- Gatsby-WordPressブログの公式スターターを使って、WordPressサイトと連携したブログサイトを構築
- Netlifyにおいてデプロイしている
ウェブフック設定手順
Netlify公式の説明はこちら ー＞ Build hooks
- ウェブフックURLを取得
- 対象サイトの設定画面において
Site settings > Build & deploy > Continuous deployment > Build hooks. - ビルドフック名設定
なんでもOK。あとで見てなんのフックかわかる用意設定します。 - デフォルトでビルドするブランチを設定します
基本的にはmainブランチがおおいのでしょうか。チーム開発していたりすると、確認のために、featureとかdevlopブランチとか。チーム開発経験浅くてわからない😅 - Saveボタンをクリック
- 対象サイトの設定画面において
- 生成されたURLをWordPressブログのGatsbyJS設定のBuildHookに設定
- WordPressブログの管理画面から
設定 ー＞ GatsbyJS - BuildsWebhookのところに、取得したURLを貼り付ける
- WordPressブログの管理画面から
以上でおしまいです。
記事をなにか更新して、netlifyのdeploysタブを開いておくと、勝手にビルド処理が走るのを確認できます！
コメント