Next.jsをdocker-compose upしたい！

はじめに

最近、開発環境をすべてdockerで完結させれればローカルが綺麗な状態に維持できる事に気がついたのでDockerでやりたがりがちです。
そこで、話題のNext.jsをdocker-composeで立ち上げてみましたので、自分用備忘録として残して置こうと思います

環境

macOS High Sierra v10.13.6
Docker version 19.03.8
docker-compose version 1.25.5

実装

docker上で全部完結させたいです

準備

新しくプロジェクト用ディレクトリを作り、その下に下記２つのファイルを置いてください。
Dockerfile と docker-compose.yml です。
docker-compose.yml の command にあるディレクトリ移動コマンドは、プロジェクトの名前に応じて適宜変更してください。今回は sample-app とします。

Dockerfile

FROM node:14.15.3-alpine
WORKDIR /usr/src/app

docker-compose.yml

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

現状です

$ ls
Dockerfile  docker-compose.yml

create-next-appコマンドをインストール

create-next-appコマンドをインストールします。

$ docker-compose run --rm node npm install create-next-app

create-next-appコマンドを実行

これでnextアプリを作ります。
create-next-app は create-react-app と違ってインストール先のディレクトリ指定できないようなので、アプリ名は docker-compose.yml の command で指定したディレクトリ名と同じにしてください
（もし、インストール先のディレクトリ指定できる場合は教えて下さい。。）

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

docker-compose up 実行

無事にnext-appのインストールが完了したら、アプリが起動できるはずです。
Welcomet to Next.js! が出れば成功です。

$ docker-compose up

終わりに

今回はdocker-composeを使ってnext.jsの開発環境を構築しました。
docker-composeを使うと、APIコンテナ等と連携できるので、とても便利だなと思っています。
create-next-appコマンドもディレクトリ指定できるようにならないかな。