yamazaki.t
その他

Next.js on Dockerでの環境構築

その他
2023.09.25
この記事は約3分で読めます。

目次

  1. はじめに
  2. ディレクトリ構成とバージョン
  3. ビルドする
  4. Next.jsアプリを作成する
  5. 画面を確認する
  6. おわり

はじめに

インプルのヤマザキです。
DockerでNext.jsの環境構築を行なった方法をまとめました。
Dockerを使用することで、ローカル環境で他のプロジェクト等とバージョンの衝突を防ぐこともできますし、コンテナを簡単に作成、削除を行うこともできます。学習の際に使用することで必要なくなったらすぐに削除することができ他のプロジェクトに影響が出ないので便利です。ただDockerを使うというだけでハードルが上がりそうですが簡単なので試してみてください。

ディレクトリ構成とバージョン

最終的には下記のようなディレクトリ構成となります。

最終的なディレクトリ構成

├── docker-compose.yml
└── front
    ├── Dockerfile
    └── app

バージョン

Docker Compose v2.10.2
node v16.13.0
Next.js v13.4.19

docker-composeの作成

下記のコマンドでdocker-compose.ymlファイルとdockerfileディレクトリの中にDockerfileを作成します。

touch docker-compose.yml
mkdir -p front && touch front/Dockerfile

docker-compose.ymlの記述

docker-compose.ymlファイルを記述していきます。

version: '3.7'

services:
  front:
    build:
      context: ./front/
      dockerfile: Dockerfile
    volumes:
      - ./front/app:/usr/src/app
    command: 'yarn dev'
    ports:
      - "8000:3000"

Dockerfileの記述

front/Dockefileを記述していきます。

FROM node:16.13.0
WORKDIR /usr/src/app

Next.jsアプリを作成

yarn createでfrontディレクトリに作成します。

docker compose run --rm front yarn create next-app .

下記のようにSuccess!が出れば作成が成功しております。
今回はfrontディレクトリの中にappディレクトリが作成されています。

├─ yallist@4.0.0
├─ yaml@2.3.2
├─ yocto-queue@0.1.0
└─ zod@3.21.4
Done in 121.24s.
Success! Created app at /usr/src/app

画面を確認

dockerーcomposeを下記コマンドにて起動します。

docker compose up

localhost:8000にアクセスして、以下の画面が表示されていればNext.jsアプリの作成は完了です。

おわり

簡単にdockerでのNext.js環境の構築を行うことができました。
今回は、コンテナが一つのみですが、バックエンドやデータベースなどもdocker-compose.ymlファイルに追記していくことで増やしていくことができます。
local環境を汚すことなく作成できるので便利です。
ぜひ試してみてください〜！！

参考