Vite Plugin Node で Vite を Node.js Webアプリケーションの開発でも利用する

Vite で Node.js Webアプリケーションの開発を行えるようにするためのメモ書きです。

やりたかったこと

  • Node.js Webアプリケーション開発でも TypeScript で型の恩恵を受けたい
  • 開発時にサーバーを立ち上げたら、コードを修正する度にビルド -> サーバーを立ち上げ直すことなく動作確認できるようにしたい

前提

Vite のインストール方法についてはこの記事では取り扱いません。 以下は Vite がすでにインストールされている前提で進めています。

Vite Plugin Node を導入する

今回は vite-plugin-node を利用しました。

github.com

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

今回検証するにあたって作成した簡単なサンプルを下記のリンク先に置いておきました。

github.com

今回紹介した Vite Plugin

github.com