<p>こんにちは、Shunです。<br>今回は、ポートフォリオ兼ブログのリニューアルと同時に、サイトをNext.jsに置き換えたのでmicroCMSのコンテンツが更新された時、<br>Webhookを使ってVercel上のNext.jsアプリを再ビルドするようにしていきます。<br><br></p><h2 id="he2485005d0">目的</h2><p>今回、Next.jsに置き換えた際にSSG (Static Site Generate) という機能を使って、一覧ペーと記事ページはビルド時にmicroCMSからデータを取得し静的ファイルを生成します。<br>なので、何もせずに公開すると、build完了後にmicroCMSに記事を追加しても追加した分は表示されません。<br>なのでmicroCMSのWebhookとVercelのDeploy Hooksを使用して記事が更新または公開された場合、再ビルドさせようと思います。<br><br><br></p><h2 id="h5f4b56fab5">システム構成図</h2><p>設定完了後のシステム構成図は以下のようになります。<br><img src="https://images.microcms-assets.io/assets/d7c007812cf04b69916cb180b6b27fb8/e59bd046e1674577a0a5b4d4cd806bae/webhook_blog_diagram.jpg" alt=""><br><br><br></p><h2 id="h3ed6eb92d4">Webhookとは</h2><p>今回は深くはWebhookについては、解説しませんが簡潔に言えば <strong>アプリケーションからほかのアプリケーションに対してリアルタイムに情報提供する仕組み </strong>のことを言います。<br>Webhookについてもっと知りたい方は、「Webhookとは」で検索 🔍<br><br></p><h2 id="h065a574f0d">Vercel</h2><p>microCMSのWebhookを設定する前に、VercelからHooks用のURLを発行する必要がありますので、Vercelの方から説明していきたいと思います。<br></p><h3 id="hc4d8220e68">Deploy Hooks</h3><p>まず、自身のアカウントのダッシュボードからデプロイしたアプリを選択します。<br>アプリ設定から、Git設定ページに移動し下の方にスクロールしていくと<br>画像のような画面が見れると思います。<br><br><img src="https://images.microcms-assets.io/assets/d7c007812cf04b69916cb180b6b27fb8/3ffe2216c22e4678bffd8a4f5f11ed26/webhook_blog_vercel.png" alt=""><br><br>URLを発行するためには、入力する必要がある欄が二つあり、私の場合は、左に <strong>microcms</strong>  右に <strong>main </strong>と入力しています。<br>入力が完了したら、Create Hookボタンをクリックします。<br><br><br>URLの発行が完了すると↓の画像のようにapi.vercel.comから始まるURLが発行されていると思います。<br>このURLを、microCMSのWebhook設定時に必要なのでコピーしておきましょう！！<br><img src="https://images.microcms-assets.io/assets/d7c007812cf04b69916cb180b6b27fb8/05b7e546c1794fecb5c9538478e10134/vercel_webhook_success.png" alt=""><br><br></p><h2 id="hae6947d5ce">microCMS</h2><p>VercelからHooks用のURLを発行することができたので、microCMSの設定をしていきたいと思います。<br>まず、Webhookを設定するページまでの説明をしていきます。<br><br><img src="https://images.microcms-assets.io/assets/d7c007812cf04b69916cb180b6b27fb8/b426fc9813f94860b83e4583e5344c78/microcms_content_dashboard.png" alt=""><br>ご自身のコンテンツ (API)を開くと右上に、API設定というタブがあると思います。<br>そちらをクリックしてください。<br><br><br><img src="https://images.microcms-assets.io/assets/d7c007812cf04b69916cb180b6b27fb8/a6af0c83bcda44e3a54f23560a82b0ff/api_setting_page.png" alt=""><br>そうすると↑の、ページに移動すると思うので<br>左側にあるメニューからWebhookをクリックすると、Webhookの設定ページに行くことができます。<br><br></p><h3 id="h599f2fbac3">Webhookの設定</h3><p>では、Webhookの設定をしていきたいと思います。<br><br>+追加ボタンをクリックすると、モーダルが表示されます。<br><img src="https://images.microcms-assets.io/assets/d7c007812cf04b69916cb180b6b27fb8/7f8617de407a4678a4959d939e233617/webhook_setting_page.png" alt=""><br><br>モーダルが表示されたら、一番下までスクロールしカスタム通知を選択します。<br><br>選択すると、Webhookの名前 (任意)と先ほど取得したURLを入力する欄があるので入力します。<br><img src="https://images.microcms-assets.io/assets/d7c007812cf04b69916cb180b6b27fb8/e4c134484ddf47a3a1795a7199502531/microcms_webhook_custom_setting.png" alt=""></p><pre><code># 今回の設定
name: vercel_deploy
url: {取得したURL}</code></pre><p><br><br>名前とURLを入力する欄の下に、URLに対してどのタイミングでWebhook通知を送るか設定することができます。<br>今回は↓のように設定しました。<br><img src="https://images.microcms-assets.io/assets/d7c007812cf04b69916cb180b6b27fb8/d5ca056aacce476ca4feb80d2b9b65bb/webhook_notice_timing.png" alt=""><br><br><br>設定は以上となり、これでmicroCMSの記事が更新または公開されるとVercel上のNext.jsアプリを再ビルドが出来るようになりました！！<br><br><br></p><h2 id="ha214098e44">まとめ</h2><ul><li>Webhookとは、アプリケーションからほかのアプリケーションに対してリアルタイムに情報提供する仕組み</li><li>microCMSのWebhookを設定すれば、記事を更新・公開するだけでVercel上のアプリを再ビルドさせることができる</li></ul><p><br>今回は、SSGを使っているのでこのような手段を取りましたが、クライアントサイドでデータをフェッチしていたり<br>サーバーサイドで都度データを取得している場合は気にしなくていいんですけどね。<br><br><br></p><h2 id="h3de35099b3">参考</h2><ul><li><a href="https://document.microcms.io/manual/webhook-setting" target="_blank" rel="noopener noreferrer">microCMS - Webhookの設定</a></li><li><a href="https://vercel.com/docs/more/deploy-hooks" target="_blank" rel="noopener noreferrer">vercel - Deploy Hooks</a></li></ul><p><br><br></p>

