Dockerを使用してReact/Next.js開発環境をつくる

はじめに

Reactを勉強しようとローカルでの開発環境を整備しようと思いました。
nodeのバージョンが低いが、業務でも使うため下手にいじれない。。
そこで、Dockerで開発環境を構築しました。

手順

1. 任意のディレクトリにDockerfile作成
2. 1と同ディレクトリにdocker-compose.yaml作成
3. React:docker-compose run --rm サービス名 sh -c 'npx create-react-app 任意のファイル名'
   Next.js:docker-compose run --rm サービス名 sh -c 'npx create-next-app 任意のファイル名'

★バージョン指定したい場合、create-react-app@バージョン

5. docker-compose build
6. docker-compose up

手順１

--任意のディレクトリにDockerfile作成

Dockerfile

FROM node:16.15.0
WORKDIR /usr/src/app

手順2

--1と同ディレクトリにdocker-compose.yaml作成

docker-compose.yml

version: '3.9'
services:
  サービス名:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/usr/src/app
    command: sh -c "cd 任意のファイル名 && nmp start"
    ports:
      - "3000:3000"
    stdin_open: true 

Next.jsの場合、nmp startをnpm run dev

手順3

ターミナルで任意のディレクトリに移動し、下記を実行。
docker-compose run --rm サービス名 sh -c 'npx create-react-app 任意のファイル名'

typescriptは下記
docker-compose run --rm サービス名 sh -c 'npx create-react-app 任意のファイル名 --template typescript'

手順4

ターミナルで下記を実行。
docker-compose build

手順5

ターミナルで下記を実行。
docker-compose up

http://localhost:3000/
で確認。

まとめ

これでReactの最新バーションが使えました。