Gatsby + microCMS + Amplify ConsoleでJAMstackなサイトを作った時に詰まった事象。
途中でContentfulからmicroCMSに乗り換えたのでContentfulでの場合も記載しています。
Amplifyの情報が少なすぎたので公式の英語ドキュメントを雰囲気で読みながら実装しました。
せっかくなのでちょろっとAmplify Console自体の情報も載せておきます。
Amplify Consoleとは？
AWSのホスティングサービス。ざっくり言うとNetlifyやFirebase HostingのAWS版。
S3、CloudFrontなどを内部的に使用してよしなにやってくれているっぽい。
もうちょっと細かく言うとAmplifyっていうCLIを使ってバックエンドを簡単に実装できるmBaaSがあってその中のホスティング機能って立ち位置なので
限りなくFirebaseに近いのですが、今回は「SSG + headlessCMS」の構成をホスティングできるっていう観点なのでその辺は割愛します。
この手の構成だとNetlifyを使ってホスティングしている方が多いので今回もその流れに身を任せようと思っていたら下記の記事などを見てAmplify Consoleに興味を持ちました。
参考：
https://microcms.io/blog/frontend-amplify-console/
https://dev.classmethod.jp/articles/gatsbyjs-amplify-deploy/
- ブランチ毎に環境を分けることができる
- ブランチ毎にベーシック認証がかけることができる
- AWSで完結する
地味に上記２つをNetlifyで補おうとすると厄介なんですよね。実際の業務ではこの辺って必須だったりもするので辛いところ。
この辺りに利点を感じた結果「もしかしてNetlifyよりいいんじゃね？」って感覚で使ってみました。
実際のホスティングの手順とかは上記の記事が優れているのでそちらにお任せします。
Amplify ConsoleのWebhookの設定をする
Gitコミットを検知してビルドを走らせてくれるAmplify ConsoleですがmicroCMSやContentfulなどを使用している場合は記事の公開も検知して欲しいところですよね。
Contentfulの場合はLambdaを用いたテンプレート設定などが用意されていますが、そもそもEnterpriseプランのみの機能になっています。
でも実は無料ユーザーにも優しい機能がAmplify Consoleには存在しています。
AWSの管理画面から「AWS Amplify→自身で作成したアプリケーション→ビルド設定」を見てみましょう。
上記画面中段にある「Incoming webhoooks」から設定することができます。
オレンジ色の「Create webhook」ボタンを押してみましょう。
webhookの名前とそれを検知するブランチを設定するモーダルウィンドウが表示されます。
今回はcontentfulのwebhookをmasterブランチで検知するので
- Webhook name：contentful-master
- Branch to build：master
と設定しました。
保存ボタンを押すとこんな感じに表示されます。
※上記画像はプレビュー環境も作成しているのでcontentful_previewも存在していますが同じことをもう一回やっただけです。
記載されているURLへpostすることでbuildが走るっていう仕組みみたいです。
URLの欄をコピーしてheadlessCMSの設定を変更してみましょう。
headlessCMSのwebhook設定
Contentfulの場合
作成したスペースのメインメニューから「Settings→Webhooks」を選択。
Netlifyなどの場合は、右側に表示されている「WEBHOOK TEMPLATES」からテンプレートを選択することができるが、
今回は１から作成するので画面右上にある「Add Webhook」ボタンを押す。
1番上の項目の「Details→URL」の欄に先ほどAmplify Consoleのビルド設定でコピーしたURLを貼ってください。
セレクトボックスはPOSTのままで大丈夫です。
もう１つは画面中間あたりにある「Headers→Content type」の項目です。
こちらはセレクトボックスになっていますが、これを「application/json」に設定してください。
他の項目はそれぞれ自由に設定して右上の「Save」ボタンを押すとWebhookの設定は完了です。
作成したWebhookの「Activity log」からWebhookの動作が上手くいったかの確認が出来ます。
microCMSの場合
Contentfulと比べるとこちらは簡単です。
設定したいコンテンツを開き画面上部のメニューから「API設定→Webhook」を開きます。
追加ボタンから「カスタム通知」を選択してAmplify ConsoleでコピーしたURLを記載してwebhookのタイミングを選択するだけです。
動作確認
それぞれのCMSで記事を更新して実際に動作するか確認してみましょう。
Amplify Consoleに戻り、該当のアプリのビルドが始まっていたら成功です！
