docker-composeでNext.jsの環境構築

概要

• docker-composeでNext.jsの環境を作った時の備忘録です。

手順

1. ルートディレクトリ作成

• 任意の名前でディレクトリを作成します。
• 以降はディレクトリ内で作業します。

2. Dockerfile作成

• Dockerfileを作成します。
• nodeのバージョンはここで調べて適切なバージョンを指定します。

FROM node:20.5.1
WORKDIR /usr/src

3. docker-compose.yml作成

• docker-compose.ymlを作成します。

version: '3'
services:
  front:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/usr/src
    ports:
      - 3000:3000
    container_name: front
    tty: true

• 現状はこのようなディレクトリ構成になります。

hoge
├── docker-compose.yml
└── Dockerfile

4. コンテナ起動

• 一旦この状態でコンテナを起動します。

docker-compose up -d

5. アプリ構築

• コンテナに入ってアプリを構築します。

docker-compose exec front sh
yarn create next-app

• 対話型で作成していくので、用途に合わせて選択していきます。
• 私は以下で作成しました。
  • What is your project named? -> front（任意の名前）
  • 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
  • Would you like to use App Router? > Yes
  • Would you like to customize the default import alias? > No

6. アプリ起動

• アプリの構築が終わったら起動します。

cd front # 作成したプロジェクト内に移動
yarn dev

• http://localhost:3000/ にアクセスして画面が表示されればOK。
  

7. docker-compose.yml更新

• 最後にコンテナ起動時に自動でアプリが立ち上がるようにdocker-compose.ymlを更新します。

version: '3'
services:
  front:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/usr/src
    ports:
      - 3000:3000
    container_name: front
    command: sh -c "cd front && yarn dev" # ← ここを追加
    tty: true

まとめ

• コンテナ起動 -> 対話形式でのアプリ構築なので、もっと効率の良い方法がありそうです。
• 良い方法ご存知の方教えていただけると幸いです。