【Docker】Viteを使ってReactとTypeScriptの環境構築

はじめに

そもそも簡単に構築できるReactですが、実行もDockerを用いてできたらもっと楽になるでしょう。
それを、vite使えたらもっといいだろうなと思ったので、それをメモしていこうと思います。
環境構築はできている前提です。

手順

以下でviteのインストールバージョンを確認できる

npm show vite version

1. プロジェクトを格納するフォルダを作り、移動する

mkdir zenn-react
cd zenn-react

2. プロジェクトを作る
   TypeScriptとReactを選んでいきます。

npm create vite

3. npm installする

npm install

4. 動作確認する

npm run dev

これで動作確認できます。

5. Dockerfileを作る

# Node.js LTSバージョンをベースイメージとして使用する
FROM node:lts-alpine AS builder
# 作業ディレクトリの設定
WORKDIR /app
# package.jsonとpackage-lock.jsonがあればコピーする
COPY package*.json ./
# 依存関係のインストール
RUN npm install
# すべてのファイルをコピーする
COPY . .
# プロジェクトの構築
RUN npm run build
# Dockerfile 内でのベースイメージの指定
FROM nginx:alpine
# builder stageからbuild filesをコピーする
COPY --from=builder /app/dist /usr/share/nginx/html
# ポート80を公開する
EXPOSE 80
# Nginxサーバーの起動
CMD ["nginx", "-g", "daemon off;"]

6. docker-compose.ymlを作る

version: '3'

services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "8080:80"
    volumes:
      - ./src:/app/src
      - ./public:/app/public
    stdin_open: true

7. ビルドする

docker-compose build

8. 実行する

docker-compose up -d

以下が出ていればOKです。

参考サイト

DockerでReact+TypeScriptの環境を構築する手順

Viteの革新的なビルドプロセス：React, TypeScript, Dockerを組み合わせたモダン開発体験

viteでReact×TypeScript環境を爆速で作る最小版

Docker Hub - node