Persisting Frontend Static Resources in Containerized Deployments
The article explains why static assets of a single‑page frontend application disappear after a container restart, analyzes the root cause, and presents a practical solution that stores assets on an external file server or CDN while keeping only index.html inside the container, thereby eliminating 404 errors caused by missing resources.
This article discusses the common problem where static resources of a front‑end single‑page application (SPA) are lost after a Docker container is restarted, causing users to encounter 404 errors until they refresh the page.
The loss occurs because the build output (index.html and the assets folder) is copied into the container image; when the container restarts, the previously served asset files no longer exist, so requests for old JavaScript or CSS files fail.
The core solution is to make static assets persistent by uploading them to a long‑living file server (origin) or CDN. Only index.html remains inside the container, while all other assets are loaded from the external server, eliminating the 404 issue after restarts.
The article also clarifies the distinction between a CDN and its origin: the CDN caches resources but ultimately fetches missing or expired files from the origin file server, so deploying assets to the origin is sufficient.
To integrate this into CI/CD, the pipeline is adjusted to upload the built dist assets to the file server before the container is started. The container then serves index.html which references the external URLs.
A small demo using Vite shows that the default build outputs index.html with relative paths to assets. By configuring Vite’s experimental.renderBuiltUrl , these paths can be rewritten to absolute URLs pointing to the external file server.
export default defineConfig({
plugins: [vue()],
experimental: {
renderBuiltUrl(filename, { hostType }) {
if (hostType !== 'html') return
const projectName = 'my-app/'
return 'https://my.assets.com/' + projectName + filename
},
}
})After this configuration, the built index.html references CSS and JS files via full URLs, and the assets are uploaded to the origin server, ensuring they remain available regardless of container restarts.
In summary, persisting static resources outside the container—by uploading them to a stable file server or CDN and adjusting the build to use absolute URLs—solves the container‑restart resource‑loss problem for front‑end deployments.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.