Zenn
📑

create-react-appからViteへの移行（メモ書き）

2024/08/25に公開
Docker
React
Vite
Create React App
tech

概要

dockerをベースにcreate-react-appで作成したプロジェクトを、Viteに移行する際に詰まったのでメモ書きとして残しておく

移行前ディレクトリ構造

.
├── Makefile
├── README.md
├── app
│   ├── README.md
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── public/
        ├── index.html
        └── * 
│   ├── src
│   └── tsconfig.json
├── docker
│   └── Dockerfile
└── docker-compose.yaml

移行後ディレクトリ構造

.
├── Makefile
├── README.md
├── app
│   ├── README.md
│   ├── index.html
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── public/
        └── * 
│   ├── src
│   ├── tsconfig.json
│   └── vite.config.ts
├── docker
│   └── Dockerfile
└── docker-compose.yaml

移行手順

  1. viteをインストール
npm install vite --save-dev --legacy-peer-deps
  1. packege.jsonにスクリプトを追記
 "scripts": {
    "dev": "vite",
    "serve": "vite preview",
    ...
  },
  1. app内にvite.config.tsを作成
// vite.config.js
import { defineConfig } from "vite";

export default defineConfig({
  server: {
    host: "0.0.0.0", // すべてのネットワークインターフェースでリッスン
    port: 5173, // ポート番号
  },
});
  1. index.htmlをapp/publicからappに移動
    移行後ディレクトリ構造を参照
  2. index.htmlの内容を変更
 <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!-- 追記 -->
    <script type="module" src="/src/index.tsx"></script>
</body>
  1. docker-compose.yamlにポート・コマンドを追記
ports:
      - "3000:3000"
      - "6006:6006"
      - "5173:5173" # 追記
environment:
      - APACHE_SERVER_NAME=localhost # 追記
      - CHOKIDAR_USEPOLLING=true
command: sh -c ' npm i --legacy-peer-deps && npm run dev' # npm run dev に変更
  1. docker-compose up -dを実行して、localhost:5173にアクセスすれば表示されているはず・・・

Discussion