はじめに
こんにちは！TamaTのゆういちろうです。
みなさん、ヘッドレスCMSのStrapi使ってますか？
CMS自体のコードを直接いじれたり、DBも自前で用意するので、手間は少しかかる分自由度が高くて便利です。
Strapiでコンテンツ更新のたびにサイトを自動でビルド・デプロイしたいので、最初は、StrapiのwebhookをNetlifyにつないで自動化してたんです。ところが、コンテンツが増えすぎてNetlifyのビルド制限に引っかかっちゃって...。そこで、GitHub Actionsでなんとかしようと思ったんですが、これがまた問題だらけで。
問題点
StrapiのwebhookをGitHub Actionsのトリガーにしようとしたら、こんな壁にぶち当たりました：
- Strapiのwebhookって、リクエストBodyが空っぽなんです。というか設定ができない。
- でも、GitHub Actionsの
repository_dispatchイベントを使うには、Bodyにevent_typeを入れないといけない。
つまり、Strapiの標準webhookじゃGitHub Actionsを呼べないんですよ、、
解決策：Strapiを魔改造しちゃおう
ってことで、Strapiのソースコードに手を加えることにしました。具体的にはこんな感じです：
- Strapiのapiディレクトリに新しいファイルを作る
→api/{api_name}/content-types/{api_name}/lifectcles.jsを作成。 - コンテンツが変わったらGitHub Actionsを呼び出す仕組みを実装する
実装手順
const fetch = require("node-fetch");
module.exports = {
afterCreate() {
triggerGitHubActions();
},
afterUpdate() {
triggerGitHubActions();
},
afterDelete() {
triggerGitHubActions();
},
};
async function triggerGitHubActions() {
const githubToken = "xxxxxxxxxxxxxxxx";
const owner = "xxxxx";
const repo = "xxxxxxxxxx";
try {
const response = await fetch(
`https://api.github.com/repos/${owner}/${repo}/dispatches`,
{
method: "POST",
headers: {
Authorization: `Bearer ${githubToken}`,
Accept: "application/vnd.github+json",
"X-GitHub-Api-Version": "2022-11-28",
"Content-Type": "application/json",
},
body: JSON.stringify({
event_type: "webhook",
}),
}
);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
console.log("GitHub Actions triggered successfully for content update");
} catch (error) {
console.error("Error triggering GitHub Actions:", error);
}
}
このコードで、コンテンツの作成、更新、削除のたびにGitHub Actionsを呼び出せるようになりました。
動作の仕組み
- Strapiでコンテンツが変更されると、さっき作ったファイルの関数が呼ばれます。
- その関数がGitHub APIを使って起動の合図を送ります。
- その合図で、設定しておいたGitHub Actionsのワークフローが動き出します。
注意点
- この方法、Strapiの中身に手を加えてるので、Strapiがアップデートしたら動かなくなるかも。要注意です！
- GitHub Personal Access Tokenを使ってるので、セキュリティには気をつけましょう。トークンは環境変数に入れるのがおすすめです。
まとめ
これで、Strapiのコンテンツ更新をきっかけにGitHub Actionsを走らせられるようになりました。Netlifyの制限？そんなの知りません（笑）。柔軟なビルドとデプロイのワークフローが手に入りましたよ。
みなさんも、ヘッドレスCMSとCI/CDの連携で困ったら、この改造を試してみてください！
Discussion