【nuxt.js】WordPressで記事を更新したときにフックしてNetlifyに自動デプロイする方法
僕のこのブログはwordpressで記事を作成し、nuxt.jsでwp rest apiからデータを取得してNetlifyにデプロイしています。
Netlifyはgithubやbitbucketにプッシュしたときにビルドもしくは手動ビルドすることが出来ます。 ただそれでは
- 記事作成
- nuxt generate
という手順を毎回しなければいけないのでこの記事ではwordpressで記事を更新したタイミングで自動デプロイする方法をご紹介します。
目次
WordPressで記事を更新したときにフックしてNetlifyに自動デプロイする方法
以下のような手順で設定していきます。
- Netlify側でビルドコマンドを設定
- Netlify側でビルドフックを設定
- WordPressに「JAMstack Deployments」プラグインをインストール
Netlify側でビルドコマンドを設定
Settings > Deployments > Build & deployに進みます。
Build settingsのEdit settingsをクリックで情報入力画面に進みます。
Build commandをnuxt generate（nuxtの静的ファイル生成ビルドコマンドです）、
Publish directoryをdist（公開するディレクトリです）
と設定。
Saveをクリックしてビルド設定は終わりです。
Netlify側でビルドフックを設定
先程のビルド設定と同じくSettings > Deployments > Build & deployに進みます。
Build hooksのAdd build hookをクリックで情報入力画面に進みます。
Build hook nameをauto_build（これはただの名前なのでなんでもOKです）、
Branch to buildをmaster（ビルドするブランチです）
と設定しSaveをクリック。
そして発行されたapiのURLをコピーしてフック設定は終わりです。
WordPressに「JAMstack Deployments」プラグインをインストール
JAMstack Deploymentsはとは、記事や固定ページを更新したときにNetlifyで設定したビルドコマンドを実行できるプラグインです。
インストールしたら有効化！
有効化すると、設定 > Deploymentsから設定画面に進めます。
Webhook URL
ここに先程コピーしたビルドフックのURLをペーストします。
Webhook Method
ここはPOSTを設定。
Post Types、Taxonomies
これはどの内容が更新または削除されたときにフックするかを選択します
ここはWordPressの設定によるので各自必要な項目にチェックを入れて下さい
これで設定は終わりです！
お疲れ様でした！
以上で設定は終わりなので記事を更新して自動で公開されているか確認してみて下さい。
最後に
今回の「JAMstack Deployments」のプラグインの作者には感謝しかありません！