Zenn
🏦

Docker+Node.js+React+Next.js(TypeScript) 構築手順

2022/10/10に公開
Docker
Next.js
Node.js
React
TypeScript
tech

概要

自宅 PC に WSL2 で Ubuntu の環境を作成したので、せっかくだから今流行りの Next.js で Docker コンテナを作成しようとして、色んな方の情報を渡り歩いていました。

エラーで詰まったところも含めて、自分の備忘録として残しておこうと思った次第です。

手順

1. 開発環境/コンテナ用フォルダ作成

最初に、開発環境/コンテナ用のフォルダを作成します。

mkdir webapp01
cd webapp01

2. Dockerfile の作成

Docker コンテナ用の Dockerfile を作成します。

touch Dockerfile

中身はこう。

Dockerfile
FROM node:18.10.0
WORKDIR /usr/src/webapp01
USER node
EXPOSE 3000

WORKDIR :
　　ワークフォルダ指定(後述する docker-compose.yml の volumes と合わせること)
USER :
　　Dockerコンテナへのログインユーザー
EXPOSE :
　　公開ポート番号(ドキュメント的な意味合い)
　　Next.js のデフォルトが 3000 (変更も可能ですがここでは説明しません)

3. docker-compose.yml の作成

docker-compose を実行する docker-compose.yml を作成します。

touch docker-compose.yml

中身はこう。

docker-compose.yml
version: '3'
services:
  webapp01:
    container_name: webapp01
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/usr/src/webapp01
    command: sh -c "cd sample_app && npm run dev"
    ports:
      - 8080:3000

container_name:
　　任意のコンテナ名
build:/dockerfile:
　　同じフォルダ階層の Dockerfile を指定します。
volumes:
　　ボリュームフォルダとしてマウントするフォルダ名を指定します。
　　(WSL 上の自身の内容を Docker 上の /usr/src/webapp01 にマウントします。)
command:
　　sample_app は任意
　　ボリュームフォルダ内の sample_app に移動して node を実行します。
ports:
　　ポートフォワードの設定をします。

4. Next.js のプロジェクトを構築する

4.1 Next.js をインストールする

docker-compose を実行し、コンテナに create-next-app をインストールします。

docker-compose run --rm webapp01 npm install create-next-app

4.2 Next.js のプロジェクトを作成する

sample_app という名称で Next.js(with TypeScript) のプロジェクトを作成します。

docker-compose run --rm webapp01 npx create-next-app sample_app --ts

5. テスト起動

作成したコンテナを起動して動作を確認します。

docker-compose up -d

http://localhost:8080 で Next.js のサンプルページが表示されれば成功です。
お疲れ様でした。

参考

Dockerで、Next.js,TypeScript環境構築方法
Node.js on Dockerでエラー発生(Error: EACCES: permission denied, errno: -13)

最後に

色々と有効な情報があるので、敢えて作成する意味はないかもしれませんが、最初に書いた通り自分の備忘録ということで。

n番煎じは許せ、サスケ。

Discussion