GitHub Pages 白画面修正: Vite base を相対パス化

plan.md

@@ -380,3 +380,17 @@
   - done: `package.json` に `npm run e2e`(ビルド→テスト) / `npm run e2e:serve`
     / `npm run wasm` を追加。`puppeteer-core` を devDependencies に追加。
   - done: リポジトリ内ランナーで E2E 全 15 項目パスを再確認。
+
+## TODO-Web09(GitHub Pages 白画面修正)
+
+- ユーザー報告: Pages 公開時に「Loading WASM module...」のまま白画面。
+- 原因: GitHub Pages はサブパス(例: `/coBroc/`)で配信されるが、Vite の
+  デフォルト `base: '/'` によりビルド後の index.html が絶対パス
+  (`/assets/index-*.js`)を参照し 404 → main.ts が実行されず白画面。
+- 修正:
+  - done: `vite.config.ts` に `base: './'` を設定(全アセットをページ相対に)。
+  - done: `web/e2e/run_e2e.mjs` をサブパス対応(`E2E_BASE_PATH` 環境変数)。
+  - done: `favicon.svg` を追加し 404(favicon.ico)を解消。
+- 検証:
+  - done: サブパス `/coBroc/` を再現し E2E 全 15 項目パス(実 WASM ロード確認)。
+  - done: ルート配信でも E2E 全 15 項目パス。

web/e2e/run_e2e.mjs

@@ -8,6 +8,9 @@
  *   npm run e2e          # dist をビルドしてから実行
  *   npm run e2e:serve    # ビルドせずに実行(dist が既にある場合)
  *
+ * サブパス検証(GitHub Pages は /<repo>/ で配信されるため):
+ *   E2E_BASE_PATH=/coBroc npm run e2e:serve
+ *
  * 事前準備: npm i -D puppeteer-core(システムの Chrome を使用)
  */
 
@@ -20,23 +23,29 @@ import { fileURLToPath } from 'url';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const PORT = 17890;
 const DIST = join(__dirname, '..', 'dist');
+const BASE_PATH = process.env.E2E_BASE_PATH || ''; // 例: '/coBroc'
 
 const mime = { '.html':'text/html','.js':'text/javascript','.wasm':'application/wasm','.json':'application/json','.svg':'image/svg+xml' };
 
 const server = createServer((req, res) => {
-  let p = join(DIST, req.url === '/' ? '/index.html' : req.url.split('?')[0]);
+  let urlPath = req.url.split('?')[0];
+  if (BASE_PATH && urlPath.startsWith(BASE_PATH)) {
+    urlPath = urlPath.slice(BASE_PATH.length);
+  }
+  let p = join(DIST, urlPath === '/' || urlPath === '' ? '/index.html' : urlPath);
   if (!existsSync(p)) { res.writeHead(404); res.end(); return; }
   const ext = extname(p);
   res.writeHead(200, { 'Content-Type': mime[ext] || 'application/octet-stream' });
   res.end(readFileSync(p));
 });
 
 server.listen(PORT, async () => {
-  console.log(`static server on :${PORT}`);
+  const baseUrl = `http://localhost:${PORT}${BASE_PATH}/`;
+  console.log(`static server on :${PORT} (base path: ${BASE_PATH || '/'})`);
   const proc = spawn('node', ['e2e_test.mjs'], {
     cwd: __dirname,
     stdio: 'inherit',
-    env: { ...process.env, E2E_URL: `http://localhost:${PORT}/` },
+    env: { ...process.env, E2E_URL: baseUrl },
   });
   proc.on('close', (code) => {
     server.close();

web/index.html

@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
   <title>coBroc - Block Coding Game</title>
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }

web/vite.config.ts

@@ -2,6 +2,10 @@ import { defineConfig } from 'vite';
 
 export default defineConfig({
   root: '.',
+  // GitHub Pages はサブパス(例: /coBroc/)で配信されるため、相対パス指定。
+  // これによりビルド後のアセット参照(assets/*, coBrocWeb.js, coBrocWeb.wasm)が
+  // ルート起点ではなくページ相対になり、どのサブパスでも動作する。
+  base: './',
   build: {
     outDir: 'dist',
     target: 'es2022',