Wdrożenie na Vercel

Statyczny build Vite z vercel.json, dostarczanie WASM z właściwym MIME, SPA routing, immutable cache, CSP i weryfikacja po deployu.

Model wdrożenia#

Vector Engine deployuje się jako statyczna aplikacja Vite. Silnik C++ jest już skompilowany do WebAssembly i kopiowany do outputu przez Vite — serwer nie wykonuje żadnego kodu silnika.

Dashboard#

Wypchnij repozytorium do GitHub / GitLab / Bitbucket.
Zaimportuj projekt w Vercel.
Zostaw Root Directory na korzeniu repozytorium.
Vercel czyta vercel.json — żadne override'y builda nie są potrzebne.
Deploy.

Ustawienie	Wartość
Framework	Vite
Install command	`npm ci`
Build command	`npm run build`
Output directory	`apps/web/dist`
Node.js	22.x+ (`.nvmrc` pinuje 24 lokalnie)

Nie ustawiaj Root Directory na apps/web

Korzeń workspace'u posiada lockfile, konfiguracją deploymentu, importem schemy i weryfikacją WASM. Ustawienie apps/web pomija te kroki i psuje build.

.vercelignore utrzymuje mały upload: natywne engine/, testy, specy Playwright, docs i lokalny build nie są wysyłane; package.json, lockfile, scripts/, schemas/ i apps/web (z public/wasm) zostają.

CLI#

bash

npx vercel
npx vercel --prod

Pierwsze uruchomienie linkuje projekt (.vercel/ jest git-ignore'owane) i wypisuje oba URL-e.

Dostarczanie WASM#

Deployment serwuje:

text

/wasm/vector_engine.js
/wasm/vector_engine.wasm

vercel.json zapewnia:

Content-Type: application/wasm,
same-origin resource policy,
revalidation caching dla stabilnych nazw WASM.

Root build weryfikuje fabrykę JavaScript i magic header WebAssembly przed uruchomieniem Vite.

Routing i cache#

SPA rewrite kieruje ścieżki aplikacji do index.html.
Istniejące pliki statyczne (/assets/*, /wasm/*) są serwowane bezpośrednio.
Assety z fingerprintem Vite dostają immutable cache na rok.
Dokument HTML i stabilne nazwy WASM rewalidują.

Security headers#

CSP jest restrykcyjna i kompatybilna z Emscripten, blob-backed podglądami SVG, stylami CodeMirror i lokalnymi workerami:

Ajv kompiluje JSON Schema do standalone module w buildzie,
Emscripten wyłącza dynamiczne wykonywanie JS,
polityka nie wymaga unsafe-eval.

Konfiguracja wyłącza też framing, MIME sniffing, kamerę, mikrofon i geolokalizację.

Podgląd produkcyjnego builda lokalnie#

bash

npm run build
npm run verify:deployment
npm run preview --workspace @vector-engine/web

verify:deployment sprawdza:

katalog outputu Vercel,
SPA fallback,
MIME i magic header WASM,
CSP,
obecność wszystkich 11 breakpointów monitorowych w zminifikowanym CSS.

Weryfikacja po deployu#

text

https://your-project.vercel.app/
https://your-project.vercel.app/wasm/vector_engine.js
https://your-project.vercel.app/wasm/vector_engine.wasm

bash

curl -I https://your-project.vercel.app/
curl -I https://your-project.vercel.app/wasm/vector_engine.wasm

Odpowiedź WASM powinna mieć 200 i Content-Type: application/wasm.

Checklist po deployu:

Status bar pokazuje C++23 · WebAssembly.
Eksport PNG pobiera się i otwiera poprawnie.
Resize okna na 1366×768, 1920×1080 i ultrawide 21:9 — cztery kolumny pozostają czytelne, canvas trzyma minimum.
curl -I na WASM zwraca właściwy MIME.