microCMSのコンテンツ更新時にWebhookを使用して、Vercelのアプリを再ビルドできるようにしました。

microCMSのコンテンツ更新時にWebhookを使って、Vercel上のアプリを再ビルドする

<p><a href="https://swr.now.sh/" target="_blank" rel="noopener noreferrer">SWR</a> という面白そうなライブラリに遭遇し、気になったので簡単にアプリを作ってみようと思います。<br>構成はReact+Typescript+SWRです。<br>今回はReact+Typescriptの環境構築の仕方などは書きません。<br>create-react-appを使うなり、webpackを使うなり自分の好きな方法で構築して下さい。<br>APIはGitHubさんが公開しているAPIがあるのでそちらを使っていきたいと思います。<br></p><h2 id="h5bff422b12">API(GitHub)</h2><ul><li><a href="https://developer.github.com/v3/repos/#get-a-repository" target="_blank" rel="noopener noreferrer">GitHub APIドキュメント</a></li></ul><p><br></p><h2 id="h388e5a0d78">ライブラリ公式(英語のみ)</h2><ul><li><a href="https://swr.now.sh/" target="_blank" rel="noopener noreferrer">SWR公式ホームページ</a></li><li><a href="https://github.com/zeit/swr" target="_blank" rel="noopener noreferrer">SWR GitHubレポジトリ</a></li></ul><p><br></p><h2 id="hed900658dc">環境</h2><pre><code>MacBookPro v10.14.6
node v10.15.3
yarn v1.15.2
React v16.13.0
Typescript v3.8.3
SWR v0.1.18</code></pre><h2 id="hd8d793506b"><br>インストール</h2><p>皆さんそれぞれReact Appを作成したとして、今回のメインであるSWRをインストールします。</p><pre><code># SWRを追加
$ yarn add swr</code></pre><h2 id="hb5e5ea787e"><br>使用するAPI</h2><p>今回、GitHub APIの中でもユーザーネームを入れたらそのユーザーのpublicリポジトリを返すAPIを使いたいと思います。</p><pre><code># usernameのリポジトリを返すAPI
https://api.github.com/users/:username/repos</code></pre><ul><li>GitHub APIは1日にリクエストを送れる回数が決まっているので、気をつけて下さい。</li></ul><h2 id="h922edff87b"><br>実装</h2><p>ここからアプリを実装していきたいと思います。<br>まず、今回必要なモノをimportするのと雛形を作成していきます。</p><pre><code>import React from 'react';
// 先ほどインストールしたSWR
import useSWR from 'swr';

