はじめに

HTML + CSSで書いたウェブページを修正してサーバにデプロイしたところ、インターネット経由でページにアクセスしても更新が反映されないという問題が起きたので、その解決までを備忘録的にまとめたいと思います。

構成

今回問題が起きたウェブサイトの技術構成は以下の通りです。

早速結論から申し上げます。
構成を見て気付いた方もいらっしゃるかと思いますが、Cloudflareのキャッシュ更新が遅れていたことが原因でした。

ではここからは、トラブルの発生から解決までの流れをご説明します。

以上の状態から、次のことが分かります。

さて、ここで私は頭を抱えました。
いったいどこに問題があるのだろう…？
近くにいた技術に明るい人たちにもいろいろ見てもらいましたが原因は分からず、果たしてどうしたものか…？

しばらく考えた末、ある言葉が思い浮かびました。
それが Cloudflare です。
はい、これが正解でした。

私のサーバではCDNとしてCloudflareを導入しており、コンテンツが随時キャッシュされています。
このキャッシュの更新に、HTMLファイルとCSSファイルとの間で遅れが生じ、CSSが更新されていないキャッシュサーバからの配信を受けた接続でCSSが正しく反映されていなかったわけです。

では、ここからはCloudflareのキャッシュを更新する方法を説明します。
しばらく待っていればCloudflareが自動的に更新してくれるので、わざわざする必要はないのですが、ページが変更できたかすぐに確認したい場合などには手動で更新も可能です。

1. ドメインのダッシュボードのサイドバーから「Caching」を選択
2. 「キャッシュをパージ」メニューから「すべてパージ」を選択

3. 確認のモーダルウィンドウが出てくるので「すべてパージ」をクリック

「カスタムパージ」で特定のファイルのキャッシュだけを削除することも可能です。（今回カスタムパージでは上手くいかなかったのですべてパージしています）

キャッシュをすべてパージすると、一時的にオリジンサーバにトラフィックが集中し、動作が遅くなることがあるようです。サイトの規模などに応じて適切な方法を選択してください。

キャッシュをパージ（削除）が完了した後、すぐに最新のコンテンツがオリジンサーバからキャッシュされ、キャッシュサーバ経由でもページが正しく表示されるようになります。

さて、今回はCloudflareのキャッシングによるウェブサイトのトラブルについてまとめました。
CDNはとても便利ですが、いろいろトラブルが起きるのですね…。
まだまだCloudflare初心者なのでお許しください。

ところで、CSSだけキャッシュが更新されなかったのはなぜなんでしょうね。詳しい方がいらっしゃれば教えてください m( _ _ )m

お読みいただきありがとうございました。