Zenn
🎉

Docker × Next.js × TypeScriptの開発環境構築

2023/05/07に公開
Docker
Next.js
React
TypeScript
docker-compose
tech

前準備

docker composeが必要です。前もってインストールをお願いします。

プロジェクト用のディレクトリを作成します。
どこでも良いです。好きなところに作ってください。

$ mkdir nextjs-docker-app
$ cd nextjs-docker-app

Dockerの設定

Dockerfileを作成します。
場所は、infraというディレクトリにしました。

$ mkdir infra
$ cd infra
$ touch Dockerfile

Dockerfileは、下記のようにしました。

FROM node:18.16.0-alpine

WORKDIR /opt/app

nodeのバージョンは、2023/05/07時点でLTSである、18.16.0を指定しています。
　node.js

$ cd ../

docker composeの設定

docker-compose.ymlファイルを作成します。

$ touch docker-compose.yml

docker-compose.ymlの中身は下記のようにしました。

version: '3'

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

Next.jsアプリケーションを作成

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

作成中に、下記のような項目を聞かれます。

✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use Tailwind CSS with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Use App Router (recommended)? … No / Yes
✔ Would you like to customize the default import alias? … No / Yes

それぞれ、
ESLintを使いますか？
TailWind CSSを使いますか？
ディレクトリはsrc/にしますか？
App Routerを使いますか？
デフォルトのimportエイリアスをカスタマイズしますか？
っていう質問ですが、基本全部YesでOKです。

その後、Success! Created app at /opt/appと表示されればOKです！

実行した際に、下記のようなエラーが出た場合

error execa@x.x.x: The engine "node" is incompatible with this module. Expected version "<Supported Versions>". Got "<Version in use>"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

nodeのバージョンを、<Supported Versions>部分で指定されているバージョンの範囲内になるように変更します。

  1. DockerfileのFROM部分を、バージョンに合わせて適宜修正します。
  2. src/ディレクトリが作成されているので、削除します。
  3. もう一度コマンドを実行します。

サーバを建てる

コンテナを起動したときに、自動で開発用のサーバーを起動できるようにします。
Dockerfileに直接書くこともできますが、別途ファイルを用意することにしました。

$ cd src
$ touch setup.sh

setup.shの中身は下記のようにしました。

set -eu

yarn && yarn dev

このファイルを、Dockerfileで呼び出すようにします。

FROM node:18.16.0-alpine

WORKDIR /opt/app

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

ビルド

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

http://localhost:3000 にアクセスして、NEXT.jsの画面が表示されればOKです！

かっこいい。

Discussion