目的
Reactの公式ページでViteを使ったセットアップが紹介されていたので、
DockerコンテナにてViteでReact開発環境を作成する手順を確認する。
作業フォルダの構成
作業フォルダ
├ app
└ docker-compose.yml
docker-compose.yml の内容
下記内容のdocker-compose.ymlを作成する。
version: "3"
services:
node:
image: "node:21"
user: "node"
container_name: node-react
working_dir: /home/node/app
volumes:
- ./app:/home/node/app
expose:
- "3000"
ports:
- "3000:3000"
tty: true
Dockerコンテナ作成
docker-compose.yml が存在する場所で下記コマンドを実行する。
$ docker compose up -d
完了後、下記コマンドでコンテナに入り、nodeとnpmがインストールされていることを確認する。
// 作成したコンテナに入る。
$ docker container exec -it node-react /bin/bash
// nodeとnpmのバージョンを表示して確認する。
$ node -v
$ npm -v
プロジェクト作成
作成したコンテナ内で下記コマンドを実行する。
// プロジェクト作成
$ npm create vite@latest プロジェクト名 -- --template react-ts
// create-viteパッケージをインストールして良いか聞かれるので、yで許可する。
// 必要なライブラリ等をインストール。
$ cd プロジェクト名
$ npm install --production=false
// インストールされたものを確認する。
$ npm ls --production=false
インストールされたものは下記のように表示される。
+-- @types/react-dom@18.2.25
+-- @types/react@18.2.79
+-- @typescript-eslint/eslint-plugin@7.7.0
+-- @typescript-eslint/parser@7.7.0
+-- @vitejs/plugin-react@4.2.1
+-- eslint-plugin-react-hooks@4.6.0
+-- eslint-plugin-react-refresh@0.4.6
+-- eslint@8.57.0
+-- react-dom@18.2.0
+-- react@18.2.0
+-- typescript@5.4.5
`-- vite@5.2.9
vite.config.ts の編集
vite.config.tsを下記内容のように編集する。
（Next.jsをやりたくなった場合のためにポート番号は3000を利用する）
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
host: '0.0.0.0',
port: 3000,
}
})
開発用サーバ起動
下記コマンドで開発用サーバを起動する。
$ npm run dev
開発用サーバ起動後、ターミナルは下記のように表示される。
（Networkの項目が無いとDockerコンテナ上の開発用サーバにWebブラウザでアクセスできない）
VITE v5.2.9 ready in 145 ms
➜ Local: http://localhost:3000/
➜ Network: http://172.29.0.2:3000/
➜ press h + enter to show help
Webブラウザから確認
下記URLにアクセスして、Vite+Reactのデフォルトページが表示されれば良い。
https://localhost:3000