dockerでviteを使ったreact環境を作ってみる
dockerでviteを使ったreactの環境を作成したのでメモ。
node.jsをインストールする必要があります。
最終的なファイル構造
最終的な構造は以下の通り
└── react
├── docker-compose.yml
├── Dockerfile
├── eslint.config.js
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public
├── README.md
├── src
└── vite.config.js
react環境を作る
npm create vite@latest react -- --template react-swc && cd react && npm install #js
npm create vite@latest react -- --template react-ts-swc && cd react && npm install #ts
npm create vite@latest
で立ち上げます。実行するとディレクトリ名、フレームワーク、言語など入力します。
ディレクトリ名がreactでjavascript+SWC(高速でビルドしてくれる)で構築する場合、
npm create vite@latest react -- --template react-swc
で入力なしで構築してくれる。
その後npm install
を実行するとnode_modulesとpackage-lock.jsonを作ってくれます。
一連の流れをまとめたものが上記のコマンドです。
これでこちら側の環境は終わり。
dockerfile関連
次にdockerfileとdocker-compose.ymlを先ほど作ったディレクトリの中に作成します
dockerfile
FROM node:22
WORKDIR /app
#パッケージをコピー
COPY package.json package-lock.json ./
#nodeモジュールのインストール
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm" , "run" , "dev"]
docker-compose
services:
front:
build: ./
ports:
- 5173:5173
volumes:
- .:/app
- /app/node_modules
environment:
- CHOKIDAR_USEPOLLING=true
- WATCHPACK_POLLING=true
環境変数はホットリロードするのに必要です。
node_modules
は OS に依存するため、ホストで作成したものと Docker コンテナ内で生成されたものが一致しない場合があります。そのため、ホスト側の node_modules をそのままマウントすると、依存関係の不整合やビルドエラーの原因になります。これを防ぐため、Docker コンテナ内の /app/node_modules
を空のボリュームで上書きして、ホスト側のものを無視するようにしています。
vite.config
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
server: {
host: "0.0.0.0", // Dockerからアクセスできるように
port: 5173,
// ホットリロードの設定
watch: {
usePolling: true,
interval: 1000
}
}
})
tailwindの追加
コンテナ内で以下を実行
npm install -D tailwindcss@3.4.13 autoprefixer postcss
npx tailwindcss init -p
上の方法はバージョン4系ではエラーになるのでバージョン3で指定してください。
実行したら以下のファイルを編集して下さい
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
@tailwind base;
@tailwind components;
@tailwind utilities;
反映されない場合、コンテナを再起動してください。
ライブラリのインストール(react-router-dom)
npm install react-router-dom
docker-compose up -d --build
実行したらパッケージが更新されるので、再ビルドしたら使えるようになります。
終わり
以上です。
ライブラリのインストール(react-router-dom)
を追記しました。
Discussion