Docker + Vite を使用してReact(TypeScript)の開発環境を構築する

FROM node:19-alpine3.15
WORKDIR /app

version: '3'
services:
  node:
    build:
      context: .
    tty: true
    volumes:
      - ./react:/app
    ports:
      - 5173:5173

docker-compose up -d

docker compose exec node yarn create vite . --template=react-ts

docker compose exec node yarn

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {         // この三行を追加
    host: true,   //
  },                    //
});

docker compose exec node yarn dev

docker compose exec node yarn add -D vite-tsconfig-paths

〜〜省略
import tsconfigPaths from 'vite-tsconfig-paths'; //　追加

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tsconfigPaths(), // 追加
  ],
〜省略〜
});

{
  "compilerOptions": {
    〜〜省略
    "jsx": "react-jsx",
    "baseUrl": "src", // 追加
  },
〜省略〜
}