Docker ComposeでNext.js開発環境構築

はじめに
Next.jsアプリ作成
Dockerfile作成
docker-compose.yml作成
コンテナ実行
参考

はじめに

Next.jsの開発環境をDockerで構築していきます。

DockerfileでNext.jsのアプリが実行されるコンテナのイメージを用意し、Docker Composeで実行する方法をとります。そうすることでバックエンドとしてAPIサーバを追加した時にもdocker-composeコマンドを打つだけで開発環境が実行できるようにします。

Dockerについては下記を参考してください。

いまさらDocker入門

はじめにいまさらながらDockerについてまとめてみました。なるべく動かしながらDockerを理解していきたいと思います。DockerとはDockerとは、コンテナを活用した開発・運用を可能にするソフトウェアです。コンテナを使えるツールとい...

Docker Composeについては下記を参考にしてください。

【超基礎】Docker Compose

はじめにDocker Composeについて、基本的な使い方の解説と具体的な例としてDjango/PostgreSQLアプリを構築をしてみたいと思います。Dockerについてはこちらで解説しています。環境DocerとDocker Compo...

Next.jsアプリ作成

まずはNext.jsのアプリを作成します。

試しにNext.jsの公式リポジトリからサンプルアプリを作成してみます。

npx create-next-app sample-app-blog --use-npm --example https://github.com/vercel/next.js/tree/canary/examples/blog

アプリを作成するとこのようなディレクトリ構成になります。

.
└── sample-app-blog
    ├── README.md
    ├── next.config.js
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── pages
    ├── public
    ├── scripts
    ├── styles
    └── theme.config.js

アプリの作成についてはこちらを参考にしてください。

【Next.js初めの一歩】アプリを作成する

はじめにNext.jsでアプリを作成する方法を紹介します。Next.jsでアプリ作成手動で作成することもできますが、create-next-appを利用して自動でアプリを作成することが推奨されています。npmでアプリを作成するには以下のよう...

Dockerfile作成

次にNext.jsアプリを実行するコンテナイメージの元となるDockerfileを作成します。

nodeの公式イメージを利用して、パッケージのインストールをします。

FROM node:14.17.4-alpine

WORKDIR /usr/src/app/next

COPY /sample-app-blog/package*.json ./

RUN npm install

Node - Official Image | Docker Hub

Node.js is a JavaScript-based platform for server-side and networking applications.

docker-compose.yml作成

続いて、docker-compose.ymlを作成します。

version: "3"
services:
  nextjs:
    build: .
    ports:
      - "3000:3000"
    container_name: nextjs-app
    volumes:
      - ./sample-app-blog:/usr/src/app/next
    command: npm run dev

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

.
├── Dockerfile
├── docker-compose.yml
└── sample-app-blog
    ├── README.md
    ├── next.config.js
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── pages
    ├── public
    ├── scripts
    ├── styles
    └── theme.config.js