Dockerで構築したNext.jsの開発環境に、Storybookを導入する

最近Dockerで構築したNext.jsの開発環境にStorybookを導入して遊び始めたので、その手順を忘れないうちに残しておこうと思います(少し詰まったところもあったので…)。
ついでなので、簡単にですがNext.jsプロジェクトを作成するところから書いていきます。

使用環境

• Windows10 Pro
• Docker version 20.10.17-rd

(前準備)Next.jsのプロジェクトを作成

まずはNext.jsのプロジェクトを作成するため、Dockerfileとdocker-compose.ymlを作成します。
初期状態のディレクトリ構成はこんな感じ(srcディレクトリは空です)↓

.
├ docker
|    ├ Dockerfile
|    └ docker-compose.yml
└ src

• Dockerfile

Dockerfile

FROM node:18.9.0-alpine3.16

WORKDIR /usr/src

RUN npm install -g npm@latest && npm install create-next-app

• docker-compose.yml

docker-compose.yml

version: '3'
services:
  app:
    build: ./
    container_name: next
    tty: true
    volumes:
      - ../src:/usr/src
    ports:
      - "3000:3000"
      - "6006:6006"
    command: sh -c "npm run dev"

上記の準備を終えたら、次のコマンドを実行します。

PowerShell

docker-compose build
# TypeScriptを使用するので「--ts」を付けてます
docker-compose run --rm app npx create-next-app ../src --ts

これでアプリのひな型がsrcディレクトリ内に作成されました。

Storybookの導入

ここから本題です。

docker-compose up -d
docker exec -it next sh

まずはコンテナを起動して中に入り、

npx sb@latest init
npm run storybook

上記コマンドでStorybookを導入、そして起動するだけ。　
localhost:6006にアクセスすると、Storybookが表示されていることを確認できるかと思います。

試しにコンポーネントを実装してみる

実際にコンポーネントを実装してみて、Storybookで表示されるかを見てみましょう。

srcディレクトリ内にcomponents/SampleButton/index.tsxというファイルを、src/storiesディレクトリ(create-next-app時に作成されているはずです)内にSampleButton.stories.tsxファイルをそれぞれ作成し、以下のように実装します。

components/SampleButton/index.tsx

type SampleButtonProps = {
  backgroundColor: string;
  color: string;
  border: string;
}

export const SampleButton = (props: SampleButtonProps) => {
  const {backgroundColor, color, border} = props

  return (
    <button style={{backgroundColor: backgroundColor, color: color, border: border}}>
      SampleButton
    </button>
  )
}

stories/SampleButton.stories.tsx

import { ComponentMeta } from "@storybook/react";
import { SampleButton } from "../components/SampleButton";

// ファイル内のStoryの設定
export default {
  // グループ名
  title: 'SampleButton',
  // 使用するコンポーネント
  component: SampleButton,
} as ComponentMeta<typeof SampleButton>

export const RedSample = () => {
  return (
    <SampleButton {...{backgroundColor: "#ff0000", height: "36px", width: "100px"}}>
      Red
    </SampleButton>
  )
}

再度Storybookを起動して、localhost:6006を見に行くと…

新しく作成したコンポーネントを、Storybookで表示することができていました！

おわり

以上、DockerでNext.jsの開発をする際にStorybookも導入してみる手順でした。
ちなみにどこに一番時間がかかったというと、docker-compose.ymlに- "6006:6006"の記述が抜けていて、「なんでつながらないの？？ローカルだとできるのにぃ…」と半日くらい頭を抱えていたところです(ローカルでやりなさいよ…)。

参考資料

TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発