バックエンド接続手順書

# .env.development
VITE_API_BASE_URL=http://localhost:3000
VITE_USE_MOCK=true  # MSWを使用する場合はtrue、バックエンド接続する場合はfalse

# .env.production
VITE_API_BASE_URL=
VITE_USE_MOCK=false

import cors from 'cors';

const app = express();

if (process.env.NODE_ENV === 'development') {
  app.use(cors({
    origin: 'http://localhost:5173',
    credentials: true
  }));
}

// src/api/client.ts

// 開発時はバックエンドURL、本番時は相対パス
const BASE_URL = import.meta.env.VITE_API_BASE_URL || "";

async function fetchJson<T>(url: string, options?: RequestInit): Promise<T> {
  try {
    const res = await fetch(url, {
      ...options,
      headers: {
        "Content-Type": "application/json",
        ...options?.headers,
      },
    });

    if (!res.ok) {
      const errorData = await res.json().catch(() => ({}));
      throw new Error(
        `API Error: ${res.status} ${res.statusText} - ${JSON.stringify(errorData)}`
      );
    }

    if (res.status === 204) {
      return {} as T;
    }

    return res.json();
  } catch (error) {
    if (error instanceof TypeError) {
      throw new Error('ネットワークエラー: バックエンドに接続できません');
    }
    throw error;
  }
}

// src/main.tsx

async function enableMocking() {
  // 環境変数でMSWを制御
  if (import.meta.env.VITE_USE_MOCK === 'true') {
    const { worker } = await import('./mocks/browser');
    return worker.start({
      onUnhandledRequest: 'bypass',
    });
  }
}

// history entry の image フィールドは相対パス（例: "turn-1.png"）

// GameHistoryEntry.tsx などで使用
const imageUrl = entry.image 
  ? `${import.meta.env.VITE_API_BASE_URL || ''}/games/${gameId}/${entry.image}`
  : null;

import express from 'express';
import path from 'path';

const app = express();

// games/ ディレクトリを静的配信
// /games/20251007-192416/state.json のようなパスでアクセス可能になる
app.use('/games', express.static(path.join(__dirname, '../games')));

// オプション: キャッシュ制御を追加
app.use('/games', express.static(path.join(__dirname, '../games'), {
  maxAge: '1d', // 画像ファイルは1日キャッシュ
  etag: true,
  lastModified: true
}));

import Fastify from 'fastify';
import fastifyStatic from '@fastify/static';
import path from 'path';

const fastify = Fastify();

// @fastify/static プラグインを登録
await fastify.register(fastifyStatic, {
  root: path.join(__dirname, '../games'),
  prefix: '/games/', // URLプレフィックス
  constraints: {} // オプション
});

await fastify.listen({ port: 3000 });

from flask import Flask, send_from_directory
import os

app = Flask(__name__)

GAMES_DIR = os.path.join(os.path.dirname(__file__), '../games')

@app.route('/games/<path:filepath>')
def serve_games(filepath):
    """games/ ディレクトリの静的ファイルを配信"""
    return send_from_directory(GAMES_DIR, filepath)

# または、静的フォルダとして登録
# app = Flask(__name__, static_folder='../games', static_url_path='/games')

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
import os

app = FastAPI()

GAMES_DIR = os.path.join(os.path.dirname(__file__), '../games')

# games/ ディレクトリを静的ファイルとしてマウント
app.mount("/games", StaticFiles(directory=GAMES_DIR), name="games")

// useAiSequence.ts などで実装
const pollPlotJob = async (jobId: string, maxRetries = 60) => {
  for (let i = 0; i < maxRetries; i++) {
    const jobStatus = await api.getPlotJob(gameId, jobId);
    
    if (jobStatus.status === 'done') {
      return;
    }
    
    if (jobStatus.status === 'error') {
      throw new Error('プロッタ描画に失敗しました');
    }
    
    // 1秒待機
    await new Promise(resolve => setTimeout(resolve, 1000));
  }
  
  throw new Error('プロッタ描画がタイムアウトしました');
};

export const ERROR_MESSAGES = {
  NETWORK_ERROR: 'ネットワークエラーが発生しました',
  BACKEND_CONNECTION_FAILED: 'バックエンドに接続できません',
  TIMEOUT: 'タイムアウトしました',
  // ... 既存のメッセージ
};

npm run build

npm run preview

Access to fetch at 'http://localhost:3000/games' from origin 'http://localhost:5173' 
has been blocked by CORS policy