Vite で Node.js Webアプリケーションの開発を行えるようにするためのメモ書きです。
やりたかったこと
- Node.js Webアプリケーション開発でも TypeScript で型の恩恵を受けたい
- 開発時にサーバーを立ち上げたら、コードを修正する度にビルド -> サーバーを立ち上げ直すことなく動作確認できるようにしたい
前提
Vite のインストール方法についてはこの記事では取り扱いません。 以下は Vite がすでにインストールされている前提で進めています。
Vite Plugin Node を導入する
今回は vite-plugin-node を利用しました。
Vite Plugin Node の特徴
Vite Plugin Node の README には以下の機能が紹介されています。
- Node server の開発で HMR を利用できる (hot module replacement)
- Express, Fastify, Koa and Nest のサポート
- Custom Request Adapter のサポート
- TypeScript のファイルのコンパイルを esbuild・swc どちらで行うかを選択できる
人気のある node.js フレームワークがサポートされており、HMR が利用できるのが嬉しいですね。 サポートされていないVite Plugin Nodeでフレームだとしても、Custom Request Adapterを利用することでサポート外のフレームワークで作成したアプリケーションを実行することができるようになっています。
インストール
npm install vite-plugin-node --save-dev
vite.config.ts を作成 または編集する
vite の設定ファイルである vite.condig.ts を編集します。まだ存在していない場合は新規作成します。 以下のコードは REAME の Get Started のコードを元にしています。
import { defineConfig } from 'vite'; import { VitePluginNode } from 'vite-plugin-node'; export default defineConfig({ // ...vite configures server: { // vite server の設定 // 設定できる値の詳細は https://vitejs.dev/config/#server-host で確認できる port: 3000 // この npm run vite 実行時、このポートで Node.js サーバーが立ち上がる }, plugins: [ ...VitePluginNode({ // Vite Plugin Node の設定 // デフォルト値でいい場合は省略して問題ない // Node.js Webアプリケーションのフレームワークを利用する場合はここで指定する // 現在は 'express', 'nest', 'koa' and 'fastify' を利用できる adapter: 'fastify', // エントリーポイントとなるファイルのパスを指定する appPath: './app.ts', // エントリーポイントのファイルで export したアプリケーションの export name を指定する // デフォルトは 'viteNodeApp' exportName: 'viteNodeApp', // TypeScript のコンパイラを選択できる(esbuild or swc) // デフォルトは esbuild tsCompiler: 'esbuild', }) ] }
これで Vite Plugin Node を使う準備はできました。あとは上記ファイル内の appPath
で指定したエントリーポイントとなるファイルを用意するだけです。
エントリーポイントを用意する
先程の vite.condig.ts 内で adapter に Fastify を選択しているので、アプリケーションのドキュメントルートにアクセスしたときに Hello World
を返す簡単なコードを用意します。
import fastify from "fastify"; const app = async () => { const app = fastify(); app.get("/", async (req, reply) => { return 'Hello world!!' }); // 開発時は vite がサーバーを作成するため、開発時には起動しなくてよい if (process.env.NODE_ENV === "production") { try { await app.listen(3000); const address = app.server.address(); } catch (error) { console.error(error); process.exit(1); } } return app; }; // exportName で指定した名前で export する // 未指定の場合は `viteNodeApp` という名前で export する export const viteNodeApp = app();
- 開発時には vite でサーバーを起動するので、接続を listen するような処理は実行しないようにしておく
exportName
で指定した名前でアプリケーションをexport
する
これで都度ビルドして、アプリケーションを立ち上げ直す必要がなくなります。
Sample code
今回検証するにあたって作成した簡単なサンプルを下記のリンク先に置いておきました。