はじめに

Next.jsの学習や検証用に色々と使いまわせる開発環境がほしかったので、
Docker Composeで簡易的なローカル開発環境をGitHubのテンプレートリポジトリ化しました。

今回作成したGitHubのリポジトリをテンプレートとして、
自分の新しいリポジトリをいくつも作成できるので、学習用やら検証用に使い捨てもできて便利

使い方はこちら
環境構築した手順などはこちら

テンプレートリポジトリとは

GitHubのドキュメントはこちら

既存のリポジトリと同じディレクトリ構造とファイルを持つ新しいリポジトリを生成できます。

フォークと似てますが、いくつか違いがあります。

フォークには親リポジトリのコミット履歴全体が含まれるが、テンプレートから作成されたリポジトリは単一のコミットから始まる
フォークへのコミットはコントリビューショングラフに表示されないが、テンプレートから作成されたリポジトリへのコミットはコントリビューショングラフに表示される
フォークは既存のプロジェクトにコードを提供するための一時的な方法になる可能性があるが、テンプレートからリポジトリを作成すると、新しいプロジェクトがすぐに開始される

リポジトリ

こちらのテンプレートリポジトリから自分用のリポジトリを作成して、セットアップすればサクっと使えると思います

環境構築時点での各種バージョンはこちら

  "dependencies": {
    "@types/node": "18.11.9",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.9",
    "eslint": "8.28.0",
    "eslint-config-next": "13.0.4",
    "next": "13.0.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.9.3"
  }

使い方

前提条件

Gitインストール済み
GitHubアカウント作成済み
Docker Desktop for Mac(Windows)インストール済み

テンプレートから自分用のリポジトリ作成

リポジトリの[Use this repository]をクリックして、自分用のリポジトリを作成

同じディレクトリ・ファイル構造のリポジトリが作成される
作成時に「Include all branches」にチェックを入れなければコミット履歴も全て自分のコミットのみ

Git clone

作成したリポジトリをローカルにclone

% git clone https://github.com/作成した自分のリポジトリ

Docker環境の作成・起動

バックグランドで実行したい場合は-dオプションで

% cd 作成したプロジェクトのルートディレクトリ
% docker-compose up -d

依存パッケージのインストール

Next.jsプロジェクトにnode_modulesのインストールが必要

% docker-compose exec app yarn

# or

% docker-compose exec app bash
> yarn

Next.jsの開発サーバを起動

% docker-compose exec app yarn dev

# or

% docker-compose exec app bash
> yarn dev

画面表示

ブラウザでlocalhost:3000を開けば画面が表示されます

あとはご自由にお使いください!

環境構築した手順とざっくり解説

各種細かいところは、詳細に解説してくださっている記事もたくさんあると思いますので、そちらご参照ください

ディレクトリ・ファイル構成

以下のディレクトリ・ファイルを作成

.
├── node
│   └── Dockerfile　
├── src
└──　　docker-compose.yml

Dockerfile

nodeコンテナ用の設定ファイル

FROM node:lts-bullseye-slim
WORKDIR /app

FROM node:lts-bullseye-slim

DockerHubから「node:lts-bullseye-slim」のイメージを取得

イメージの名称の各意味はこんな感じ

node:	lts	bullseye	slim
nodeの	長期間サポートされるバージョンで	ベースとなるOSがDebianのv11で	不要なパッケージを除いた軽量なイメージ

bullseyeはDebianのバージョンの名称で、バージョンごとになんか色々カッコイイのがついている

名称	バージョン
bullseye	v11
buster	v10
stretch	v9

WORKDIR /app

コンテナ内の作業ディレクトリを指定、存在しない場合は自動で作成される

% docker compose exec app bash

上記コマンドで、コンテナ内に入ると/appにいることになる

root@XXXXXXXX:/app# pwd
/app ← 現在のパス

docker-compose.yml

Docker Composeの設定ファイル

version: "3"
services:
  app:
    build:
      context: .
      dockerfile: ./node/Dockerfile
    tty: true
    volumes:
      - ./src:/app
    ports:
      - "3000:3000"
    # If you want to run `yarn dev` at docker compose startup
    # command: sh -c "yarn dev"

version: "3"

docker-composeで使用するバージョン

services:

複数サービスの定義をしていく、今回は1つのみ

app:

サービス名、今回はappとした

build:
　context: .
　dockerfile: ./node/Dockerfile

contextはdocker buildを実行する時のワーキングディレクトリ
こちらの記事に詳しく書いてくださっており参考になります。

dockerfileはDockerfileのパスを指定

tty: true

dockerを起動した際に、サーバの起動などずっとフォアグラウンドで実行しているプロセスがないと、起動してすぐにコンテナが停止してしまう

コンテナを起動したままにするために設定

volumes:
　- ./src:/app

ホスト側のディレクトリ./srcを、コンテナのディレクトリ/appにマウント（バインドマウント）
srcディレクトリの中に後ほどNext.jsをインストールする

ports:
　- "3000:3000"

「ホスト側のポート：コンテナ側のポート」

Next.jsの開発サーバのポートはデフォルトで3000なので、コンテナ側のポート(右側)は3000
今回はホスト側(左側)も3000で統一してlocalhost:3000で画面が開けるように設定

ホスト側を3001などに設定した場合はlocalhost:3001で画面が開ける

src

Next.jsを後ほどインストールするための空のディレクトリ

Next.jsのインストール

ファイル・ディレクトリの事前準備ができたら、Dockerを起動しNext.jsをインストールする

# Docker環境作成・起動
% docker-compose up

# コンテナに入る
# WORKDIRで設定した/appにいる状態
% docker-compose exec app bash

# Next.jsインストール
> yarn create next-app . --typescript

docker-compose.ymlの設定で、
コンテナ内のappディレクトリはホスト側のsrcディレクトリとマウントされているため、
appディレクトリ内にインストールしたNext.jsがホスト側のsrcディレクトリ上でも同期されている
　

yarn create next-app . --typescript

--typescriptオプションでTypeScritptプロジェクトとしてインストール

また、「.」でカレントディレクトリ内にファイルを展開している

.
├── node
│   └── Dockerfile　
├── src
│     └── [Next.jsのファイル]
└──　　docker-compose.yml

　
「.」を指定しない場合は、
コマンド実行時にプロジェクト名が対話形式で聞かれ、入力したプロジェクト名でディレクトリが作成されてNext.jsがインストールされる

.
├── node
│   └── Dockerfile　
├── src
│     └── [プロジェクト名]
│             └── [Next.jsのファイル]　　
└──　　docker-compose.yml

画面表示確認

yarn dev

あとはyarn devしてlocalhost:3000で画面が開けるか確認

以上で完了！

Docker + Next.js ローカル開発環境をテンプレート化した