Bunで構築したNext.jsアプリケーションをDockerで立ち上げる

今回は、MacのARMアーキテクチャでBunを使い、Next.jsをDocker環境と接続する方法を解説します。Bunは非常に軽量で高速なJavaScriptランタイムですが、ARM環境でBunを使う場合、Dockerとの接続にいくつかの問題が発生することがあります。

まず、Mac環境（ARMアーキテクチャ）でNext.jsプロジェクトをBunを使って作成しました。現在のシステム情報とBunのバージョンは以下の通りです。

$ uname -m
arm64

$ bun --version
1.1.13

このように、ARM環境でBunを実行しているため、Docker環境との接続に一部互換性の問題が生じることがあります。

1. Bun環境でNext.jsを作成

まず、Bunを使ってNext.jsのプロジェクトを作成しました。コマンドは以下の通りです。

/tmp $ bun create next-app frontend
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
✔ What import alias would you like configured? … @/*

以下のdocker-compose.yml内での設定に響いてくるので示しておきます。

2. Dockerfileの作成

次に、Bunを使用するためのDockerfileを作成します。以下のDockerfileでは、最新のBun公式イメージを使用しています。

# 最新のBunの公式イメージを使用
FROM oven/bun:latest

# 作業ディレクトリを設定
WORKDIR /app

# パッケージリストをコピー
COPY package.json ./

# 依存関係のインストール（キャッシュを利用せず最新にするため）
RUN bun install --no-cache

# ソースコードをコピー（必要なファイルだけコピー）
COPY . .

# 開発サーバーを起動
CMD ["bun", "dev"]

このDockerfileを使ってDockerコンテナをビルドすることで、Bunを用いたNext.jsアプリケーションの開発環境が整います。

3. docker-compose.ymlの設定

次に、docker-compose.ymlを設定します。ここでは、ホットリロードを有効にするためにvolumesを使って、ローカルのソースコードをコンテナ内の/appディレクトリにマウントします。

services:
  frontend:
    build:
      context: frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/app

この設定により、ローカルで編集したコードがリアルタイムでDockerコンテナに反映されるようになります。

4. Linux環境でのSWCエラー問題

この構成でNext.jsを起動すると、以下のようなエラーメッセージに遭遇することがあります。

frontend-1  |   ▲ Next.js 14.2.11
frontend-1  |   - Local:        http://localhost:3000
frontend-1  |   - Environments: .env.local, .env
frontend-1  | 
frontend-1  |  ✓ Starting...
frontend-1  |  ⚠ Attempted to load @next/swc-linux-arm64-gnu, but it was not installed
frontend-1  |  ⚠ Attempted to load @next/swc-linux-arm64-musl, but it was not installed
frontend-1  |  ⨯ Failed to load SWC binary for linux/arm64, see more info here: https://nextjs.org/docs/messages/failed-loading-swc
frontend-1  | 
frontend-1 exited with code 0

これは、Next.jsがLinuxのarm64アーキテクチャ用のSWCバイナリを読み込もうとして失敗するために発生します。これを解消するためには、次の対応が必要です。

5. .dockerignoreファイルの設定

まず、次のファイルやディレクトリを.dockerignoreに追加します。これにより、ホスト環境の依存関係がDockerコンテナ内で干渉することを防げます。

node_modules
bun.lockb
.next/

これにより、Docker内で新たに依存関係をインストールし直し、環境差による問題を解消できます。

6. Volumeの調整

さらに、ソースコードと静的ファイルをDocker環境でホットリロードするため、docker-compose.ymlにvolumesとしてsrcとpublicディレクトリ、ライブラリの変更を反映させるためのpackage.jsonを指定します。

services:
  frontend:
    build:
      context: frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend/src:/app/src
      - ./frontend/public:/app/public
      - ./frontend/package.json:/app/package.json

この設定により、ローカルのsrcおよびpublicフォルダがDockerコンテナ内の対応するフォルダにマウントされ、リアルタイムで変更が反映されます。

7. 終わりに

この手順に従うことで、BunとNext.jsを使ったDockerベースの開発環境を簡単に構築できます。SWCエラーの対処法を含め、ホットリロード対応のVolume設定を導入することで、開発作業がより快適に進められるでしょう。