BunでNext.js動かしてみた！
Bunとは
Nodeとの互換性の高いJavaScriptとTypeScriptの動作環境。
npm,yarn,pnpmと同等機能もあって、WebpackやViteみたいな機能もあるらしい。
どうやらパフォーマンスがいいらしい。
詳細は記事が以下の記事が詳しいです。
環境
bun 1.0.4
node 18.18.0
導入
Windowsは非対応だったのでWSLのUbuntuでダウンロード。
RoadMap内にWindows Supportの項目もあったのでそのうち対応するみたい。
$ curl -fsSL https://bun.sh/install | bash
bun was installed successfully to ~/.bun/bin/bun
ダウンロード後に以下を実行してと言われたのでそのまま実行。
$ source /home/<username>/.bashrc
bunコマンドが使えるようになっているので確認。
$ bun -v
1.0.4
触ってみた
Hello Worldしてみる
TypeScriptがそのまま動くらしいので試してみる。
index.tsxを作成。
const server = Bun.serve({
port: 3000,
fetch(request) {
return new Response("Welcome to Bun!");
},
});
console.log(`Listening on localhost:${server.port}`);
実行。
$ bun index.tsx
localhost3000で実行されているのが確認できる。簡単。
Next.jsの環境を作ってみる
速いと噂なので試してみる。
いつものcreate next-app。
Bunはnpmの機能も兼ねているのでそのまま動く。
インストールと初期化はBunなのでそこでyarnと比較してみる。
(dev serverの実行にはまだNode.jsを使っているらしい)
$ bun create next-app
Creating a new Next.js app in /home/taltal/wsl-dev/bun-next-example.
Using bun.
Initializing project with template: default
bun install v1.0.4 (745b6b94)
277 packages installed [8.88s]
結果8.88s！速い。
同じ環境で試したyarnだと21.5sだったので体感できるほど速い。
Next.jsの実行
AppRouterの都合上、実行にはNode.jsを使用しているらしいので、run devが2種類ある。
Node.js APIの機能をBun側で"まだ"実装していないからとのこと。
そのうちBunで統一されてコマンドがきれいになるんだろうか・・？
bun --bun run dev
bunの環境で実行できる。
bun --bun run dev
Nodeの環境で実行できる。
他はpackage.jsonのscript通りにbun runで実行できる。
Dockerで使ってみる
試しに動作確認だけしてみる。
必要最低限なDockerfileを作成。
上記のイメージを使用。
FROM oven/bun:latest AS base
WORKDIR /app
COPY package.json .
COPY bun.lockb .
RUN bun install
COPY . .
EXPOSE 3000
CMD ["bun", "--bun", "run", "dev"]
以下で実行。タグ名は任意で。
$ docker build . -t bun-docker-example
$ docker run -p 3000:3000 -it bun-docker-example
localhost:3000で動いているか確認。
あとがき
ミスなどあればコメントで指摘いただけると助かります・・！
Discussion