strapiで記事を作成したらGridsomeがビルドされるようにしてみる

5 min read読了の目安(約5000字

前回ではstrapiのGridsome Blog StarterをGitHubにpushしたときに自動でビルドとデプロイが実行されるようにしました。
今回はstrapiの管理画面から記事の作成や更新をしたタイミングでGridsomeのビルドとデプロイが実行されるようにしてみます。

前回までの記事

https://zenn.dev/mseto/articles/strapi-starter-blog
https://zenn.dev/mseto/articles/strapi-starter-blog-cloud-run
https://zenn.dev/mseto/articles/strapi-starter-blog-cd

事前準備

前回までのプロジェクトを引き続き使用します。

Secret Manager APIを有効化

VSCodeでgcloudのコンテナに入り、下記コマンドを実行してSecret Manager APIを有効化します。

$ gcloud services enable secretmanager.googleapis.com

APIキーの取得

Webhookに使用するAPIキーを作成します。
Google Cloud Platformの"APIとサービス"から"認証情報"を選択します。

APIとサービスから認証情報を選択

"認証情報を作成"をクリックします。
"認証情報を作成"をクリック

"API キー"を選択します。
"API キー"を選択

APIキーが作成されるので、"キーを制限"をクリックします。
"キーを制限"をクリック

"名前"を入力し、"アプリケーションの制限"で"HTTPリファラー(ウェブサイト)"を選択します。
"名前"を入力し、"アプリケーションの制限"で"HTTPリファラー(ウェブサイト)"を選択

ここでは"リファラー"にstrapiのURLのドメイン部分を入力し、完了をクリックします。
"リファラー"にstrapiのURLを入力

"保存"をクリックして設定したAPIキーの名前と制限を保存します。

Cloud BuildでWebhook用トリガーを作成

Cloud Buildのページから"トリガー"を選択します。
"トリガー"を選択

前回作成したGridsomeのトリガーを複製してWebhookトリガーを作成します。
デフォルトでついていたトリガー名の文字数が長くて複製できなかったので、事前にGridsomeのトリガー名は"gridsome-blog-github"に変更しています。
"gridsome-blog-github"のメニューをクリックします。

メニューをクリック

"複製"をクリックします。
"複製"をクリック

トリガーが複製されるので、複製した方のトリガー名をクリックします。
複製した方のトリガー名をクリック

ここでは名前を"gridsome-blog-webhook"に変更し、"イベント"で"Webhook イベント"を選択します。
"イベント"で"Webhook イベント"を選択

"シークレット"の"新規作成"で"シークレットを作成"をクリックします。
"シークレット"の"新規作成"で"シークレットを作成"をクリック

"シークレット名"を入力して"シークレットを作成"をクリックします。
"シークレット名"を入力して"シークレットを作成"をクリック

"リビジョン"の"ブランチ名"がmasterになっているのでmainに変更します。
"リビジョン"の"ブランチ名"がmasterになっているのでmainに変更

"保存"をクリックして変更を保存します。

strapiでWebhookを作成

strapiでWebhookを作成します。
strapi管理画面のメニューから"設定"をクリックします。
strapi管理画面のメニューから"設定"をクリック

"グローバル設定"の"Webhooks"をクリックします。
"グローバル設定"の"Webhooks"をクリック

"Webhookを追加"をクリック
"Webhookを追加"をクリック

"Webhookを作成"が表示されます。
"Webhookを作成"

"名前"にはgridsome_buildを入力しました。
"名前"にgridsome_buildを入力

"URL"には作成したWebhook用トリガーのURLを入力します。
"URL"には作成したWebhook用トリガーのURLを入力

Webhook用トリガーのURLを確認するにはGoogle Cloud PlatformのCloud Buildのページから"トリガー"に行き、作成したトリガー名をクリックします。
作成したトリガー名をクリック

"URL のプレビューを表示"をクリックします。
"URL のプレビューを表示"をクリック

"Webhook URLのプレビュー"に表示されているURLをコピーしてstrapiのWebhookのURLにペーストし、<API_KEY>の部分を取得したAPIキーに置換します。
"Webhook URLのプレビュー"に表示されているURLをコピー

"ヘッダー"の"キー"にRefererを選択し、"値"にはAPIキーの取得で設定した"リファラー"を入力します。
リファラー"を入力

"イベント"にはすべてにチェックを入れます。
"イベント"にはすべてにチェック

"保存"をクリックします。
"保存"をクリック

トリガーがうまく動作するか"トリガー"をクリックしてテストします。
"トリガー"をクリックしてテスト

トリガーがうまくいけば下記が表示されます。
Google Cloud PlatformのCloud Buildページでビルドが実行されていることが確認できます。
トリガー成功

トリガーのテストがうまくいけば、記事の新規作成や更新をしたときにもビルドが実行されるようになっているはずです。