📌

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で指定してください。
実行したら以下のファイルを編集して下さい

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

反映されない場合、コンテナを再起動してください。

ライブラリのインストール(react-router-dom)

npm install react-router-dom
docker-compose up -d --build

実行したらパッケージが更新されるので、再ビルドしたら使えるようになります。

終わり

以上です。
ライブラリのインストール(react-router-dom)を追記しました。

Discussion