Zenn
💡

Next.js + Bun + Docker で環境構築

2023/12/05に公開
Docker
Next.js
React
TypeScript
Bun
tech

概要

Next.jsの環境構築の備忘録

bun使っていきたいけど、ローカルに入れずにDockerで動かしたい
そのため無理やりDocker内でbun入れて、create-next-appしてみました

https://bun.sh/

環境

  • Next.js：v14.0.3（App Router）
  • Bun：v1.0.15
  • Docker：v24.0.6
  • Biome：v1.4.1
  • shadcn/ui：v0.1.0

bun(Docker内)でcreate-next-appしてみる

bunを入れてdockerを立ち上げる

docker-compose.yml
services:
  app:
    build: .
    container_name: app
    ports:
      - 3000:3000
    volumes:
      - ./:/app
    tty: true

FROM oven/bun:latestだけだと落ちてしまうので、以下の状態で一旦立ち上げる
多分もっといい方法がある

Dockerfile
FROM debian

RUN apt-get update && apt-get install -y \
    zip \
    unzip \
    curl

RUN curl -fsSL https://bun.sh/install | bash

WORKDIR /app

docker立ち上げ

docker compose up -d

コンテナに入る

docker compose exec app bash

create-next-app する

bunx create-next-app

✔ What is your project named? … [app名]
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … No
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No

オプションで設定する場合

bunx create-next-app [app名] --ts --tailwind --app --src-dir --use-bun --eslint No

※bun install でエラーが出た時 ↓

Dockerの設定確認

gRPC FUSEにチェックしておかないと、bun installで失敗するので注意
理由はよくわかっていないが、この辺りを参考にした

再度buildする

これで一旦基盤は完成したので、こちらに直してbuildしなおす

Dockerfile
FROM oven/bun:latest

WORKDIR /app

CMD ["bash", "-c", "bun dev"]

docker compose up --build -d

ここまでで本記事の本題は以上です
以下には環境構築で他におこなったことを記載しています

Git

初期化

git init

linter & formatter

Biome を入れました
以下の記事に詳細を書いています
https://zenn.dev/tataya/articles/15a6e7138cba2a

コンポーネントのデザイン

shadcn/ui を入れました
以下の記事に詳細を書いています
https://zenn.dev/tataya/articles/c14a0b4b0a04fe

Discussion