Ringo-Cafe

Contentfulで記事を公開したタイミングでNetlifyにデプロイする方法(おまけでSlackにも通知を飛ばす)

1/6/2020

# はじめに

このブログはNuxt.jsでサイトを作って、Contentfulで書いた記事を読み込んで、Netlifyにホスティングしているわけです。

記事を書くときは、Contentfulで記事を書いて、そのあとでNetlifyでデプロイします。そうしないと、ページが生成されないので、直URLを叩いたときにページが出なかったりするし、他にもいろいろ不都合が生じます。(たぶん)

ただ、毎回記事書いたあと、Netlifyにアクセスして、デプロイのページまで行ってデプロイ!を叩くのは面倒!

そこで、Contentfulで自動的にどうにかできないかなと調べたらありましたので、やり方を残しておこうと思います。

# やり方

というわけで設定方法。

## NetlifyにビルドWebhookを設定

まずはNetlifyの設定からしていきましょう。

Netlifyって基本的には、Gitのリポジトリ(のブランチ、例えばmasterブランチとか)がプッシュさたときにデプロイが自動で走るように使うのがメインですが、トリガーは他にも設定できるみたいです。その1つが、Build Hooksです。外部のWebhook APIを受けることができます。

そこで、まずはこれを設定します。

![image][1]

Setting > Build & deploy のところにある、Build Hooks に追加します。

名前は適当にわかりやすい名前を。Branch to build はmasterとか自分の設定しているものを選択します。

そうすると、URLが発行されるので、これをあとで使います。


## ContentfulにもWebhookを作る

次にContentfulにも設定をしていきましょう。

Contentfulには、送る設定をしていきます。上のメニューから、Setting > Webhooks を選び、Webhook追加していきます。

Add Webhook で追加すると自分で設定できますが、テンプレートが用意されています。右下にたくさんあるところからNetlify を選択しましょう。

![image][2]

すると入力欄(Netlify build hook URL)が出てきますので、先ほどのNetlifyで出てきたURLを追加します。
これで基本的な設定は完了です。

## フィルターを設定

Contentfulだといろいろなカテゴリーやタグを設定できますし、1つのスペースで複数のブログを管理することもできます。

そんなときに、ここまでの設定だと、全部の更新がトリガーになってしまいます。そこで、トリガーを分けるために、フィルターを設定していきます。

先ほど作ったWebhookのリストから選択すると、Webhook settings というのがあるので、そこを開きます。

![image][3]

この画像の例では、Entry(記事)とAssets(画像とか)をPublishしたときとUnpublishしたときに実行するようになっています。
また、Content Type IDは、blogPostと入ってますが、自分の設定しているものを入れましょう。

これでフィルタリングも完成です。実際にテストで記事を書いてみて、Netlifyのデプロイが動いているか、見てみましょう。


## ついでにSlackへ通知の設定も用意されてたので設定してみる。

さて、メインの話題はこれで完了なのですが、先ほどのWebhookのテンプレートにSlackも用意されていましたので、投稿したときにSlackの自分のチャンネルに投稿を通知するbotを設定していきたいと思います。

(今回は概要だけ書いておきます。詳細はまた後日にしますね。)

手順としては

1. Slack Appを作成(<https://api.slack.com/apps>)
2. AppにIncoming Webhookを追加(投稿先のチャンネル選択)
3. Webhook URLをコピー
4. ContentfulのWebhookを作成(Slackのテンプレートで)
5. Content Type IDを選択。URLには先ほどのSlackのを貼り付ける。
6. フィルターとヘッダーを設定する。
7. 完成

という流れになります。

ヘッダーだけ、ちょっとややこしいので、例を載せておきます。

```Add Header
{
 "text": "RingoCafeを更新しました: *<https://ringo-cafe.com/blog/{ /payload/fields/slug/en-US } | { /payload/fields/title/en-US } - Ringo-Cafe>*"
}
```

元の例文の、文言をちょっと変えただけですが、リンク先がデフォルトではContentfulの記事に向いてしまっていますので、ブログのURLに変えます。

ドメインの元の部分は普通に入力し、スラッグのところだけ動的に出るようにします。Contentfulのカスタムフィールドのパスがわかりにくいので、ここだけ注意が必要です。ドキュメント見てもようわからんかった。(きっと書いてあるんだと思うのですが)

今回でいうと、slugはテキストだからか、en-USを指定してあげないと `Undefined` になってしまいました。titleも同様ですね。(これは元の例文に入っているので、そのままですが。)

また、botのアイコンと名前を設定しておくとかわいくなるのでおすすめです。

# 自動的に

こんな感じで自動化をどんどん増やしていくと、どんどん楽になっていっていいですね。

仕事はどんどんロボットに任せ、楽に生きていきたいものですね!
ありがとうございました。


[1]: //images.ctfassets.net/gyhdnnh1ztbe/VMJbhtJBwd9K1QIiWM1ms/287e770fcbf251b16f8b9482ebef5672/image.png
[2]: //images.ctfassets.net/gyhdnnh1ztbe/3P9MlbkxMixdHeixebWv0u/66521e9173a625532f21f8849676e225/image.png
[3]: //images.ctfassets.net/gyhdnnh1ztbe/2XUZKbXPv9E5hdTvQQGzzj/0a3a32ea1fe11ee229ed60bce0921085/image.png

トップへ戻る