Docker+Next.jsの開発環境構築①

はじめに

最近新しいMacを買いました。ローカル環境をクリーンな状態で保ちたい＆Dockerをもっと使いこなせるようになりたいと思い記事を書きました。

DockerのみPCにインストールされていればフロントエンドの環境構築&開発ができるようになります。コンテナで環境構築して、開発時はコンテナに入って作業するイメージです。これによって開発者間での環境差異が生じなくなるのではと思っています。

本記事ではフロントエンドの環境を構築できるところを範囲にして執筆します。

当記事の前提バージョン

ソフトウェア	バージョン
Next.js	14.0.4
Visual Studio Code	1.84.2
Node.js	20.10.0
npm	10.2.3
docker	24.0.6

フォルダの作成

sample-appの配下にfrontend,backend,dbなどのディレクトリを作成する構成を想定しています。


mkdir sample-app
cd sample-app
mkdir frontend

compose.ymlの作成


touch compose.yml

frontendフォルダにDockerfileを作成


touch Dockerfile

Dockerfileを記述

後にコンテナの中でcreate-next.appを行います。その際に今回のDockerfileは一度削除することになります。そのため現段階ではDockerイメージのビルドを実行できる最小限の記述をしておきます。


# ベースイメージを指定
FROM node:21-alpine

# 作業ディレクトリを設定
WORKDIR /app

compose.ymlを記述

バインドマウントの設定を入れることでホストマシン(ローカル)での変更をコンテナにも反映しています。

バインドマウントの利用

バインドマウントの利用。

https://matsuand.github.io/docs.docker.jp.onthefly/storage/bind-mounts/

WATCHPACK_POLLING=trueにすることで、WebpackのWatchpackモジュールがファイルシステムの変更をポーリングします。この設定により、開発中にソースコードの変更をリアルタイムで反映することができます。


services:
  frontend:
    build:
      context: ./frontend/
      dockerfile: Dockerfile
    volumes:
      - ./frontend:/app
    ports:
      - 3010:3000
    environment:
      - WATCHPACK_POLLING=true

フロントエンドコンテナの起動&シェルに入る


docker compose run frontend sh

Dockerfileの削除

以下はコンテナの中での作業になります。フロントエンドコンテナの起動時にshellに入っているので下記のコマンドを実行でも、VS Codeのリモートエクスプローラー上での実行でも構いません。

同一ディレクトリにファイルがあるとnpxコマンド実行時にコマンド実行ができないため、この操作が必要になります。


rm ./Dockerfile

Next.jsのアプリケーション作成

以下のコマンドを実行後にtailwindを使用するかなど確認されます。私はtailwindやsrcディレクトリを使用したかったのでyesで回答しました。

これにてローカル環境にnode等をインストールすることなく、コンテナ上でNext.jsのアプリが作成できました。


npx create-next-app . --typescript

Dockerfileの再作成


touch Dockerfile

Dockerfileを記述


# ベースイメージを指定
FROM node:21-alpine

# 作業ディレクトリを設定
WORKDIR /app

# キャッシュ利用で効率化するために別でコピー
COPY package.json package-lock.json ./

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

# 依存関係をインストール
RUN npm install

# アプリケーションをビルド
RUN npm run build

# ポート番号を指定
EXPOSE 3010

# アプリケーションを起動
CMD ["npm","run","dev"]

フロントエンドコンテナの起動

一度コンテナから出ます。再度compose.ymlがあるディレクトリで以下のコマンドを実行します。


docker compose up frontend --build

下記のようにローカル環境でNext.jsのアプリが起動することが確認できました。