🍀

Next.js + TypeScript + Dockerを使った環境構築

に公開
Docker
Next.js
React
TypeScript
tech

Next.js + TypeScript + Dockerを使った環境構築

概要

Next.js の環境構築をする際に、ローカル環境を汚したくなかったので Docker コンテナ を使って環境を作ろうと思ったときのまとめ。できるだけ無駄なことがないように必要最低限のもので構築しています。

手順

まずは作業用のディレクトリを作成します。

$ mkdir nextjs-app
$ cd nextjs-app

ここにDockerfileを作ります。

$ touch Dockerfile

Dockerfileの中身は以下です。nodeのバージョンは構築時に最新版だった17を使いました。

* Docker Hubのリンクは こちら

Dockerfileの中身は以下です。

FROM node:17-alpine

WORKDIR /opt/app

FROMでベースイメージを指定し、WORKDIRで作業ディレクトリを指定します。WORKDIRは存在していなければ作成されます。

次にdocker-comopse.ymlをつくります

$ touch docker-compose.yml

docker-comopse.ymlの中身は以下です。

version: '3'

services:
  app:
    build: ./
    volumes:
      - ./src:/opt/app
    ports:
      - '3000:3000'

ここから以下を実行してNext.jsをインストールします。

$ docker-compose run --rm app yarn create next-app . --ts

これでNext.jsがsrc/配下にインストールされました。

最後にコンテナ起動時に実行するスクリプトをENTRYPOINTとしてDockerfileに記述します。
今回はシェルスクリプトファイルを作ってそれを実行することとします。

$ cd src
$ touch setup.sh

setup.shの中身は以下です。

set -eu

yarn && yarn dev

DockerfileのENTRYPOINTに実行コマンドを記述します。

FROM node:17-alpine

WORKDIR /opt/app

ENTRYPOINT ["sh", "./setup.sh" ]

これで設定は完成です。

$ docker-compose build
$ docker-compose up -d

を実行後 http://localhost:3000 にアクセスして以下のような画像が表示されていれば完成です。

参考

Discussion