Zenn
🟩

Docker+Bun+Next.js

2024/05/03に公開
Docker
Next.js
Bun
tech

概要

とりあえず、Docker Composeを使って Bun+Next.jsを動かすところまで。

実行環境

  • macOS 14.4.1（apple silicon)
  • docker desktop: 4.29.0

Bunとは

速いと噂のJavaScriptランタイム。
Nodeとか、Denoとかと同じジャンル。

Bun — A fast all-in-one JavaScript runtime

参考: https://zenn.dev/ak/articles/c21609fd3b0fdc

環境構築

  • ディレクトリ構成は以下
.
├── README.md
├── compose.yaml
└── front
    ├── dockerfile
    └── webapp

  • 開発用コンテナ作成のため、以下のdockerfile, compose.ymlを作成

    • 公式がDocker Hubに公開しているBunのイメージもあるが、package.jsonがある前提=開発済みのプロジェクトを動かす前提 だと思われる
    • デプロイ時に公式のdistrolessコンテナを使うのが良いかと
    • Containerize a Bun application with Docker | Bun Examples

  • dockerfile

    • debian:bookworm-slimにbunのインストールだけをしたもの
    • curlなどもインストール後は除外するので、必要であればインストールする
FROM debian:bookworm-slim as builder

RUN <<EOF
apt update 
apt install -y curl unzip
curl -fsSL https://bun.sh/install | bash
EOF

FROM debian:bookworm-slim
COPY --from=builder /root/.bun/bin/bun /root/.bun/bin/
ENV PATH=/root/.bun/bin:$PATH
  • compose.yaml
services:
  web:
    build: 
      context: ./front
      dockerfile: dockerfile
    container_name: react-container
    ports:
      - "3000:3000"
    volumes:
      - ./front/webapp:/webapp
    working_dir: /webapp
    tty: true
  • コンテナビルド&起動
docker compose up -d --build
  • bunのインストール確認
docker compose exec web bash
bun --help

docker compose exec web bash
bun create next-app

対話形式でプロジェクトが作成される。
プロジェクトはカレントディレクトリ、他の設定は全部Yesにしているが、お好みで。

✔ What is your project named? … .
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes # Yesでappディレクトリはsrc/appとなる
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … Yes # プロジェクトルートからのパスを「@/components/button」などでimportできるようになる
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in /app.

実行

docker compose exec web bun --bun run dev

Discussion