ビルドは成功、フォントは壊れていた - kickflow Tech Blog

新規事業本部でエンジニアをしている渡辺です。 本記事では、本番環境でボタンの文字が細く描画されるようになった不具合について、原因特定から再発防止、さらに修正後に生じたパフォーマンス劣化を潰すまでの記録をまとめます。 ひとことで言えば、ビルド時の外部通信が一度失敗しただけで、ビルドは成功したまま成果物だけが壊れていた、という話です。学びが多かったのは原因そのものよりも、「失敗してくれなかったこと」がなぜここまで検知を遅らせたのかという点でした。 1. 何が起きたのか 2. 前提となるフォント配信の構成 3. 調査 3-1. CSS は正しかった 3-2. 日本語サブセットが丸ごと無かった 3-3. なぜ 500 だけ細く見えたのか 3-4. 真因はビルドログにあった 4. 障害の連鎖 5. 対策1: セルフホスト化と、そこで生まれたパフォーマンス劣化 5-1. ビルド時に外部へ HTTP し