はじめに
HTML + CSSで書いたウェブページを修正してサーバにデプロイしたところ、インターネット経由でページにアクセスしても更新が反映されないという問題が起きたので、その解決までを備忘録的にまとめたいと思います。
構成
今回問題が起きたウェブサイトの技術構成は以下の通りです。
| 項目 | 内容 |
|---|---|
| サーバ | さくらのVPS |
| OS | Rocky Linux |
| ウェブサーバ | Nginx |
| ウェブページ | HTML + CSS |
| CDN | Cloudflare |
さっそく結論
早速結論から申し上げます。
構成を見て気付いた方もいらっしゃるかと思いますが、Cloudflareのキャッシュ更新が遅れていたことが原因でした。
解決までの流れ
ではここからは、トラブルの発生から解決までの流れをご説明します。
作業の流れ
- ローカルでHTML, CSSを編集
- SFTPでサーバへアップロード
- 公開ディレクトリへコピーして公開
トラブルの概要
- HTMLは更新されて見えている
- CSSが適用される場合とされない場合がある
- ↑ ブラウザ、OS、インターネット回線によらずどちらの場合もある ← これが厄介！！
- 開発者ツールでは
style.cssは200 OKになっている - サーバ側の権限管理なども問題なし
- 同じサーバで公開している他のページは問題なし
以上の状態から、次のことが分かります。
トラブルの状況から分かること
- サーバ側のファイル、設定には問題はない
- 特定のブラウザ、OSによる問題ではない
- インターネット回線による問題ではない
さて、ここで私は頭を抱えました。
いったいどこに問題があるのだろう…？
近くにいた技術に明るい人たちにもいろいろ見てもらいましたが原因は分からず、果たしてどうしたものか…？
原因は…？
しばらく考えた末、ある言葉が思い浮かびました。
それが Cloudflare です。
はい、これが正解でした。
私のサーバではCDNとしてCloudflareを導入しており、コンテンツが随時キャッシュされています。
このキャッシュの更新に、HTMLファイルとCSSファイルとの間で遅れが生じ、CSSが更新されていないキャッシュサーバからの配信を受けた接続でCSSが正しく反映されていなかったわけです。
Cloudflareでのキャッシュ更新方法
では、ここからはCloudflareのキャッシュを更新する方法を説明します。
しばらく待っていればCloudflareが自動的に更新してくれるので、わざわざする必要はないのですが、ページが変更できたかすぐに確認したい場合などには手動で更新も可能です。
1. ドメインのダッシュボードのサイドバーから「Caching」を選択
2. 「キャッシュをパージ」メニューから「すべてパージ」を選択
3. 確認のモーダルウィンドウが出てくるので「すべてパージ」をクリック
「カスタムパージ」で特定のファイルのキャッシュだけを削除することも可能です。（今回カスタムパージでは上手くいかなかったのですべてパージしています）
キャッシュをすべてパージすると、一時的にオリジンサーバにトラフィックが集中し、動作が遅くなることがあるようです。サイトの規模などに応じて適切な方法を選択してください。
キャッシュをパージ（削除）が完了した後、すぐに最新のコンテンツがオリジンサーバからキャッシュされ、キャッシュサーバ経由でもページが正しく表示されるようになります。
おわりに
さて、今回はCloudflareのキャッシングによるウェブサイトのトラブルについてまとめました。
CDNはとても便利ですが、いろいろトラブルが起きるのですね…。
まだまだCloudflare初心者なのでお許しください。
ところで、CSSだけキャッシュが更新されなかったのはなぜなんでしょうね。詳しい方がいらっしゃれば教えてください m( _ _ )m
お読みいただきありがとうございました。