StrapiのWebhook機能をフル活用してGatsbyjsのDeployを自動化する。

こんにちは、Webエンジニアの中野です。 今回は以前からの課題であった、strapiで記事を作成した際にbuildからデプロイまで自動化を記事にします。

前回記事

• 1 GatsbyjsとStrapi を使用して静的なブログを作成する
• 2 Gatsby.jsで作ったサイトをs3にデプロイ

受信サーバーを作成

gatsbyjsのルートに移動して、nodejsで受信したらdeployを行う、webhookサーバーを作成します。

[run-gatsby-deploy.js]

var http = require("http");

http.createServer(function(req, res) {
  if(req.method === 'POST') {
    var data = ''; 
    req.on('data', function(chunk) {data += chunk})
        .on('end', function() {
            // gatsbyのビルドプログラム
            var { execSync } = require('child_process')
            var stdout = execSync('yarn build')
            console.log(`stdout: ${stdout.toString()}`)
            console.log('yarn build 完了')
            var stdout2 = execSync('yarn deploy')
            console.log(`stdout: ${stdout2.toString()}`)
        })
     }
  }).listen(12345);

strapiのwebhookの設定

StrapiDashboard > Settings > Webhooks > Create new webhook

• urlはhttp://localhost:12345にしてください
• EventsはEntryのPublishとUnpublishにチェックいれます。
• saveします
• triggerで動作確認ができます。

実際にうごかしてみる

strapiで実際に記事を投稿すれば、自動でs3にデプロイされるとこまで確認できました。

まとめ

webhook機能と、nodejsで軽くコーディングすることで、静的サイトジェネレーターの自動デプロイができました。 strapiの記事はまだまだ少ないので自分が少しでも記事を作成できたらいいなと思います。 それでは次回の記事もまたみてください。