wsl2環境でnext.jsのDocker環境の構築

前提条件

wsl2環境でnode.jsがインストールされているかどうか

$ node -v
コマンド 'node' が見つかりません。次の方法でインストールできます:

node.jsのバージョンが出ない場合は、下記のコマンドで
Node.js の公式パッケージリポジトリを追加しますインストール

$ curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -

下記のコマンドでインストール

$ sudo apt update
$ sudo apt install nodejs

nodeとnpmがインストールされていることを確認

$ node -v
v18.19.1
$ npm -v
10.8.2

create-next-appをグローバルインストール

npm install -g create-next-app

next.jsを作成

$npx create-next-app@lastest test
✔ 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 your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for next dev? … No / Yes
✔ Would you like to customize the import alias (@/* by default)? … No / Yes
✔ What import alias would you like configured? … @/*

No / Yes はキーボードの矢印キー(▲▼)などのキーで選択
意味は下記のサイトを参照
https://zenn.dev/ikkik/articles/51d97ff70bd0da

docker-compose.ymlとDockerfileの作成
ディレクトリ構成は下記

test
　├── node_modules
　├── public
　├── src
　├── docker-compose.yml
　└── Dockerfile

docker-compose.yml

version: '3'
volumes:
  node_modules:

services:
  front:
    build:
      context: .
      dockerfile: ./Dockerfile
    container_name: front
    volumes:
      - .:/app
      - ./node_modules:/app/node_modules
    tty: true # コンテナ起動時に起動させつづける
    command: sh -c "npm install && npm run dev"
    ports:
      - 3000:3000

Dockerfile

FROM node:18.19.1

WORKDIR /app/

COPY package*.json ./

RUN npm install

# ソースコードをコピー
COPY . .

# コンテナのデフォルトコマンドを設定
CMD ["npm", "run", "dev"]

下記のコマンドで、コンテナの作成と起動をバックグランドで行う

docker-compose up -d

http://localhost:3000/
で動作確認をする

next.jsの環境をdockerで作成しようと思って、色々なサイトを見ても
上手く動かなく、30分近く調べてしまったので忘備録も込めて