ちょっとなにかある。
thumbnail

Netlify Build hooks + Contentful Webhookで記事公開フローを効率化する

このサイトは、Contentfulを使って記事の配信、Netlifyでウェブサイトのホスティングを行っており、記事を公開するまでのフローは次のようになっています。

  1. 記事を書く
  2. Contentfulの管理画面に入力
  3. 「Publish」ボタンを押して公開(ここまでで筆者の作業は終了)
  4. Netlifyのビルドが実行される
  5. サイトに公開される

上記のように、記事を書く場合はWordPressや通常のブログサイトと同じようなフローで記事を公開できるフローを作っています。 今回は、この4~6の、「Publishしたら勝手にNetlifyのデプロイを実行する」設定方法について触れようと思います。

概要

  • NetlifyのContinuous Deployment機能には、Build hooks用のAPIを追加することができる
  • Contentfulには、Content公開時などにWebhookを設定できる

この両者の機能を使って、前述の4~6のフローを実現しています。

設定方法

では、実際に設定していきます。(NetlifyのDeploy Settingまでの設定と、Contentfulの設定が終わってる前提です。)

NetlifyのBuild hook用のAPIの作成

まずはNetlifyのBuild hook用のAPIを作成します。
用途がわかるような名称(今回は「Webhook for Contentful」としてます)と、ビルドを実行するブランチを指定します。

1

「Save」すればAPIのURLが発行されます。

2

ContentfulのWebhookの設定

次は、 Contentfulの管理画面でWebhookの設定を行います。

管理画面メニューの「Space settings」→「Webhooks」を選択します。
次に、右下の「Webhook templates」から「Netlify」を選びます。

4

そして、先程Netlify側で設定したBuild hook用のURLを「Netlify build hook URL」に設定します。

5

最後に「Create webhook」をクリックすれば設定完了です。 以下のようなダイアログと同時に、Netlify用のWebhookが設定された画面に遷移します。

6

次に、Webhook settingsのタブへ移動し、「Triggers」の設定を修正します。 Netlify Webhook templateのデフォルト設定だと、master環境のContentのいずれかが公開・非公開になったときにNetlifyのビルドが実行されてしまいます。

今回は、blogというContentIDのものが公開・非公開にされたときのみに設定したいので、「Filters」の設定を次のように追加しておきます。

7

ここまでで設定は終わりです。

実際にblogContentで記事を書いて、公開してみましょう。

8

ContentをPublishした後、Netlifyの管理画面の「Overview」にて、次のようにビルドが走るのが確認できるかと思います。

9

[宣伝] ゼロからはじめるNetlifyについて

2018年10月8日(月)に開催される技術書典5という技術同人誌即売会イベントにて、「ザ・シメサバズ」として『ゼロからはじめるNetlify』という本を共著で執筆しています。

Netlifyは、主軸となるウェブサイトホスティング機能以外にも様々な機能があり、幅広い層のウェブエンジニアにおすすめできるサービスです。(冒頭でも書きましたが、このブログもNetlifyで運用しています。)

そんなNetlifyの豊富な機能について、サンプルや用途なども交えながら幅広く解説している本になります。

ogp

ぜひお手にとっていただけたらと思います!

以上宣伝でした。

REFERENCES