mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 10:32:41 +00:00
Improve cacheability with content-hashed public assets and a cacheable app shell (#3494)
## Description: This reworks asset delivery and cacheability across the app and moves non-bundled public resources onto immutable, content-hashed URLs. Vite bundle outputs continue to live under `/assets/**` and remain content-hashed by Vite. Public resources that were previously fetched from stable paths in `resources/` now go through a custom hashed namespace under `/_assets/**`, backed by a generated asset manifest that is available to the server, browser, and worker runtime. In parallel, the root app shell is now cacheable shared HTML instead of request-time `no-store` HTML. Dynamic and live routes remain explicitly uncached. ## Why - Improve browser and Cloudflare cacheability for static assets. - Remove query-string and release-version cache busting for runtime-fetched assets. - Allow unchanged public assets to keep the same URL across releases. - Reduce avoidable work on `/` by serving a shared app shell instead of rendering HTML on every request. - Make cache behavior explicit instead of relying on mixed framework defaults and file-extension heuristics. ## What Changed ### 1. Content-hashed public asset pipeline - Added a build-time public asset manifest and hashing pipeline for non-Vite resources. - Production now emits hashed public assets under `/_assets/**`. - Added runtime manifest loading for Node so server-rendered paths resolve against built hashed files instead of rebuilding from source at runtime. - Emitted the runtime asset manifest as an ESM module for server consumption. Result: - `/assets/**` = Vite-managed hashed bundle outputs - `/_assets/**` = custom content-hashed public resources ### 2. Runtime asset URL migration - Added a shared `assetUrl(...)` resolution path. - Migrated runtime references away from query-string versioning and stable source paths. - Updated browser, worker, and server-side rendering paths to resolve through the asset manifest. - Moved map manifests, map binaries, thumbnails, sprites, sounds, fonts, flags, icons, screenshots, and other runtime-fetched resources onto hashed URLs. ### 3. Map and preview fixes - Fixed directory and per-file map asset resolution so map manifest and binary fetches resolve to the correct hashed URLs. - Updated preview metadata and map thumbnail paths to use the hashed asset namespace. - Fixed runtime manifest loading in prod after deployment. ### 4. Explicit cache policies - Added explicit immutable cache headers for: - `/assets/**` - `/_assets/**` - worker-prefixed equivalents under `/wN/...` - Added explicit `no-store` headers for live and dynamic APIs. - Removed the old `/api/env` bootstrap request and baked `gameEnv` into the HTML bootstrap instead. ### 5. Cacheable root app shell - Refactored the root HTML path to serve a shared app shell with: - `Cache-Control: public, max-age=0, s-maxage=300, stale-while-revalidate=86400` - `/` and the SPA fallback now serve shared cacheable HTML instead of request-time `no-store` rendering. - `/game/:id` remains dynamic and `no-store`, but now reuses the shared shell before injecting preview tags. ### 6. Matchmaking instance handling - Because the app shell is now cacheable, `INSTANCE_ID` was removed from shared HTML. - Added `/api/instance` as a temporary `no-store` runtime lookup used only by matchmaking. - This preserves correctness with the current random-per-boot `INSTANCE_ID` model while keeping `/` cacheable, but it is not the intended long-term design. ## Behavior Changes ### Asset URL contract Production URLs for non-Vite public resources now change from stable paths such as: - `/maps/...` - `/images/...` - `/manifest.json` to content-hashed paths under: - `/_assets/...` Examples: - `/_assets/maps/<map>/manifest.<hash>.json` - `/_assets/images/Favicon.<hash>.svg` ### Bootstrap/config - `/api/env` is removed. - `gameEnv` is now bootstrapped from HTML. ### HTML caching - `/` and the SPA fallback are now cacheable shared HTML. - `/game/:id` remains dynamic. ## Cache Matrix After This Branch - `/_assets/**`: `public, max-age=31536000, immutable` - `/assets/**`: `public, max-age=31536000, immutable` - live `/api/**`: explicit `no-store` - `/api/health`: explicit `no-store` - `/api/instance`: explicit `no-store` - `/game/:id`: explicit `no-store` - `/` and SPA fallback: `public, max-age=0, s-maxage=300, stale-while-revalidate=86400` ## Notes / Tradeoffs - `/api/instance` is a temporary compromise. It exists because `INSTANCE_ID` is currently random per boot, which is not safe to embed into cacheable shared HTML. - The current matchmaking flow still asks the client to provide `instance_id` during `matchmaking/join`. That is functional, but it is the wrong ownership boundary: instance selection should be handled by the matchmaking service, not by the browser. - The cleaner end-state would be: - make `matchmaking/join` stop requiring `instance_id` from the client, and let the matchmaking service select a healthy instance from worker check-ins - This branch makes the origin behavior edge-cache-friendly, but Cloudflare still needs matching cache rules if HTML itself should be cached at the edge. ## Validation Verified during development with: - `npx tsc --noEmit` - `node node_modules\\vite\\bin\\vite.js build` - `node node_modules\\vitest\\vitest.mjs run tests/server/RenderHtml.test.ts tests/server/NoStoreHeaders.test.ts tests/server/StaticAssetCache.test.ts tests/core/configuration/ConfigLoader.test.ts` Additional targeted tests added: - `tests/AssetUrls.test.ts` - `tests/core/game/FetchGameMapLoader.test.ts` - `tests/core/configuration/ConfigLoader.test.ts` - `tests/server/NoStoreHeaders.test.ts` - `tests/server/StaticAssetCache.test.ts` - `tests/server/RenderHtml.test.ts` ## Known Existing Warnings The production build still reports pre-existing warnings that are not addressed by this branch: - inconsistent JSON import attributes for `resources/countries.json` - inconsistent JSON import attributes for `resources/QuickChat.json` - large chunk warnings from Vite ## Rollout Notes - Cache rules should treat `/_assets/**` and `/assets/**` as immutable. - Cloudflare will still classify HTML as dynamic after deploy unless matching edge cache rules are configured for it. ## Follow-ups - Remove `/api/instance` by changing `matchmaking/join` so the server selects the target instance, or by making `INSTANCE_ID` deploy-stable if the current contract must remain. ## Please complete the following: - [ ] I have added screenshots for all UI updates - [ ] I process any text displayed to the user through translateText() and I've added it to the en.json file - [ ] I have added relevant tests to the test directory - [ ] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced ## Please put your Discord username so you can be contacted if a bug or regression is found: DISCORD_USERNAME
This commit is contained in:
scamiv
+98
-28
@@ -17,6 +17,99 @@ server {
|
||||
access_log /var/log/nginx/access.log;
|
||||
error_log /var/log/nginx/error.log;
|
||||
|
||||
location ^~ /assets/ {
|
||||
proxy_pass http://127.0.0.1:3000;
|
||||
proxy_cache STATIC;
|
||||
proxy_cache_valid 200 302 24h;
|
||||
proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
|
||||
proxy_cache_lock on;
|
||||
add_header X-Cache-Status $upstream_cache_status;
|
||||
add_header Cache-Control "public, max-age=31536000, immutable";
|
||||
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
|
||||
location ^~ /_assets/ {
|
||||
proxy_pass http://127.0.0.1:3000;
|
||||
proxy_cache STATIC;
|
||||
proxy_cache_valid 200 302 24h;
|
||||
proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
|
||||
proxy_cache_lock on;
|
||||
add_header X-Cache-Status $upstream_cache_status;
|
||||
add_header Cache-Control "public, max-age=31536000, immutable";
|
||||
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
|
||||
location ~* ^/w(\d+)(/(?:assets|_assets)/.*)$ {
|
||||
set $worker $1;
|
||||
set $worker_port 3001;
|
||||
|
||||
if ($worker = "0") { set $worker_port 3001; }
|
||||
if ($worker = "1") { set $worker_port 3002; }
|
||||
if ($worker = "2") { set $worker_port 3003; }
|
||||
if ($worker = "3") { set $worker_port 3004; }
|
||||
if ($worker = "4") { set $worker_port 3005; }
|
||||
if ($worker = "5") { set $worker_port 3006; }
|
||||
if ($worker = "6") { set $worker_port 3007; }
|
||||
if ($worker = "7") { set $worker_port 3008; }
|
||||
if ($worker = "8") { set $worker_port 3009; }
|
||||
if ($worker = "9") { set $worker_port 3010; }
|
||||
if ($worker = "10") { set $worker_port 3011; }
|
||||
if ($worker = "11") { set $worker_port 3012; }
|
||||
if ($worker = "12") { set $worker_port 3013; }
|
||||
if ($worker = "13") { set $worker_port 3014; }
|
||||
if ($worker = "14") { set $worker_port 3015; }
|
||||
if ($worker = "15") { set $worker_port 3016; }
|
||||
if ($worker = "16") { set $worker_port 3017; }
|
||||
if ($worker = "17") { set $worker_port 3018; }
|
||||
if ($worker = "18") { set $worker_port 3019; }
|
||||
if ($worker = "19") { set $worker_port 3020; }
|
||||
if ($worker = "20") { set $worker_port 3021; }
|
||||
if ($worker = "21") { set $worker_port 3022; }
|
||||
if ($worker = "22") { set $worker_port 3023; }
|
||||
if ($worker = "23") { set $worker_port 3024; }
|
||||
if ($worker = "24") { set $worker_port 3025; }
|
||||
if ($worker = "25") { set $worker_port 3026; }
|
||||
if ($worker = "26") { set $worker_port 3027; }
|
||||
if ($worker = "27") { set $worker_port 3028; }
|
||||
if ($worker = "28") { set $worker_port 3029; }
|
||||
if ($worker = "29") { set $worker_port 3030; }
|
||||
if ($worker = "30") { set $worker_port 3031; }
|
||||
if ($worker = "31") { set $worker_port 3032; }
|
||||
if ($worker = "32") { set $worker_port 3033; }
|
||||
if ($worker = "33") { set $worker_port 3034; }
|
||||
if ($worker = "34") { set $worker_port 3035; }
|
||||
if ($worker = "35") { set $worker_port 3036; }
|
||||
if ($worker = "36") { set $worker_port 3037; }
|
||||
if ($worker = "37") { set $worker_port 3038; }
|
||||
if ($worker = "38") { set $worker_port 3039; }
|
||||
if ($worker = "39") { set $worker_port 3040; }
|
||||
if ($worker = "40") { set $worker_port 3041; }
|
||||
|
||||
proxy_pass http://127.0.0.1:$worker_port$2$is_args$args;
|
||||
proxy_cache STATIC;
|
||||
proxy_cache_valid 200 302 24h;
|
||||
proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
|
||||
proxy_cache_lock on;
|
||||
add_header X-Cache-Status $upstream_cache_status;
|
||||
add_header Cache-Control "public, max-age=31536000, immutable";
|
||||
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection $connection_upgrade;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
|
||||
# Worker locations - Processing this first so worker-specific requests are handled by workers
|
||||
# This prevents static file regexes from capturing worker requests
|
||||
location ~* ^/w(\d+)(/.*)?$ {
|
||||
@@ -102,25 +195,6 @@ server {
|
||||
add_header Cache-Control "public, max-age=86400"; # 24 hours
|
||||
}
|
||||
|
||||
# /api/env endpoint - Cache for 1 hour
|
||||
location = /api/env {
|
||||
proxy_pass http://127.0.0.1:3000;
|
||||
proxy_http_version 1.1;
|
||||
|
||||
# Cache configuration
|
||||
proxy_cache API_CACHE;
|
||||
proxy_cache_valid 200 1h; # Cache successful responses for 1 hour
|
||||
proxy_cache_use_stale error timeout http_500 http_502 http_503 http_504;
|
||||
proxy_cache_lock on;
|
||||
add_header X-Cache-Status $upstream_cache_status;
|
||||
|
||||
# Standard proxy headers
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
|
||||
# /api/health endpoint - No caching, always hit the backend
|
||||
location = /api/health {
|
||||
proxy_pass http://127.0.0.1:3000;
|
||||
@@ -230,18 +304,14 @@ server {
|
||||
}
|
||||
|
||||
|
||||
# Root location with short Nginx cache but no browser cache
|
||||
# Root location with short shared cache for the app shell
|
||||
location = / {
|
||||
proxy_pass http://127.0.0.1:3000;
|
||||
|
||||
# Tell browsers not to cache
|
||||
add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate";
|
||||
add_header Pragma "no-cache";
|
||||
add_header Expires "0";
|
||||
|
||||
# But let Nginx cache for 1 second to reduce load
|
||||
|
||||
# Cache the shared app shell briefly at the proxy; browser/CDN policy
|
||||
# comes from the upstream Cache-Control header.
|
||||
proxy_cache STATIC;
|
||||
proxy_cache_valid 200 302 1s;
|
||||
proxy_cache_valid 200 302 300s;
|
||||
proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;
|
||||
proxy_cache_lock on;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user