vite server on docker #

2022-08-07

自分が最近触っているフロントエンド環境で vite 入れてみたが、色々あり最終的に docker container の上で vite dev server を起動して、そこにモジュールを取りに行く方法を試したログ。
しかし、これをすると本番環境で ESM をネットワーク越しに解決してるのとほぼ同じ状態になり、初期ロードが異常に重く、正直言って使い物にならなくなっている。
同じような状況の人がいたらどのように解決しているのかを教えて欲しいとまで思う。（そこそこの規模のアプリケーションになると localhost 経由ですら少し重く感じてしまうのだけどそこらへん他の人はどう思ってるのだろうか）

ちなみに言っておくと、このメモにこの内容を書くことで vite 自体を批判するつもりは全くない。vite はモダンフロントエンドの開発体験を向上させる素晴らしいバンドルツールだと思っている。
今自分が投入しようとしてる環境の開発体制と vite の相性がもしかしたら良くないかもねという内容。
逆に、もっといい方法がありそうだったら教えて欲しい。

vite を試す前のビルド #

元々は esbuild を使ってビルドを行っていた。
ローカルでの開発環境では、Makefile にアプリケーション全体を立ち上げるコマンドが記述してあり、それを叩くことによってフロントエンド部分の JavaScript はバンドルされて static file を入れるディレクトリに吐き出されていた。（ちなみに SPA ではなく PHP のテンプレートエンジンでエントリポイントのみを吐いて、そこに React をマウントする要素を入れておく感じ。）
フロントエンドのコードを実際に触って動作確認したい時には esbuild の watch モードで変更を検知して、ブラウザをリロードしてデバッグをしていた。

vite にしてみて #

vite にしてみてまず発生した問題点は、dev server が必須ということ。従来のビルドでは起動コマンドを叩いた時点でバンドルされた JavaScript はとりあえず static file を入れるディレクトリに吐かれるので別に watch モードとして起動していなくてもファイルを取得してレンダリングすることはできる。
しかし、vite は dev server を立ち上げていないとファイルの取得すらできないという状況になる。

これの何が問題か #

このリポジトリが、このリポジトリ単体で動いてるのであれば、開発する前提で dev server を起動すればいいじゃないかという話になるが、実際はそうではなく、他のリポジトリの開発のためにこのリポジトリの画面（UI の部分）を使いたいというようなユースケースが出てくる。
つまり、別に開発するわけではないのに dev server を立ち上げないといけない状況が発生する。これは正直面倒だし、言い換えれば開発者体験を下げることになる。

もう 1 つ発生した問題点 #

これは正直解決できる範囲の問題だとは思っているが、VirtualBox 等の仮想環境上で開発をおこなっている人は、ホストマシンのポートを手動で設定する必要がある場合があり、vite でいうと 5173 ポートをフォワーディングしないといけない。（デフォルト設定の場合）
しかし、例えばローカル環境でオレオレ証明書を使って https にしてる場合などはここで cors エラーが発生することがある。（server.cors オプションで対応可能？）
vite は dev server のプロトコルを https にすることもできるが、結局証明書がないので無効になるだけで大した意味は成さない。

ではどうしたか #

vite dev server を 1 つのコンテナにしてしまい、Makefile の起動コマンドが叩かれた時に起動してしまおうという作戦をとってみた。
つまり、こちら側で何もしなくても起動コマンドが叩かれた時に他の環境（PHP、DB、等）と同じように vite dev server のコンテナを起動してしまおうという作戦だ。

しかし、これをやると、最初にも述べたが本番環境で ESM をネットワーク越しに解決してるのとほぼ同じ状態になる。

すごい雑だが、以下のような定義を書いた上で、起動コマンドを叩いて実際にアクセスしてみた。

dev:
  docker run --name vite_dev_server --expose 5173 -v ...

すごい率直な感想だと、もう使い物にならないレベルだった。とはいえ初期ロードが極端に遅いだけで、hmr は普通にいい感じに動作していたが。
試しに lighthouse でスコアをとってみると、大変だった。（ボトルネック云々ではなかったので、雑に lighthouse のスコアだけ取ろうとした）

開発環境だからとかいう次元では無くなってしまったので、正直この案はボツ（つまり vite の導入自体ボツ）で、esbuild のままで行くのがいいのかなと感じた。

ちなみに、vite を試す前の esbuild のスコアはこのようになっている。

まとめ #

vite、今自分が入れようとしてるところは少し厳しいかなと感じた。
そして、ここまで述べてきたこともおそらくもう少し頑張ればなんとかなるんだろうけど、現状 esbuild でそこまで困ってないところに試験的に入れてみたくらいのノリなので、これ以上頑張るのもどうかなと思い一度引こうかなと思っている。（時間的なリソースにも限りがあるので）

正直、適材適所の適所ではなかっただけで、vite 自体は素晴らしいライブラリだと思っている。

vite、企業での採用事例もちょこちょこ聞いているが、そういうところはどうやって開発環境に入れてるんだろう？おそらく普通に localhost 越しにファイルをとってきてると予想してるが、docker で vite dev server を立ち上げてそこそこ速いファイル取得できてるケースとかがあったらぜひカジュアル面談でも Twitter の DM でもいいので教えてくれると泣いて喜ぶと思います（切実）

おまけ #

こういう雑な個人メモ帳ではなくて、しっかりした文章と構成にしてベンチマークをとって LT とかで発表したいので機会があればしゃべりたいなー。