SSGのためにCloudflareのデプロイフックを設置したお話
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
初めまして。質問失礼いたします。
私もCloudflareのデプロイフックを設置しようとしているのですが、下記画像のようにbuilds & Developmentという項目がでてこなく、こちらは有料プラン等の制約はありますでしょうか?
おそらくそのプロジェクトはCloudfare Workersで作っているのではないでしょうか?
Workersは「アクセスがある度に毎回HTMLを作成」してくれます。(サーバーサイドレンダリングのこと)
一方、「アクセスに関わらずあらかじめHTMLを生成」しておく機能としてPagesがあります。(静的サイトのこと)
この記事のデプロイフックでは「“あらかじめ生成されたHTML”を更新する機能」なので、対象はPagesで作ったサイトになっています。
おっしゃるとおりでした!
ありがとうございます!