MediaWikiでCloudFlareを使う

MediaWikiでCloudFlareを導入したときの設定方法、問題点

CloudFlareで何をキャッシュさせるか

記事ページのキャッシュはCookie、MobileFrontendでの振り分けの関係で「Businessプラン」以上でないと難しいのであきらめ、画像(/image)とResourceLoader(load.php)をキャッシュさせることにした。

設定した環境など

MediaWiki 1.35.0以上での設定例です

例URLとしてhttps://example.com/ を使用、URL構成はwikipediaと同じと想定しています↓

エントリーポイント	URL
記事のパス	`/wiki/$1`
スクリプトパス	`/w`

CloudFlareの設定

Caching

cachingの設定画面にて「キャッシュレベル」をスタンダードにします

PageRule

ルールの設定画面にてページルールを作成します

ルール

URL:example.com/wiki/*:*　　設定:キャッシレベル：スキップ
URL:example.com/w/load.php* 設定:キャッシレベル：Cache Everything

説明

MediaWiki:~~.css、ファイル:~~.jpgなどが静的ファイル（CloudFlare指定する拡張子）と認識されキャッシュされる可能性があるのでキャッシュをさせないようにします。

ResourceLoader(load.php)はバージョン、構成が変わる度にURLが変更されるの全てキャッシュさせます。(Cache Everythingが重要でこのオプションを設定すると静的ファイルでなくてもCache-Controlに応じキャッシュしてくれます。)

Cache Everything – すべてのコンテンツを静的コンテンツとして扱い、Cloudflareのデフォルトでキャッシュされたコンテンツを超えて、すべてのファイルタイプをキャッシュします。Page Ruleで エッジCache TTLを設定している場合を除き、オリジンWebサーバーからのCacheヘッダーを尊重します。
CloudflareのPage Rulesを理解した上で設定する（Page Rulesチュートリアル） – Cloudflareヘルプセンター

画像について

画像に関してはCloudFlare標準でキャッシュされます
だだし再アップロード時に更新されず古い画像が配信されるのでブラウザキャッシュを短くするなどの対策が必要です。

MediaWikiの設定

LocalSettings.php に下記を追記します。（2021/04/11現在のIPリストを使用しています）


$wgUseCdn = true;
$wgCdnServersNoPurge = [
'173.245.48.0/20',
'103.21.244.0/22',
'103.22.200.0/22',
'103.31.4.0/22',
'141.101.64.0/18',
'108.162.192.0/18',
'190.93.240.0/20',
'188.114.96.0/20',
'197.234.240.0/22',
'198.41.128.0/17',
'162.158.0.0/15',
'104.16.0.0/12',
'172.64.0.0/13',
'131.0.72.0/22',
'2400:cb00::/32',
'2606:4700::/32',
'2803:f800::/32',
'2405:b500::/32',
'2405:8100::/32',
'2a06:98c0::/29',
'2c0f:f248::/32'
];

説明

$wgUseCdn　CDN用？のheaderが追加されるようになります

$wgCdnServersNoPurge X-Forwarded-Forを適切に扱うためにCloudFlareが利用しているIP一覧を設定する必要があります、IP Ranges | Cloudflare　にて最新のIP一覧が取得できます（この設定を怠ると編集者のIPが全てCloudFlareのIPになってしまいます）

実例

実際に使って見たときの「Cache Analytics」（Proプラン以上）スクリーンショット

APIリクエスト（json）や記事ページ(html)はダイナミックとなりキャッシュされていません

ResourceLoader(load.php)に関しては9割以上キャッシュできています

CloudFlareその他の機能

キャッシュ以外の機能を試してみて

Rocket Loader ❌ResourceLoaderの機能と衝突し表示がおかしくなった
Mirage　❌表示がおかしくなった
Polish　⭕軽量なファイルに自動で変換されて良い（Pro）
Auto Minify　❌ResourceLoaderがMinifyするので意味がない？htmlのminifyは意味があるかも

応用？

maxage パラメータ

api.php のクエリオプション smaxage、maxageに応じでCloudFlare側でキャッシュさせたい場合は load.php と同じくPageRule での Cache Everything の設定が必要です。

Caching > 構成　の「ブラウザキャッシュ TTL」を変更している場合　「オリジンキャッシュコントロール」 ON　にしておくと上書きされず　サーバが返すcache-controlが尊重されます

記事ページをキャッシュさせる

PC、Mobileの振り分けが必要ない（MobileFrontendなど）場合は「Business プラン」で　Cookieバイパスを利用することによりキャッシュすることができます。以下の通りに PageRule での Cache Everything を指定することにより記事ページをキャッシュさせることが出来ます

参考リンク