From c80660426407d2653598d68a30f1918d5eb2b9bc Mon Sep 17 00:00:00 2001 From: yuta Date: Sat, 1 Aug 2026 11:16:50 +0900 Subject: [PATCH] =?UTF-8?q?GitHub=20Pages=20=E7=99=BD=E7=94=BB=E9=9D=A2?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3:=20Vite=20base=20=E3=82=92=E7=9B=B8=E5=AF=BE?= =?UTF-8?q?=E3=83=91=E3=82=B9=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - web/vite.config.ts: base: './' を設定 (Pages はサブパス /coBroc/ で配信されるため、絶対パス /assets/... が 404 になり main.ts 未実行 → 「Loading WASM module...」のまま白画面になっていた) - web/e2e/run_e2e.mjs: E2E_BASE_PATH 環境変数でサブパス配信を再現可能に - web/public/favicon.svg + index.html に favicon リンク追加(favicon 404 解消) - 検証: サブパス /coBroc/ とルートの両方で E2E 全15項目パス(実WASMロード確認) --- plan.md | 14 ++++++++++++++ web/e2e/run_e2e.mjs | 15 ++++++++++++--- web/index.html | 1 + web/public/favicon.svg | 5 +++++ web/vite.config.ts | 4 ++++ 5 files changed, 36 insertions(+), 3 deletions(-) create mode 100644 web/public/favicon.svg diff --git a/plan.md b/plan.md index d32637b..b232c15 100644 --- a/plan.md +++ b/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 項目パス。 diff --git a/web/e2e/run_e2e.mjs b/web/e2e/run_e2e.mjs index 1ae47c0..f6d9281 100644 --- a/web/e2e/run_e2e.mjs +++ b/web/e2e/run_e2e.mjs @@ -8,6 +8,9 @@ * npm run e2e # dist をビルドしてから実行 * npm run e2e:serve # ビルドせずに実行(dist が既にある場合) * + * サブパス検証(GitHub Pages は // で配信されるため): + * E2E_BASE_PATH=/coBroc npm run e2e:serve + * * 事前準備: npm i -D puppeteer-core(システムの Chrome を使用) */ @@ -20,11 +23,16 @@ 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' }); @@ -32,11 +40,12 @@ const server = createServer((req, res) => { }); 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(); diff --git a/web/index.html b/web/index.html index 86412fe..8ab518e 100644 --- a/web/index.html +++ b/web/index.html @@ -3,6 +3,7 @@ + coBroc - Block Coding Game