【Cloudflare】キャッシュの影響でファイルが更新されない場合の対処法

こんにちは、ryohei(@ityryohei)です!

本記事では、Cloudflareのどキャッシュの影響でファイルが更新されない場合の対処法をご紹介しています。Cloudflareは導入されているけれど管理画面にアクセスできないといった方向けの対処法となります。

WebサイトにCloudflareが導入されているけど管理画面がないからキャッシュが削除できない…すぐにファイルを更新したいんだけど、良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

Cloudflareとは

Cloudflareはインターネット上に公開されているWebサイトやWebアプリケーションを保護し、パフォーマンスを向上させるサービスです。DDoS攻撃からの保護やDNSによる負荷分散、静的コンテンツのキャッシュといった多くの機能が提供されています。

詳細は下記をご参照ください。

参考:https://www.cloudflare.com/ja-jp/application-security/

前述したとおり、CloudflareはCDNでファイルをキャッシュする機能を提供してます。このキャッシュ機能がかなり強力で、設定にもよりますが、一度キャッシュされたファイルはCloudflareのキャッシュを削除するか、キャッシュの期限を迎えるまで更新されないようになっています。サーバー側のキャッシュを削除しても、ブラウザ側のキャッシュや履歴を削除しても効果がありません。もしCloudflareの管理画面にアクセスできず、有効なキャッシュを削除したいとなった場合、管理者に依頼するか、キャッシュの期限が終了するのを待つしかないため、修正をすぐに反映できない状況が発生します。そういったときに、Cloudflareのキャッシュの影響を受けずにファイルを更新する方法をご紹介できればと思います。

Cloudflareのキャッシュの影響を受けずにファイルを更新する方法

CloueflareはCDNのため、URL形式でキャッシュを保持します。

例えばWebサイト全体のスタイルが設定されている共通のstyle.cssであれば、下記のようなURLでアクセスすることができるファイルをキャッシュとして保持します。

https://into-the-program.com/assets/css/style.css

上記ファイルがCloudflareにキャッシュされると、キャッシュの期限が有効な限りはサーバーのファイルを参照せずにキャッシュとして保持しているstyle.cssを参照し続けます。そのためサーバーのstyle.cssを更新してもサイトのデザインが更新されない状況になってしまいます。そういったときにサーバー上の更新したファイルを使用したい場合は、ファイル名を変更するのが効果的です。

https://into-the-program.com/assets/css/style-new.css

style.cssのキャッシュは存在しますがstyle-new.cssのキャッシュはCloudflareに存在しないため、サーバー上のファイルを参照し、新しいファイルとしてキャッシュを生成します。こうすることでCloudflareのキャッシュの影響を受けずにファイルを更新することができます。しかしながらアップロードの度にファイル名を変更するのは現実的ではありません。そのためここではファイルにバージョンパラメータを設定する方法が良いかと思います。

ファイルにバージョンを設定する場合は更新するファイルに下記のようにverのようなパラメータを持たせておきます。

https://into-the-program.com/assets/css/style.css?ver=1.1

上記のようにバージョンパラメータを設定することで別のファイルとして認識され、キャッシュの影響を受けずにファイルを更新することができます。ファイルの更新が発生した場合はverの値を1.2等に変更することでサーバーのファイルが参照されるようになります。

最後に

本記事の内容はあくまでCloudflareの管理画面にアクセスできない方向けの内容となっています。Cloudflareは便利なサービスですし、管理画面があれば簡単にキャッシュを削除することができますので、管理画面のアクセス権を持っている方はそちらから対応してくださいね!

以上、Cloudflareにキャッシュされているファイルが更新されない場合の対処法のご紹介でした!

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。