WSL2内にNext.jsが動作するDocker環境を用意した

これはなに？

以前に Node.jsが動作するDocker環境を作成しました

そこから、Next.jsが動作する環境にしたいと思います

環境

• Windows11
  • WSL2
    • Ubuntu 20.04
  • Docker Desktop
• VS Code
  • Remote WSL

新規プロジェクト作成

以下のコマンドで、対話しながらプロジェクトを作成していきます

$ docker compose run --rm app yarn create next-app my-app

余分なファイルを削除＆コピー

前回までので、nodeが動くことを確認するために作成したファイルを削除します

• .gitignore
• main.js
• package.json
• yarn.lock
• node_mobules

作成されたmy-appフォルダの中身をルートディレクトリにコピーします
my-appフォルダは必要なくなったので削除します

$ docker compose run --rm app rm -rf my-app

以下のようなフォルダになります

モジュールのインストール

$ docker compose run --rm app yarn install

Next.jsのビルド

$ docker compose run --rm app yarn next build

コンテナ起動

作成したイメージからコンテナを作成して起動します

$ docker compose up

ブラウザで http://localhost:3000にアクセスすると以下のような画面が表示されます

最後に

誰かの参考になれば幸いです