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ファイルを作成します
# バージョンは必要に応じて変更する。
# 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を変更します
# ビルド用のステージ
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を編集します
{
"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です)
5. おわりに
ここまで読んでくださりありがとうございました。
https://github.com/ryota0051/vite-react-example に今回作成したコードをあげています。
React環境の構築の参考になれば幸いです。