Bun を使用して HTTP サーバーをホットリロードする

Last updated at 2023-12-11Posted at 2023-12-03

Bun は、インポートされたファイルが変更された時に、プロセスを再起動・シャットダウンせずにコードを更新するフラグ --hot ホットリロード(hot-reload)と、プロセスをハード的に再起動する --watch をサポートしています。

Svelte、Vue、Reactなどにもある、いわゆる編集内容が即時反映される機能ですが、Bun --hot は、サーバー側で自動的に再実行してくれます。

今回は、この --hot の方をみていきます。

--hot は、プログラム編集時に、アプリケーションを再起動する手間が省かれ、変更を加えたコードを即座に反映できるので、開発やデバッグを効率的に進行できます。

たとえば、サーバー自体をシャットダウンせずに HTTP リクエストハンドラーを更新できるようになります。これにより、リフレッシュ速度が非常に速くなります。

ホットリロードフラグ付きで起動する

$ bun --hot run index.ts

このフラグ付きで下記のHTTPサーバーを起動すると、ソースファイルが変更される度に bun プロセスを再起動せず、fetchハンドラーをリロードします。

念のために、一点だけ付け加えておくと、開発には便利なこの機能ですが、本番環境で万が一typoのひとつでも紛れ込んで壊れるなどという事は避けるなら、まあこのフラグを付けなければ良いだけではありますね。

プロセスを再起動しない利点とどちらをとるかはシステムなどにより違うかな。

index.ts

Bun.serve({
  port: 3000,
  fetch(req) {
    return new Response(`Hello world`);
  },
});

したがって、例えばこのソースで「Hello world」を「Hello Bun」に書き換えると、サーバーを再起動しなくても、ブラウザ画面の表示も即座「Hello Bun」へ切り替わります。

ちなみに、このindex.tsファイルはTypeScriptの拡張子ですが、Bunではそれをトランスパイルする必要もありません。TypeScript/JSXで書かれたコードもそのまま自動的にトランスパイルされます。楽々。

最近 Qiita に書いた Bun 関連の記事10選