静态网站部署与 CDN 加速

为什么用静态站 + CDN

静态网站(HTML/CSS/JS 与图片)不做服务端计算,天然适合缓存与分发。把它托管在你的 VPS 上,再接入 CDN,就能让离用户最近的边缘节点直接返回内容,显著降低延迟、减轻源站压力。

用 Nginx 托管静态文件

在 Ubuntu/Debian 上安装并准备目录:

sudo apt update
sudo apt install -y nginx
sudo mkdir -p /var/www/mysite
# 把构建产物(dist/ 里的文件)拷到 /var/www/mysite

基础站点配置(/etc/nginx/sites-available/mysite):

server {
    listen 80;
    server_name example.com;
    root /var/www/mysite;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

单页应用(SPA)的关键:tryfiles 回退

Vue/React 等前端路由,在刷新子路径(如 /user/123)时磁盘上并没有对应文件。tryfiles $uri $uri/ /index.html; 会先找真实文件,找不到就回退到 index.html,交给前端路由处理,从而避免 404。

启用站点并重载:

sudo ln -s /etc/nginx/sites-available/mysite /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

CDN 基本原理

• 边缘缓存:CDN 在全球部署边缘节点,把静态资源缓存在离用户最近的地方。
• 回源:边缘没有缓存(未命中或已过期)时,才回你的源站取一次,再缓存下来供后续复用。

接入 CDN 的步骤概览

• 在 CDN 控制台添加你的域名,源站填 VPS 的公网 IP 或源站域名。
• 按提示把域名 DNS 的 CNAME 指向 CDN 分配的地址。
• 配置回源协议与缓存规则,并开启 HTTPS。
• 生效后用 curl -I https://example.com 观察响应头是否带上 CDN 的缓存标识。

缓存策略与 Cache-Control

命中率由源站响应头决定。给带指纹(hash)的静态资源设长缓存,给入口 index.html 设短缓存或不缓存:

location ~* \.(?:css|js|woff2?|png|jpg|jpeg|svg|ico)$ {
    expires 30d;
    add_header Cache-Control "public, max-age=2592000, immutable";
}

location = /index.html {
    add_header Cache-Control "no-cache";
}

immutable 告诉浏览器文件不会再变、无需重复校验;no-cache 让入口 HTML 每次回源校验,保证发新版能及时生效。

刷新缓存

发版后若边缘还留着旧文件,可在 CDN 控制台做刷新(purge),按 URL 或目录清除;也可用预热提前把热门资源推到边缘。更稳妥的做法是给文件名带内容 hash(如 app.a1b2c3.js),换文件名天然绕过缓存。

静态站配合 CDN 的收益

• 更低延迟:就近响应,首屏更快。
• 更省源站:多数请求在边缘命中,VPS 带宽与负载下降。
• 更抗峰值:流量激增时由边缘节点分担。

小结

用 Nginx 的 tryfiles 稳妥托管静态站与 SPA,再用 CDN 做边缘缓存与回源;靠 Cache-Control 区分长/短缓存,配合文件名 hash 与缓存刷新,就能得到又快又省又稳的静态站部署。