Zenn
🐳

DockerでNext.js + Storybookの開発環境を作る

2023/12/31に公開
Docker
Next.js
Storybook
docker-compose
Dockerfile
tech

概要

DockerでNext.js + Storybookの環境構築を作るときにあまり記事がなかったので、参考までにこの記事を残すことにします。

https://github.com/MSK1206/docker-with-nextjs-storybook-example

1. ディレクトリの作成

  • ディレクトリ名は任意でOKですがわかりやすい名前が良いです。
    この記事では、docker-with-nextjs-storybook-example とします。
terminal
mkdir docker-with-nextjs-storybook-example
  • 作成したディレクトリに移動します
terminal
cd docker-with-nextjs-storybook-example

2. Dockerfile と docker-compose.yml の作成

  • Linux,Mac をお使いの方はおなじみのtouchコマンドで作りましょう。
terminal 
touch Dockerfile docker-compose.yml docker-compose-storybook.yml

2-1. Dockerfileの中身を書く

Dockerfile
FROM node:20.10.0-alpine

WORKDIR /app

RUN npm install -g npm@10.2.5

2-2. docker-compose.ymlの中身を書く

docker-compose.yml

docker-compose.yml
version: '3.8'

services:
  app:
    container_name: next-app
    build:
      context: .
    tty: true
    environment:
      - WATCHPACK_POLLING=true
    volumes:
      - ./next-app:/app
    ports:
      - '3000:3000'
    command: sh -c "npm run dev"

docker-compose-storybook.yml

docker-compose-storybook.yml
version: '3.8'

services:
  app:
    container_name: storybook
    build:
      context: .
    tty: true
    environment:
      - WATCHPACK_POLLING=true
    volumes:
      - ./next-app:/app
    ports:
      - '6006:6006'
    command: sh -c "npm run storybook"

3. imageを構築する

terminal
docker-compose build

4. Next.js のインストール

対話形式に沿ってインストールするか、以下の様にoptionsを予め指定する方法があるのでお好きにどうぞ！

docker-compose run --rm app sh -c 'npx create-next-app@latest . --ts --tailwind --eslint --app --src-dir --import-alias @/* --use-npm'

※options を指定してインストールする場合は公式のAPIリファレンスを参照し適宜変更してください。

5. Storybook のインストール

docker-compose run --rm app npx storybook@latest init

docker-compose run --rm app npx storybook@latest add @storybook/addon-styling-webpack

6. コンテナを起動する

6-1. Next.js を動かす

docker-compose up

localhost:3000 でアクセスできれば OK です。

6-2. Storybook を動かす

docker-compose -f docker-compose-storybook.yml up

localhost:6006 でアクセスできれば OK です。

最後に

docker-compose.ymlを[1]と[2]に分けることで、あれ動かないぞ～？とならなくて済むようになります。
もし詳しい方がいらっしゃられましたら、こう作った方が絶対にいいよって方法があればご教授頂けましたら幸いです。

今日は大晦日です！

それでは皆さまも良いお年をお迎えください。

脚注

  1. docker-compose.yml ↩︎

  2. docker-compose-storybook.yml ↩︎

Discussion