viteビルドがスタックする問題

Date2026/09/08 Last Modified2026/09/08

概要

エージェントにコーディングを任せているとき、全然作業が終わらないな、とログを見てみたところviteのビルドがタイムアウトしてうまくいっていないようだった。
最終的にはあきらめてしまい「ビルドの成果物は作成できませんでしたが、作業は完了しました」という報告が。
何度かあったので、そのたび再確認を求めて成功させていたが、根本的な部分でハーネスしないといけないなと思い原因を詳しく調べてみることにした。

viteの役割を整理する

そもそもviteというものを知らないといけないので、そこから。
まずviteには大きく分けて2つの役割があり「開発用のvite」と「ビルド用(本番)のvite」がある。
開発用のviteはnpm run devで起動し、ビルド用のviteはnpm run buildで起動するものである。

npm run devで起動した場合、具体的な成果物となるファイルが生成されるわけではなくViteのDev Serverとなるものが立ち上がり、その接続先がpublic/hotに記載される。
これにより、あくまでもViteの開発用サーバー上でビルドした結果を確認することができる。
npm run buildでビルドした場合、具体的な成果物はpublic/buildに生成される。この場合、public/hotは参照せず、artisanサーバーやURLなどでビルド成果物の結果を確認することができる。

このことから「viteを利用するときpublic/hotとpublic/buildが重要」というのをまず把握しておく。

今回の現象を整理する

エージェントに、失敗した原因について尋ねてみると以下のように回答した。
「開発用のviteがpublic/buildとpublic/hotを削除するが、ビルド用のviteがpublic/buildを書き込もうとして失敗する」

初期対応として、私は「ビルドするときは一回devを止めてほしい」という指示をエージェントに出していたが、
実際のところ問題なのは、public内のI/O競合解決のためにpublic/buildとpublic/hotを削除するという仕様になっていることの方だった。

なので正しい対応としては「ビルドは別環境にて行い、成果物の確認も別環境内で完結させる」というのが良いそうだ。
これにより、確認作業も役割が明示的になる（本番ビルドの成功確認と、開発用Viteの動作確認という棲み分け）

まとめ

エージェントがよしなにやってくれるゆえ、小さなつまずきは無理やり解決してもらうことが多くなってきている。
しかし、エージェントにも思考の癖があり、失敗したら放置してしまうことがあるのなら、その砂利を取り除くのは人間がやるべき作業だと思う。
viteへの基礎的な理解も深まり、一石二鳥だった。