~/docker_tutorial
❯ mkdir DockerVite && cd DockerVite

~/docker_tutorial/DockerVite
❯ touch Dockerfile docker-compose.yml                              

~/docker_tutorial/DockerVite
❯ ls    
Dockerfile         docker-compose.yml

# slim系のnodeから構築することを定義
FROM node:16.17.1-bullseye
# コンテナ内の作業ディレクトリを作成
WORKDIR /app
# パッケージ一覧(インデックス)を更新
RUN apt update \
    && yarn install
# ポート番号5173でコンテナを公開
EXPOSE 5173

version: '3.9'  # docker-composeのバージョン選択
services:
  frontend:  # サービス名
    build:  # Dockerfileの設定
      context: .  # Dockerfileを置いているディレクトリ
      dockerfile: Dockerfile  # Dockerfileのファイル名
    working_dir: /app  # 作業ディレクトリを指定
    volumes:
      - ./:/app:cached
    tty: true  # コンテナを正常終了するのを防ぐ
    ports:
      - '5173:5173'  # 公開用のポート指定。ホスト側:コンテナ側
    command: yarn dev --host  # viteの実行コマンド

$ docker-compose build
Building frontend
[+] Building 82.3s (8/8) FINISHED                                                                                                                                                                           
 => [internal] load build definition from Dockerfile                                                                                                                                                   0.0s
 => => transferring dockerfile: 109B                                                                                                                                                                   0.0s
[...]
 => => naming to docker.io/library/dockervite_frontend                                                                                                                                                 0.0s 

# docker-compose run [サービス名] yarn create vite
$ docker-compose run frontend yarn create vite
Creating network "dockervite_default" with the default driver
Creating dockervite_frontend_run ... done
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vite@3.1.0" with binaries:
      - create-vite
      - cva
✔ Project name: … docker-vite
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

Scaffolding project in /app/docker-vite...

Done. Now run:

  cd docker-vite
  yarn
  yarn dev

Done in 51.57s.

$ ls
Dockerfile         docker-compose.yml docker-vite

FROM node:16.17.1-bullseye
WORKDIR /app
# 以下を追加する
COPY vite-app/ ./  # プロジェクトのコピー
###
RUN apt update \
  && yarn install
EXPOSE 5173

version: '3.9'
services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile
    working_dir: /app
    volumes:
      # 以下をviteのプロジェクト名に変更する
      - ./vite-app:/app:cached
      # 以下を追加する
      - node_modules:/app/node_modules  # 特定のパスを独立した名前付きボリュームとして定義
      ###
    tty: true
    ports:
      - '5173:5173'
    command: yarn dev --host
# 以下を追加する
volumes:  # 名前付きボリュームの設定
  node_modules:

$ docker-compose build --no-cache 
Building frontend
[+] Building 25.9s (10/10) FINISHED                                                                                                                                                                         
 => [internal] load build definition from Dockerfile                                                                                                                                                   0.0s
[...]
 => => naming to docker.io/library/dockervite_frontend                                                                                                                                                 0.0s 

$ docker-compose up

frontend_1  |   VITE v3.1.6  ready in 204 ms
frontend_1  | 
frontend_1  |   ➜  Local:   http://localhost:5173/
frontend_1  |   ➜  Network: http://172.18.0.2:5173/