フェーズA／B

以下の手順で、一切既存ファイルを編集せずにDocker環境上でnpm run devが動作し、Make出力のUIをブラウザで確認できます。

---

🧱 1. ルート構成（あなたが作る最小追加ファイル）

frontend/
├── apps/
│   └── top/           ← Figma Make の出力をこの中に丸ごと移動
├── shared/
│   └── api/
│        └── client.ts
├── docker-compose.yml
├── Dockerfile
└── .env

---

🐋 Dockerfile

# frontend/Dockerfile
FROM node:20-alpine

# 共通作業ディレクトリ
WORKDIR /app

# 最初に依存を解決（apps/top を基準に）
COPY apps/top/package*.json ./
RUN npm install

# Vite 開発ポート
EXPOSE 3000

CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

---

🧩 docker-compose.yml

version: "3.9"

services:
  top:
    build: .
    working_dir: /app/apps/top
    volumes:
      - ./apps/top:/app/apps/top
      - ./shared:/app/shared
      - /app/node_modules
    ports:
      - "3001:3000"
    environment:
      - VITE_API_BASE_URL=http://api.local:8080

🔹 これで docker compose up top → http://localhost:3001 へアクセスできます。
🔹 node_modules はコンテナ側にのみ作られるためホストは汚れません。

---

🌐 .env（共通設定）

VITE_API_BASE_URL=http://api.local:8080

まだAPIは不要でもOK。後でFastAPIやOdooとつなげるときに自動参照されます。

---

📦 shared/api/client.ts

// frontend/shared/api/client.ts
export async function apiGet(path: string) {
  const base = import.meta.env.VITE_API_BASE_URL || "http://api.local:8080"
  const res = await fetch(`${base}${path}`)
  if (!res.ok) throw new Error(`API error: ${res.status}`)
  return res.json()
}

Make側のコードには何も挿入せず、
今後 import { apiGet } from "@/shared/api/client" で共通利用できます。

---

🚀 2. Make出力を配置するだけ

あなたのFigma Makeフォルダをそのまま frontend/apps/top に移動：

mv <Figma_Make_export> frontend/apps/top

構成イメージ：

frontend/
├── apps/
│   └── top/
│       ├── package.json
│       ├── vite.config.ts
│       ├── index.html
│       └── src/...
├── shared/api/client.ts
├── docker-compose.yml
├── Dockerfile
└── .env

※ Zone.Identifier 付きファイルはWindowsのセキュリティ情報なので無視してOKです（削除推奨）。

---

✅ 3. 起動確認

cd frontend
docker compose up top

アクセス：
👉 http://localhost:3001

Figma Make 由来のUIがそのまま表示されれば成功です 🎉

---

🧠 4. 「どこまで共通」「どこから個別」にすべきか

層	管理単位	説明
Dockerfile / docker-compose / .env	共通	すべての画面で同じNode環境を使用
shared/api/	共通	API呼び出し・認証・設定など再利用
apps/	個別（画面ごと）	各画面（top, fields, views…）は独立
package.json / vite.config.ts	各アプリで独立	ポート番号だけ変える（例：3002, 3003 …）
Tailwind / shadcn	最初は個別、後に共通化可	Makeが既に持つ設定をそのまま使う

つまり：

• 共通で1つ作っておけば 以降の画面は apps/portal-fields を作り、Make出力をそのままコピーするだけ。
• 変更は docker-compose.yml に1サービス追加するだけでOK。

---

💡 例：次の画面（portal-fields）を追加する場合

services:
  top:
    ...
  portal-fields:
    build: .
    working_dir: /app/apps/portal-fields
    volumes:
      - ./apps/portal-fields:/app/apps/portal-fields
      - ./shared:/app/shared
      - /app/node_modules
    ports:
      - "3002:3000"
    environment:
      - VITE_API_BASE_URL=http://api.local:8080

→ docker compose up portal-fields で2画面目も独立起動。

---

✅ まとめ

ステップ	内容	編集
1	Dockerfile / compose / shared/api を追加	新規
2	Figma Makeフォルダを apps/top に移動	既存ファイル変更なし
3	docker compose up top	実行のみ

フェーズB

フェーズA終了後に行うため、ペンディング、２）までは終わっている

1) カレントディレクトリ：リポジトリのルート

# 例: ここがリポジトリのトップ
pwd   # => ~/dev-portal-frontend

2) model_detail 用の openapi フォルダ作成＆コピー

# ルートで実行
mkdir -p frontend/apps/model_detail/openapi

# topで保存済みのOpenAPIを使い回す（ファイル名はあなたが保存したものに合わせる）
cp frontend/apps/top/openapi/v1.0.0.json \
   frontend/apps/model_detail/openapi/v1.0.0.json

3) 型生成（typegen）

# カレントディレクトリを frontend に移動
cd frontend

# 画面のdevサーバは起動したままでOK。別ターミナルから実行推奨
docker compose run --rm model_detail \
  npx -y openapi-typescript "openapi/v1.0.0.json" \
  -o src/types/api.d.ts

• この docker compose run model_detail のコンテナ内CWDは /app/apps/model_detail です。
  そこから見た openapi/v1.0.0.json を読むので 相対パスのままでOK。

4) 成功確認

# ホスト側（あなたの端末）で確認
ls -l apps/model_detail/src/types/api.d.ts
# => ファイルができていればOK（Viteが自動で拾います）