🪝

SSGのためにCloudflareのデプロイフックを設置したお話

2024/05/16に公開3

WEBサイトのコンテンツを自動で更新させたいとき、データベースから取得するAPIを毎回叩く方法がありますが、"データの更新があまり発生しない場合は毎回取ってくるよりも、そこの部分は静的サイトとして生成させておいた方がいいよね" ってことで生まれたのがSSG(Static Site Generation)です。

Nuxt3ではonMountedといったページ表示前に行う処理をあらかじめ完了させた状態で保存しておくことで、閲覧する際にそれら処理を省略して早く表示ができるという寸法。(ゆえにSSGではonMountedは使えなかったりする)

実際には表示する情報を更新したときに、再デプロイの形でyarn generateをしなおしていきます。
Cloudflareには自動デプロイを行うことができる機能、デプロイフックがあるのでその作業を自動化してみた。そんな記事。

デプロイフックを作成する

まずはCloudflareにログインし、Worker & Pagesから自動デプロイしたいプロジェクトに入ります。
Settingsから、builds & Developmentに入り、一番下のDeploy hookから、Add deploy hookを押すとデプロイフック名とデプロイ対象ブランチを入力できるようになるので入力。

Doneを押して完了後、デプロイフックの詳細を見ると、デプロイの発火のさせ方が描いてあります。

データのないPOSTリクエストを投げてあげるとデプロイが発火するようになりました。

自動デプロイをPythonに組み込む

さて、自動デプロイしたいタイミングはデータベースを更新した時です。
更新するためのプログラムはPythonで書いていて、データベースにコミットまで完了した後の処理としてPOSTリクエストを書いていきます。

import os
import requests
requests.post(os.getenv("DEPLOY_HOOK"))

このコードでは、環境変数DEPLOY_HOOKにデプロイ用のURLを入れておいて、それに対して単にPOSTするだけの簡単な追記。
これだけで自動でデプロイをかけることができます。かんたんすぎて書くことがない。

思った以上に簡単だったので、もっと早くやった方が良かったなぁとか、無料プランだと月あたり500回までのデプロイ制限あったなぁとか思いながら、この記事はこれでおしまい

Discussion

takuchantakuchan

初めまして。質問失礼いたします。
私もCloudflareのデプロイフックを設置しようとしているのですが、下記画像のようにbuilds & Developmentという項目がでてこなく、こちらは有料プラン等の制約はありますでしょうか?

Amasato Rie(遍怜 悧叡)Amasato Rie(遍怜 悧叡)

おそらくそのプロジェクトはCloudfare Workersで作っているのではないでしょうか?

Workersは「アクセスがある度に毎回HTMLを作成」してくれます。(サーバーサイドレンダリングのこと)
一方、「アクセスに関わらずあらかじめHTMLを生成」しておく機能としてPagesがあります。(静的サイトのこと)

この記事のデプロイフックでは「“あらかじめ生成されたHTML”を更新する機能」なので、対象はPagesで作ったサイトになっています。

takuchantakuchan

おっしゃるとおりでした!
ありがとうございます!