LVLPATH

日本最強無料プログラミングスクール

Reactコンテナを作ってコンテナに入る

📁 ディレクトリ構成

my-react-app/
├── Dockerfile
├── package.json
├── public/
│   └── index.html
└── src/
    └── index.js

ファイル準備

mkdir my-react-app

cd my-react-app

touch Dockerfile package.json

mkdir public src

touch ./public/index.html ./src/index.js

📄 Dockerfile

FROM node:18

# 作業ディレクトリ
WORKDIR /app

# ホットリロードのための環境変数
ENV CHOKIDAR_USEPOLLING=true

# ソースコードをすべてコピー
COPY . .

# npm パッケージをインストール
RUN npm install

# ポート開放
EXPOSE 3000

# アプリ起動
CMD ["npm", "start"]

📄 package.json

{
  "name": "my-react-app",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start"
  }
}

📄 public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

📄 src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

const App = () => {
  return <h1>Hello, Docker + React!</h1>;
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

🚀 起動コマンド（ホスト側）

docker build -t my-react-app .

docker run -it --rm \
  -p 3000:3000 \
  -v ${PWD}:/app \
  -v /app/node_modules \
  my-react-app

-v ${PWD}:/app → ホスト側の変更をリアルタイム反映（ホットリロード）
-v /app/node_modules → ホストの node_modules をマウントしない（依存競合防止）
CHOKIDAR_USEPOLLING=true → ホットリロード強制有効化

これで、localhost:3000 にアクセスすると React アプリが表示され、ホスト側の src/index.js を編集するとすぐにブラウザに反映されます。

ローカル側で編集して保存するとホットリロードが動きます。

お問い合わせ