ちょっと最近フロント開発をする必要があり、サクッと動作確認するための環境をdockerで作れる準備をしようと思いました。
過去reactの勉強をしていた経験もあり、SSR・SSGも簡単にできそうなnext.jsを選択しました。

Next.js by Vercel – The React Framework

今回はdocker + next.jsの初期環境構築の手順をまとめていこうと思います。
本手順でうまくいかない、という場合はお手数ですがコメントいただけましたら確認しますのでよろしくお願いいたします。

注意)docker、docker-composeのインストールなどは終わっている前提です。

動作環境

• OS : ubuntu 18.04
• docker : 19.03.8
• docker compose : 1.29.2

設定ファイルの内容

以下設定ファイルの内容です。

Dockerfile

FROM node:16.13.2
WORKDIR /usr/src/app

USER node

バージョンを指定しているのは作業時点でNode.jsの推奨版が16.13.2だったからです。
以下から確認できますのでその時の推奨版にしていただけたら良いかと思います。

Node.js

↓こんな感じ。

あと、「USER node」は指定してあげないとpermission diniedが出て後続の作業がうまくできなくなるので入れてください。
詳細は以下の記事で。

dockerでcreate-next-appしたらglob error Error: EACCES: permission deniedが出た

docker-compose.yml

version: '3'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/usr/src/app
    command: sh -c "cd sample-app && npm run dev"
    ports:
      - "3000:3000"

上記「sample-app」の部分は作成するアプリケーションの名前にしていただけたらと思います。

コンテナとアプリの作成

ファイルを2つ作成できたら以下のコマンドを実行します。
create-next-appがnext.jsのアプリケーションの作成コマンドです。

docker-compose run --rm app npx create-next-app sample-app

ここで先にdockerのコンテナを作成してから「sample-app」というディレクトリが作成されるはずです。

ホットリロードの設定

これであとはupするだけですが、docker環境の場合？このままだとホットリロードが効きません。
※ホットリロードとはエディタで行った変更を自動で画面にも反映する機能です。

なので、その前にホットリロードの設定をしておきます。
create-next-appで作成されたディレクトリ内に入り、中にある「next.config.js」を以下のように修正しましょう。

module.exports = {
 reactStrictMode: true,
 webpackDevMiddleware: config => {
 config.watchOptions = {
   poll: 800,
   aggregateTimeout: 300,
 }
 return config
 },
}

これで起動時にホットリロードされるようになります。

next.jsでホットリロードされないときの対処法

サーバーの起動

あとはサーバーの起動だけですので以下コマンドを実行してください。

docker-compose up -d

これでnext.jsのデフォルトページが作成されるはずです。
http:localhost:3000にアクセスしてみましょう。

試しにpages/index.jsの内容を変更して画面を更新してみてください。
画面更新をせずともそれが反映されていればホットリロードの設定もできています。

お疲れ様でした！

ハマったときに便利なコマンド

上記の通りにやっていただけたら記事執筆時点ではスムーズにイケるはずです。
しかし、実際はここまでくるのに結構苦労しました。

何度かコンテナを削除したりしたので、そのときに何度も実行したコマンドもメモしておきます。

コンテナやボリュームなどもすべて一括で削除

docker-compose down --rmi all --volumes --remove-orphans

これを実行すると一発でコンテナと関連するものをすべて削除します。
以下参考にしましたが大変助かりました、ありがとうございます。

《滅びの呪文》Docker Composeで作ったコンテナ、イメージ、ボリューム、ネットワークを一括完全消去する便利コマンド

前にreactの環境構築をしていたときにも思ったのですが本当にフロントって開発環境の構築で躓くことが多いです…。
だからこそうまくいった手順を残しておかないと不安になるので定期的に残しておこうと思います。

読んでいただきありがとうございました！