const App: React.FC = () =&gt; {};

export default App;</code></pre><p>ここまできたら、GitHub APIを使ってデータを取得する為のコードを追加していきます。</p><pre><code>import React from 'react';
import useSWR from 'swr';

const App: React.FC = () =&gt; {
	// 追加
	const fetcher = (url: string) =&gt; fetch(url)
		.then(res =&gt; res.json)
		.catch(error =&gt; error)

	// facebookのリポジトリを取得します*
	const { data, error } = useSWR(
		"https://api.github.com/users/facebook/repos",
		fetcher
	);
}

export default App</code></pre><p>これだけでAPIへのリクエスト、レスポンスの取得ができます。<br>めちゃくちゃシンプルじゃないですか???<br>ここまで来たら完成したようなもの、後はViewに表示させたいと思います。</p><pre><code>import React from 'react';
import useSWR from 'swr';

const App: React.FC = () =&gt; {
	// 追加
	const fetcher = (url: string) =&gt; fetch(url)
		.then(res =&gt; res.json)
		.catch(error =&gt; error)

	// facebookのリポジトリを取得します*
	const { data, error } = useSWR(
		"https://api.github.com/users/facebook/repos",
		fetcher
	);

	// 追加
	// errorとloadingの部分はSWR公式ホームページと同様にしています。
	if (error) return &lt;div&gt;failed to load&lt;/div&gt;
	if (!data) return &lt;div&gt;loading...&lt;/div&gt;

	return (
		&lt;div&gt;
			{data.map((d: any) =&gt; (
				&lt;a href={`https://github.com/${d.full_name}`}&gt;
					{d.full_name}
				&lt;/a&gt;
			))}
		&lt;/div&gt;
	);
}

export default App</code></pre><p><br>ここまでやるとこうなります。<br><img src="https://images.microcms-assets.io/assets/d7c007812cf04b69916cb180b6b27fb8/1eee7bb6f2524a769fbdea186cb1b1e7/react_swr_image.png" alt=""><br>僕の場合styleをつけているので少し違うと思いますが、facebookのリポジトリを取得することができました!</p><h2 id="h1688017411"><br>完成形</h2><p>完成形がこちらです。</p><pre><code>import React from 'react';
import useSWR from 'swr';

const App: React.FC = () =&gt; {
	// 追加
	const fetcher = (url: string) =&gt; fetch(url)
		.then(res =&gt; res.json)
		.catch(error =&gt; error)

	// facebookのリポジトリを取得します*
	const { data, error } = useSWR(
		"https://api.github.com/users/facebook/repos",
		fetcher
	);

	// 追加
	// errorとloadingの部分はSWR公式ホームページと同様にしています。
	if (error) return &lt;div&gt;failed to load&lt;/div&gt;
	if (!data) return &lt;div&gt;loading...&lt;/div&gt;

	return (
		&lt;div&gt;
			{data.map((d: any) =&gt; (
				&lt;a href={`https://github.com/${d.full_name}`}&gt;
					{d.full_name}
				&lt;/a&gt;
			))}
		&lt;/div&gt;
	);
}

export default App</code></pre><p>シンプルに書けるだけでなく読みやすい。<br>個人的にオススメなライブラリなので、皆さんもお試しあれ。</p><h2 id="h335a87b5ef">参考サイト</h2><ul><li><a href="https://ja.reactjs.org/" target="_blank" rel="noopener noreferrer">React</a></li><li><a href="https://www.typescriptlang.org/" target="_blank" rel="noopener noreferrer">Typescript</a></li><li><a href="https://developer.github.com/v3/repos/#get-a-repository" target="_blank" rel="noopener noreferrer">Github</a></li><li><a href="https://swr.now.sh/" target="_blank" rel="noopener noreferrer">SWR公式ホームページ</a></li><li><a href="https://github.com/zeit/swr" target="_blank" rel="noopener noreferrer">SWR GitHubレポジトリ</a></li></ul><p><br></p>

SWRというライブラリの紹介と使い方

Blogs

Works