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

さっと Web アプリを作って試したい時に、Node.js のバージョンなどで引っかかり出鼻をくじかれることが多い。格闘している内にアプリ作成意欲が失われて… みたいなことになりやすく、Docker を使って時間をかけずに開発を始められるようにしたいところ。最近良く目にする Next.js も気になるし、はじめから TypeScript にしておいた方がいいのかもと思い始めている。更に、何か作る時に UI コンポーネントは必須だなーと思う。

というわけで Next.js + MUI + TypeScript の開発環境を Docker で作ってみよう。

FROM node

WORKDIR /app

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

この2つのファイルを作ってから

docker-compose build
docker-compose run --rm app sh -c 'curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=3  material-ui-master/examples/nextjs-with-typescript'
docker-compose run --rm app sh -c 'cd src | npm install'
docker-compose up

http://localhost:3000/ へアクセスすると下記が表示される。

下記を参考にした。

https://zenn.dev/temple_c_tech/articles/setup-next-on-docker#create-next-app

https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript

https://qiita.com/yyos/items/409784a040d20a2c2d4a

2022.11.23 追記

Mac + Docker Desktop なら問題なかったのだが、Windows + WSL2 の環境で試したところ、ホットリロードがめちゃくちゃ遅い現象が発生…

下記の対応をしたところ、変更検知からコンパイルまでは速くなったのだが、ブラウザでのアクセスがめちゃくちゃ遅い状況が続いている。あと、CPU負荷がかなり高い状態になってしまうのでそれも考えもの。

version: '3'
services:
  app:
    build:
      context: .
    tty: true
    ports:
      - "3000:3000"
    volumes:
      - ./src:/app
    environment:
      - WATCHPACK_POLLING=true
    command: sh -c "npm run dev"
[automount]
root="/home/mnt/"

なお、上記でマウント先を変更したら VSCode のターミナルで wsl コマンドでアクセスした時にいちいち移動する必要があるかと思ったが、マウント先を認識しているようで、新しいマウント先のカレントディレクトリを開いてくれた。

IT コメントを残す

コメントを残す