Why Frontend Deployment Is Harder Than You Think

Simple Build and Nginx Deployment

Run npm run build to produce a dist directory. Place dist on the server, configure Nginx to serve the static files and use proxy_pass for API requests, eliminating cross‑origin issues.

Advanced Automation

For production stability and performance, CI/CD pipelines combined with Docker can automate the deployment process.

Cache‑Control Optimization

Serving assets such as a.css on every request consumes bandwidth. Even a 304 response requires a round‑trip. Setting Cache‑Control and Expires headers forces the browser to use its local cache without contacting the server.

When the cache is forced, updating a file requires changing its URL. Embedding a content hash in the filename (e.g., a.3f5e9c.css) ensures that only files whose content changed receive a new URL, providing precise cache invalidation.

Static Assets on CDN

Static resources are often deployed to CDN nodes, and HTML references are rewritten to point to the CDN URLs.

Deployment Order Dilemma

Deploy dynamic pages first, then static assets: users who load the new page may request old assets, causing style glitches until the old assets expire from cache.

Deploy static assets first, then pages: users with cached assets see the correct page, but users without cache or with expired cache may load an old page that references new assets, also causing mismatches.

Small‑traffic projects often accept the risk and deploy static assets before pages during low‑traffic windows.

Non‑Overwrite Release Strategy

Large services avoid low‑traffic windows by naming files with a content hash. New versions never overwrite existing files. The workflow is to fully deploy all hashed static assets first, then perform a gray rollout of the HTML pages.

Gray Deployment with Nginx

Gray releases split traffic using cookies. All requests initially go to service 1; a cookie determines whether a user is routed to the new version or stays on the old one. Traffic percentages can be increased gradually (5 %, 10 %, 50 %, 100 %).

Direct all traffic to service 1 and assign different cookies.

On subsequent visits, Nginx reads the cookie and forwards the request to the appropriate service, achieving gradual rollout.

Combining hash‑based static asset deployment with Nginx‑driven gray releases eliminates cache‑related glitches and supports stable, high‑performance front‑end deployments.