Concrete CMS から、直接 Cloudflare のキャッシュをパージできるアドオン作りました

Concrete CMS のキャッシュをクリアする時、同時に Cloudflare のキャッシュをパージ (削除) できるアドオンを作成・公開しました。

遅れてしまってすいません！ [Cloudflare Advent Calendar 2023](https://qiita.com/advent-calendar/2023) 8日目の投稿です。

US Army や、日本人の半分以上ぐらいの人が訪れたことのあるあのサイトにも使われている CMS、 [Concrete CMS](https://concrete5-japan.org/) 。その Concrete CMS でも、Cloudflare の WAF や CDN の恩恵を受けることができますが、サイトの更新中に面倒になるのがキャッシュのクリアです。

サイトを更新しても、Cloudflare のキャッシュがあるため、更新がすぐに反映されない時があります。

そんな時、Cloudflare のキャッシュをパージするのですが、わざわざ Cloudflare の管理画面にログインするのも面倒ですし、ウェブサイトの更新を担当する人全てに Cloudflare のアカウントログインを渡すのも危険です。

そこで、Cloudflare の API を利用します。

Concrete CMS では、特定のアクションが実行された時に、追加でアクションをフックできる、イベントが搭載されています。

そのイベントには Concrete CMS 搭載のキャッシュをクリアした時のイベントも登録されています。

つまり、キャッシュをクリアした時に、Cloudflare のキャッシュをパージする API を叩くアドオン「CDN Cache Purge Cloudflare」を作成しました。

![icon_original.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/90cb7b59-8fe0-4c41-a23b-b5da0951134e.png)

中身は Cloudflare の Cache Purge の API を叩くだけの非常にシンプルなものなので、何か、Cloudflare API で PHP アプリと連携したいと思う人には参考になるのではないかとも思います。

# CDN Cache Purge Cloudflare 利用方法

2023年12月24日時点、このアドオンは GitHub 上のみで公開しています。

https://github.com/MacareuxDigital/addon_cdn_cache_purge_cloudflare

GitHub 上の Readme で、英語で設定方法を解説しているので、この記事では日本語で解説します。

## Cloudflare で必要な Zone ID や Auth Key を生成

まず Cloudflare 上で必要な情報や API キーを生成します。

### ゾーンID を取得

Zone ID は各ドメインの「Overview」ページから取得することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/9783e037-8f33-a49d-7183-416362214429.png)

右下に ゾーンID を見つけることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/7b53a956-ee06-c30b-576d-66b83892990c.png)

ここで、Zone ID を保存しておきましょう。

### Auth Key を生成

次に API の Auth key を生成します。この Auth Key はログインユーザーに紐づかれます。

- [マイプロフィール](https://dash.cloudflare.com/profile) ページに訪問します
- メニューから [API トークン](https://dash.cloudflare.com/profile/api-tokens) をクリック ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/c0550366-f8cf-5eed-3afb-53adfd6c260c.png)
- `トークンを作成する` ボタンをクリック![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/6051bf5c-c5c4-a996-b062-33b02bed24fe.png)
- 一番下にある「カスタムトークンを作成する」の「始める」をクリック![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/58cff5d6-0a1c-d88c-a5c7-9cbb6f627354.png)
- トークンの設定をすすめます
    - トークン名は自分が後で管理しやすい名前にします ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/557a2ee1-72ef-70a5-8866-7133a1a0f4ea.png)
    - アクセス許可の設定は添付画像の様に左から順番に選んでください ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/d7ca8351-d0ac-1801-51dd-fe477de2fcf8.png)
        - `ゾーン`
        - `キャッシュパージ`
        - `パージ`
    - ゾーンリソースも目的のウェブサイトのみを選択しましょう ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/460af400-e54a-098c-c6c1-a82cf137af44.png)
        - `包含` (Include)
        - `特定のゾーン`
        - `[ドメイン名]`
    - クライアントIPアドレスフィルタリング (オプション) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/39ca9216-d432-d0eb-325c-dc2fb602b9e3.png)
        - リクエストを送る Web サーバーの IP が固定化しているのであれば、他からリクエストを送れない様にするため、IP アドレスを指定するのも良い方法です。
    - `概要に進む` をクリックします ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/1ff5f5cd-f54d-b125-0483-5d2f552c4524.png)
- 設定を行った内容の確認画面になります。問題がなければ「トークンを作成する」ボタンを押します ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/e4a86e7d-5efb-db1c-8ae9-3cb955f9892b.png)
- トークンが作成されました。これ以降、トークンは **二度と表示されません** メモを取っておきましょう ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/bf40e83b-689b-e46b-2f25-359401ce7515.png)

### Auth Email は Cloudflare のログインメールアドレス

