エンジニア管理ツールでも作る②Next.js環境用意

前回

構想を練って下準備までしました。

今回の目標

DockerでNext.js環境を作る

Dockerファイル用意

# front/Dockerfile
FROM node:22

ENV NODE_ENV=development

WORKDIR /app

Dockerfileはこちら。
nodeのバージョンは22を使用しています。

# docker-compose.yml
version: '3'
services:
  front:
    build: front
    image: sk-front
    tty: true
    volumes:
      - ./front:/app
    ports:
      - "3001:3000"

docker-compose.ymlはこちら。
先ほどのDockerfileをビルドして、sk-frontという名前のDockerイメージとして保存します。

tty: trueとしておくと、コンテナがタスクを実行し終えても残ってくれます。
今のイメージは「Node環境を作る」がタスクなので、これがないと「Node環境作りました。では！」と消えていきます。

volumesでコンテナの中と同期するファイルを設定します。
今回はfrontディレクトリの中身全てを、コンテナ内の/appディレクトリと同期させています。
volumesの設定の仕方は色々あるんですが、今回はバインドマウントってやつです。

portsはNext.jsが3000番ポートを使用するので、コンテナの3000ポートとホスト(私のPC)の3001ポートを繋げています。
ポート3000はよく被るからちょっとずらしただけで、別にホストの3000ポートに繋げても構いません。

Dockerコンテナ立ち上げ

ここまでできたらコンテナを立ち上げていきます。

docker compose up -d

docker compose upでサービス(コンテナ)が立ち上がります。
初めての場合、build(イメージの作成)も一緒にやってくれます。
逆にいうと次回からは勝手にbuildしてくれないので、Dockerfileを編集したら

docker compose build

をしましょう。

-dはデーモンのdです。
裏で動くようなプロセスのことをデーモンといいます。悪魔ではないです。
これをつけないとターミナルがこのプロセスで占領されて次のコマンドが打てなくなります。(Ctr+Cで止まります)

docker compose ps

でコンテナを状態を確認できます。

NAME            IMAGE      COMMAND                   SERVICE   CREATED      STATUS         PORTS
skill-front-1   sk-front   "docker-entrypoint.s…"   front     4 days ago   Up 8 seconds   0.0.0.0:3001->3000/tcp

STATUSがUPになっていても「コンテナが立っている」というだけで「準備OK」という意味ではないので注意が必要です。
まだ必要なものをダウンロードしている最中かもしれません。

そんな時は

docker compose logs -f front

を実行してあげると、ログを眺めることができます。
流れゆくログが止まったら大体準備OKと考えていいです。
-fがログをリアルタイムで見るためのオプションです。
Ctr+Cで止まります。

Dockerコンテナに入る

docker compose exec front bash

execはコンテナに対してコマンドを送信することができます。
上記コマンドではfrontコンテナに対してbashコマンドを実行しています。
これでコンテナ内のbashを起動して、対話形式でコマンドを実行できるようになります。
exitやらCtr+Dで抜けられます。

Next.jsインストール

公式ドキュメントのまんま進めます。

npx create-next-app@latest

What is your project named? my-app
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 to use `src/` directory? *No / Yes
Would you like to use App Router? (recommended) No / *Yes
Would you like to customize the default import alias (@/*)? *No / Yes

my-appディレクトリが作成されて、その中に色んなファイルが置かれていと思います。
今回は/appをディレクトリをワーキングディレクトリにしたいので、my-appディレクトリにはご退場願います。

mv ./my-app/* .
mv ./my-app/.eslintrc.json .
mv ./my-app/.gitignore .
rm -r ./my-app

Next.js起動

開発モードで起動します。

npm run dev

> app@0.1.0 dev
> next dev
  ▲ Next.js 14.2.3
- Local:        http://localhost:3000

✓ Starting...

みたいなログの通り、ポート3000で起動します。
ここでのlocalhostはfrontコンテナのlocalhostのことです。

当分前にdocker-compose.ymlにて

    ports:
      - "3001:3000"

と設定した通り、コンテナの3000とローカルPCの3001が繋がっています。

localhost:3001にアクセスしてみましょう。

ね、簡単でしょう？

docker-compose.yml修正

# docker-compose.yml
version: '3'
services:
  front:
    build: front
    image: sk-front
    volumes:
      - ./front:/app
    ports:
      - "3001:3000"
    command: 'npm run dev'

最後にdocker-compose.ymlを少し修正しておきます。

command: 'npm run dev'を追加しました。
これでdocker compose up -dをしたとき、このコマンドを実行してくれます。
つまりこのコンテナのタスクは「Node環境を作る」から「Node環境を作ってNext.jsサーバーを起動し続ける」になりました。
Next.jsサーバーが終了しない限り、このコンテナは残り続けてくれるのでtty: trueは不要になります。

次回

Python(Flask, Gunicorn)の環境構築