REACT-SERVER-APP
├── docker/
│   └── app/
│       └── Dockerfile
├── react-server/
│   ├── .react-server/
│   ├── node_modules/
│   ├── App.jsx
│   ├── package-lock.json
│   ├── package.json
├── docker-compose.yml

docker-compose.yml

version: "3.7"
services:
  app:
    build:
      context: .
      dockerfile: ./docker/app/Dockerfile
    container_name: react-server
    ports:
      - "8080:3000"
    volumes:
      - ./react-server:/home/node/app
    environment:
      - NODE_ENV=development
    tty: true
    stdin_open: true

docker/app/Dockerfile

FROM node:22-alpine
WORKDIR /home/node/app
RUN apk update

EXPOSE 3000

コマンド

docker compose up -d

コンテナが立ち上がったら

docker compose exec app sh
npm install @lazarv/react-server

react-server/App.jsx

export default function App() {
  return <h1>Hello World</h1>
}

react-server/package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "react-server ./App.jsx --port 3000 --host 0.0.0.0", //追記
  },

コマンド

docker compose exec app sh
npm run dev

http://localhost:8080/ にアクセスし、"Hello World"が表示されて成功！

ここまでの感想

ローカルサーバー立ち上がるのが早くて気持ちが良い。

Vite っていいよね。

Docker 以外の選択肢

Volta を使った node のバージョン管理ツールを使うともっと簡単に環境構築できます。

ちょっと試してみたいけど、

「ローカルの node のバージョンを変えるのが怖い」という

感覚がある人は Volta について調べてみると良いことがあるかもしれません。

Node.js のバージョン管理は Volta に決定

フィードバックのお願い

この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。