Vite + DockerでReact環境を構築する

## 1. はじめに

Reactの環境構築をする際には様々な方法があり、簡単に環境構築をする方法の一つであるViteを使用してみたという記事です。Dockerを使用したかったので、0から作成する手順を記載しています。

## 2. 何故Viteを選択したか

以下の理由でViteを選択しました。

- create react appが非推奨となっていたため
- 公式で推奨されるNext.jsやRemix, Gatsbyなどの高機能なフレームワークを使用したくなかったため(学習コストを低くするため。)

## 3. ディレクトリ構成

下記のようなディレクトリ構成を採用しました。

```
./
|- コードを配置するディレクトリ
|   |- Dockerfile
|   |- .dockerignore
|   |_ viteにより自動生成されるコード群
|- README.md
|_ compose.yml
```

## 4. 環境構築の手順

それでは、具体的な手順を記載していきたいと思います。

### 4.1 ベースとなるnodeベースのDockerfileを作成してビルドする

- まず、ViteによりReact環境を構築するための下記のような簡単なDockerファイルを作成します

```Dockerfile
# バージョンは必要に応じて変更する。
# bashでコンテナに入るのでalpineベースではないものにする。
FROM node:23.5

# こちらは無くても問題ない
WORKDIR /app
```

- 作成したDockerfileと同じディレクトリで `docker build -t vite-app .` コマンドを実行します

### 4.2 コンテナ内でReact環境を構築する

- ビルドが完了したら、` docker run --rm -it -v ${PWD}:/app vite-app bash` コマンドでコンテナ内にてbashシェルを利用します

- コンテナ内で`npm create vite@latest` を入力し、下記を入力して、vite環境を構築します
    - Project name: デフォルト(後ほど移動させるので)
    - framework: React
    - Select a variant: TypeScript

- 上記の方法で環境を作成すると、Dockerfileと同じ階層にアプリ名と同じディレクトリ配下にソースコードが生成されてしまう。そのため、下記を実行します

```
cd vite-project/
mv * ../
mv .gitignore ../
cd ../
rmdir vite-project
```

- npm installを実行することでパッケージをインストールします

**他にaxiosなど必要なパッケージがある場合はこの段階でインストールするといいと思います。**

### 4.3 Dockerfile, package.jsonを編集する

- viteによるReact環境を構築出来ているはずなので下記のようにDockerfileを変更します

```diff_docker
# ビルド用のステージ
FROM node:23.5 AS builder

WORKDIR /app

+ # package.json, package-lock.jsonをコピーする
+ COPY package*.json ./

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

+ # 実行ステージ
+ FROM node:23.5-alpine

+ WORKDIR /app

+ # ビルドステージからnode_modulesをコピーする
+ COPY --from=builder /app/node_modules ./node_modules
+ COPY . .

+ # 非ルートユーザ用の設定
+ RUN chown -R node:node ./

+ USER node

+ # 実行時のコマンド
+ CMD ["npm", "run", "dev"]
```

- ホストマシンからのアクセスおよび3000番ポートを使用するためにpackage.jsonを編集します

```diff_json
{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
-   "dev": "vite",
+   "dev": "vite --host 0.0.0.0 --port 3000",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.17.0",
    "@types/react": "^18.3.18",
    "@types/react-dom": "^18.3.5",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.17.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.16",
    "globals": "^15.14.0",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.18.2",
    "vite": "^6.0.5"
  }
}
```

### 4.5 .dockerignoreを作成する

コードを配置するディレクトリと同じディレクトリに下記を記載した.dockerignoreを配置します(node_modulesを無視するために配置しました。)。

```
node_modules
```

### 4.6 compose.ymlを作成して、ビルド再度ビルドする

- 下記の内容を記載したcompose.ymlを配置します

```
services:
  app:
    build: ./code
    volumes:
      - app_modules:/app/node_modules
      - ./code:/app
    ports:
      - 3000:3000
    tty: true
    command: npm run dev

volumes:
  app_modules:
```

- `docker compose up` コマンドでコンテナを起動させ、`localhost:3000`にアクセスします(下記のような画面が表示されるとOKです)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319102/5d650ef8-3f87-2f0c-8ffd-184160ebc188.png)


## 5. おわりに

ここまで読んでくださりありがとうございました。

https://github.com/ryota0051/vite-react-example に今回作成したコードをあげています。

React環境の構築の参考になれば幸いです。