【環境構築】React + ViteをDockerで動かす

Dockerコンテナ上でReactとViteが動く環境をサクッと構築するための方法を共有。

ホスト側でプロジェクトを起動

まずはホスト側の適当なディレクトリでプロジェクトを起動します。

$ npm create vite@latest

# 対話形式でプロジェクト名やフレームワークを選択

$ cd <プロジェクト名>
$ npm install
$ npm run dev

ブラウザで確認

npm run devとコマンドを実行すると、下記のような表示になります。

ブラウザでアクセスするとちゃんと表示されているのでとりあえずはOK。

http://localhost:5173/

ディレクトリ構成

とりあえずはこんな感じで。

MyApp
┣ frontend
┃ ┣ src
┃ ┣ index.html
┃ ┣ vite.config.ts
┃ ┗ その他諸々
┗ Dockerfile

Dockerfileを作成

適当な場所にDockerfileを作成します。

FROM node:latest

#これ以下のコマンドは/myAppで実行される
WORKDIR /myApp    

# ホスト側のディレクトリをコンテナ側にコピーする
COPY . .    

# ライブラリをインストール
RUN cd frontend && npm install
    
CMD ["/bin/bash"]

vite.config.tsを編集

server.watchのusePolling → true

ホットリロードが有効になります。ホットリロードとは、ファイル更新時にすぐにブラウザ側に反映される機能です。

server.host → true

ホスト側からコンテナ上の開発サーバーにアクセスできるようにします。この設定を忘れると、http://localhost:5173/にアクセスできません。

export default defineConfig({
  server: {
    watch: {
      usePolling: true
    },
    host: true
  },      
  plugins: [react()],
})

Dockerコマンドを実行

準備ができたので、コンテナを作成し、サーバーを起動します。

docker build -t my-app .

# -vオプション: ホスト側のソースコードをコンテナ側にマウント
# -pオプション: ポート番号を指定
docker run -itd --rm -v ./:/myApp -p 5173:5173 --name my-app my-app:latest

# コンテナ内で開発サーバーを起動する
docker exec -it my-app /bin/bash
npm install
npm run dev