深夜2時。Leverage OJフロントエンドは何時間も快適にページを提供していたが、何かがクラッシュを引き起こした。素早く再起動した後、すべてのルートがデフォルトのNuxtウェルカム画面を返した：
app.vueの
<NuxtWelcome />を自分のコードに置き換えてこのウェルカムページを削除...
コードは変更されていなかった。app/app.vueは無傷だった。では何が起こったのか？
セットアップ
約2分
Leverage OJのバックエンド書き換えはすでに進行中だった——クリーンなアーキテクチャ、適切なマイグレーション、本物の認証——しかしフロントエンドはまだオリジナルのコードベースのままだった：散在するAPI呼び出し、型安全性なし、動作させるのに創造性が必要なビルドパイプラインを持つVue 2アプリ。基礎を直すなら、屋根も直した方がいい。
この投稿はフロントエンド書き換えについてだ：なぜ行ったか、何を選んだか、持ちこたえたアーキテクチャの決定、そしてPlaywrightテストが実際に使おうとしたときにのみ現れたバグ。
なぜフロントエンドを書き換えたか
約3分