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

環境

  • M1 Mac Book Air
  • Docker 20.10.20
  • Docker Compose 2.12.0
  • node:19-alpine3.15
  • Vite 3.2.3

手順

Dockerコンテナを作成

Dockerfileを作成

Dockerfile
FROM node:19-alpine3.15
WORKDIR /app

docker-compose.ymlを作成

docker-compose.yml
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

サーバーを立ち上げる

vite.configを編集

vite.config
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

http://localhost:5173/にアクセスしてサイトが表示されるのを確認

TypeScriptインポート時の起点を設定

vite-tsconfig-pathsをインストール

コマンドライン
docker compose exec node yarn add -D vite-tsconfig-paths

設定に追加

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tsconfigPaths(), // 追加
  ],
〜省略〜
});
tsconfig.json
{
  "compilerOptions": {
    〜〜省略
    "jsx": "react-jsx",
    "baseUrl": "src", // 追加
  },
〜省略〜
}

参考文献

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です