何もしてないのに Vercel にデプロイしたアプリケーションが壊れた場合はビルドキャッシュを使わないでデプロイすると直ることがある
いつの間にかフォントが変わる
もともとこんな感じで Windows 環境ではメイリオのフォントで表示されるように CSS を書いた Next.js アプリケーションを Vercel にデプロイしていたのですが
いつの間にか游ゴシックで表示されるようになっていました。
フォントが変わっていることに気づくまで、メインコンテンツデータの入った JSON を変更して何度かデプロイしていたのですが、CSS はもちろんのこと、Next.js や Tailwind などのパッケージの更新はしていません。
この時点では Vercel のフォント最適化による問題かと疑ったのですが、ググってみても他に同様の減少になっている人は見当たりませんでした。
表示環境の調査
それならば表示環境による問題かと思い、Edge, Chrome, Firefox で開いてみたところ、Edge と Chrome では意図しない游ゴシックが表示される一方、Firefox では期待通りにメイリオが表示されたので、Chromium ブラウザ系の挙動変更によるものかとアタリをつけたのですが、冷静に考えるといくら同じ Chromium 系とはいえ、Edge と Chrome にほぼ同時に挙動変更が反映されているのはかなり奇妙です。
Vercel ではデプロイ履歴から、その当時のデプロイされた過去のページも閲覧できるため、表示が変わったタイミングを見てみたところ、どうやら 2 ～ 3 日前のデプロイ以降に同一ブラウザでも表示が変わっていることがわかりました。
これでブラウザの問題ではないことがわかります。
HTML と CSS の調査
フォントが変わる前後のソースを見比べてみると、どうもライブラリが自動生成したクラス名が HTML と CSS で違っていることで、当たっているフォントが変わっていることが判明します。
CSS のセレクタのクラス名はデプロイごとに変わっているのですが、HTML の方はデプロイしても変わっていません。
おそらく Firefox はデフォルトフォントがメイリオになっているので、CSS が当たっていなくてもメイリオにフォールバックされていたのでしょう。
Redeploy
このとき、時間は午前 0 時を過ぎていたため、これ以上の調査は明日にすることとして「一応、最後に手動デプロイを試してみるか…」と思い Redeploy のメニューを開くとそこには Use existing Build Cache といういかにもなチェックボックスがありました。
デフォルトではチェックがオフになっていたのですが、おそらく GitHub への push をトリガーとしたデプロイではビルドキャッシュが有効になっていると思われます。（未確認）
チェックボックスをオフにしたまま Redeploy を押し、しばらく待つとデプロイが完了し、ページを開くと期待通りにメイリオのフォントが表示されていました。（やったぜ！）
ビルドキャッシュの制御
その後、軽くググった感じではビルドキャッシュによってアプリケーションの挙動が怪しくなるというのはままあるらしいのです。
2 年ほど Vercel を利用してきて初めてトラブルを引いてしまったので、ビルドキャッシュによる問題というアタリをつけられずに調査にやや時間がかかってしまいました。
対応は、今回のように手動で Redeploy をしても良いのですが、恒久的にビルドキャッシュを使いたくない場合は VERCEL_FORCE_NO_BUILD_CACHE の環境変数の設定を行うことができるようです。
Discussion