CloudFlareのWEBキャッシュをGithubのWebhookを使って自動削除する

目次

  1. 1. はじめに
  2. 2. CloudFlareのAPIについて
  3. 3. Webhookを送信するアドレスの作成
  4. 4. Githubにフックを追加
  5. 5. おわりに

はじめに

GithubPagesに構築したウェブサイトを運用する際に、CDNサービスのCloudFlareを利用するとページ速度の改善や、HTTPSへの対応が楽にできて非常に便利です。

しかし、CloudFlareにキャッシュされた静的ファイルが削除されず、記事を投稿したりCSSを変更した際に困る場面が何度かありました。

今回は、GithubのWebhookを利用して、CloudFlareのキャッシュを削除してみます。

CloudFlareのAPIについて

幸いにもCloudFlareには、サイト外から様々な操作を行うことができるAPIが公開されています。

CloudFlare Client API

上記のドキュメントを読んでみると、以下のAPIが利用できそうです。

4.4 - “fpurge_ts” – Clear CloudFlare’s cache

This function will purge CloudFlare of any cached files. It may take up to 48 hours for the cache to rebuild and optimum performance to be achieved so this function should be used sparingly.

Webhookを送信するアドレスの作成

上記のドキュメントの通りにWebhookを送信するアドレスを作成してみます。
結果的には下記のようなURLになります。

1
https://www.cloudflare.com/api_json.html?a=fpurge_ts&tkn=0000000000000000000000000000000000000&[email protected]&z=domain.com&v=1

各パラメータの形式は以下の通りです。

Key Value 備考
a fpurge_ts 固定
tkn 37桁のハッシュ値 My Settings > API Key > Global API Key
email 例: [email protected] CloudFlareに登録したEメールアドレス
z 例: domain.com キャッシュを削除するドメイン名
v 1 固定

これらを元にURLを作成します。悪用されてしまうかもしれないので、このURLは外部に公開されないように注意してください

Githubにフックを追加

GithubのWEBページからフックを追加したいリポジトリを選択して、Settings > Webhooks & services > Add Webhookに移動します。各項目を以下のように設定してください。

項目 設定値
Payload URL 上で作成したWebhookアドレス
Content Type application/json
Secret 空欄
Which events would you like to trigger this webhook? Let me select individual events.
Page buildのみにチェック

WEBフックを送信するタイミングをPage buildに設定しておけば、ブランチが更新された時点で実行されるので都合がいいです。

全て設定が終わったらUpdate webhookすれば完了です。

おわりに

これでHexoなどの静的サイトジェネレータからソースをGithub上に公開したら、それと連動してCloudFlareのキャッシュを自動削除することができるようになりました。