API Key を生成する際ログインしたメールアドレスが Auth Email です。

以上で Cloudflare 側の設定などは終わります。

## Concrete CMS にアドオンのインストール

アドオンのファイルをダウンロードします。

GitHub のページに訪問します。

https://github.com/MacareuxDigital/addon_cdn_cache_purge_cloudflare

緑色の「Code」アイコンをクリックし、「Local」メニューの中にある Download ZIP をクリックし、ZIP ファイルをダウンロードします。

Git がわかっている人は Git Clone しましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/11f3c9d9-3bec-b009-1aff-e6462d60daf2.png)

ZIP ファイルを解凍すると `addon_cdn_cache_purge_cloudflare-main` という名前のフォルダになると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/e25da088-07d2-dd09-b5a1-daeaf5352ff3.png)

フォルダ名から「addon-」と「-main」を削除して `cdn_cache_purge_cloudflare` というフォルダ名になるように変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/a1d7ed1d-82fc-d69a-ef45-ba3bc3e9ec81.png)

そのフォルダごと Concrete CMS の packages フォルダの配下にアップロードします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/b89862fd-d026-dcf9-efc8-ff3178eacfbe.png)

- Concrete CMS の管理者権限でログインします。
- [管理画面] - [Concrete を拡張]ページに訪問します。
- 「CDN Cache Purge for Cloudflare」がインストール可能な状態にあるのを確認できるので「インストール」ボタンを押します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/2e94b9c0-3c0a-7767-62cf-9e5e68230a0e.png)

CLI からインストールする場合は以下のようなコマンドでインストールします

バージョン | コマンド
-------------|---------
バージョン8 | `concrete/bin/concrete5 c5:package:install cdn_cache_purge_cloudflare`
バージョン9以降 | `concrete/bin/concrete c5:package:install cdn_cache_purge_cloudflare`

apache nginx ユーザーで実行している場合などは　`sudo -u (nginx|apacke)` で実行します

## Concrete CMS に Cloudflare の各キーを保存

次に Cloudflare の各キーを保存します。

- 管理者ユーザーでログインし、
- [管理画面] -> [システムと設定] -> [最適化] -> [Cloudflare] ページに訪問します
    - URL: `[サイトURL]/index.php/dashboard/system/optimization/cloudflare`
- 先ほど入手した Auth key, メールアドレス, ゾーンIDを入れ、保存します ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/0d6cc60e-8fd5-88c4-2750-bb7831eee45f.png)

## Concrete CMS でキャッシュをクリアしてみる

- [管理画面] -> [システムと設定] -> [最適化] -> [キャッシュをクリア] ページに訪問します。
    - URL: `[サイトURL]/index.php/dashboard/system/optimization/clearcache`
- キャッシュをクリアボタンを押します。これで完了です。
- ちゃんとキャッシュがクリアされたかは、[管理画面] -> [レポート] -> [ログ] ページから見ることができます。
    - URL: `[サイトURL]/index.php/dashboard/reports/logs/`
    - 注意 (Notice) レベルでキャッシュパージのログが保存されており、Result ID などがログに保存されていることを確認できます。「Success」と記録されていれば、成功です。<br> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/a5b631f9-3b10-f1c4-cc25-ca8d26cd3332.png)

## デバッグモード (トラブル時に)

Concrete CMS のロギングレベルをデバッグ (Debug) モードにすると、アドオンが送っている実際の API コードもログに記録される様になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44367/865043c3-7f40-f0d5-9d4a-e0e539e1b065.png)

ロギングレベルの設定は [管理画面] - [サーバー設定一覧
] -> [ログ設定]
`[サイトURL]/index.php/dashboard/system/environment/logging`
にてレベルを変更できます。

**注意!!**：デバッグモードにすると、API Auth Key もログとして保存される様になるので、検証が終わったらログをクリアすることをお勧めします。

## テクニカル情報

- このアドオンは Concrete CMS の `on_cache_flush` イベントのフックを利用しています。
- 管理画面の Config 設定は `application/config/generated_overrides/cdn_cache_purge_cloudflare/cloudflare.php`
 にテキストファイルとして保存されます。

 ## クレジット

 - Hissy が作成した [CDN Cache Purge for CloudFront](https://github.com/MacareuxDigital/addon_cdn_cache_purge_cloudfront) アドオンを改造して作成しました。
 - アドオンのアイコンは[亀田さんの記事](https://zenn.dev/kameoncloud/articles/566637003f1727) を元に Cloudflare AI で `stable-diffusion-xl-base-1.0` モデルを使用して作成しました。
 - ChatGPT さんの力も借りました


インフラばかり触っていて、久しぶりに Concrete CMS のアドオンを作ることができて嬉しいです。

それでは、みなさん、メリークリスマス！