Open2022/10/23にコメント追加1

Docker + Vite + React 環境構築

1. Dockerファイル作成

Dockerfile

FROM node:18-alpine
WORKDIR /app

docker-compose

version: "3.8"
services:
  node:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/app
    tty: true
    ports:
      - "3000:3000"
    command: yarn dev

2. Docker Image作成

$ docker-compose build

3. Viteプロジェクト作成

$ docker-compose run --rm node yarn create vite

プロジェクト名など設定する

✔ Project name: … app
✔ Select a framework: › React
✔ Select a variant: › TypeScript

４. ディレクトリ構成整理

$ mv ./app/* ./
$ rm -r ./app

5. node_modulesをインストール

$ docker-compose run --rm node yarn install

6. ホストの指定

このままではlocalhost:3000へアクセスできないのでホストの指定をする。

package.json

 "scripts": {
+   "dev": "vite --host",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },

vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
+ server: {
+   host: '0.0.0.0',
+   port: 3000,
+ },
  plugins: [react()]
})

参考:

7. コンテナ起動

$ docker-compose up -d

http://localhost:3000/ へアクセス