はじめに
GithubPagesに構築したウェブサイトを運用する際に、CDNサービスのCloudFlareを利用するとページ速度の改善や、HTTPSへの対応が楽にできて非常に便利です。
しかし、CloudFlareにキャッシュされた静的ファイルが削除されず、記事を投稿したりCSSを変更した際に困る場面が何度かありました。
今回は、GithubのWebhookを利用して、CloudFlareのキャッシュを削除してみます。
CloudFlareのAPIについて
幸いにもCloudFlareには、サイト外から様々な操作を行うことができる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になります。
https://www.cloudflare.com/api_json.html?a=fpurge_ts&tkn=0000000000000000000000000000000000000&email=name@domain.com&z=domain.com&v=1各パラメータの形式は以下の通りです。
| Key | Value | 備考 |
|---|---|---|
a | fpurge_ts | 固定 |
tkn | 37桁のハッシュ値 | My Settings > API Key > Global API Key |
email | 例: name@domain.com | 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のキャッシュを自動削除することができるようになりました。