静态资源

这一课你将能做到

1. 用 root、index、try_files 托管一个前端构建产物（SPA），并解释 URI 如何拼到磁盘路径
2. 说明 CodeRoadMap 主站为何反代 Next、admin 为何 Nginx 静态，对照 prod.conf.example
3. 为带 hash 的 js/css/图片写 expires，并区分「壳 HTML」与「不可变静态」的缓存策略

为什么要学

Nginx 发静态文件极快：零应用进程、内核 sendfile、少拷贝。管理后台、落地页、文档站常常 构建完直接丢给 Nginx。
CodeRoadMap 主站是 Next（SSR/RSC），不适合整站 root；但 admin.coderoadmap.cn 正是 root + try_files 的经典 SPA 托管。
把「静态托管」与「反代动态」分清，才不会把 Next 的 _next/static 误当成必须由 Nginx 读盘，或给 index.html 乱加一年缓存导致发版后用户卡旧壳。

先建立图像

请求 URI: /assets/app.abc123.js
root:     /var/www/coderoadmap-admin/dist
磁盘文件: /var/www/coderoadmap-admin/dist + /assets/app.abc123.js

SPA 深链: /users/42
try_files: 文件？→ 目录？→ 回退 /index.html（前端路由接手）

站点	入口方式	原因
www	proxy_pass → :3000	SSR/RSC、动态路由、鉴权页
admin	root + try_files	Vite 等静态构建，无 Node 常驻亦可

人话：静态像「自助取件柜」——柜子直接给你文件；动态反代像「柜台打电话到后厨」——后厨（Next/Java）现做。

跟着做

步骤 1：对照官方 root / index

阅读 Serving Static Content 中静态部分，记下：root 指定目录，URI 拼在后面；index 决定目录默认页。

步骤 2：读 prod 里 admin 块

打开 deploy/nginx/prod.conf.example 的 admin server：

server {
    listen 443 ssl http2;
    server_name admin.coderoadmap.cn;

    # 构建产物目录（部署时把 dist 同步到此）
    root /var/www/coderoadmap-admin/dist;
    index index.html;

    location /api/ {
        # 管理端 API 仍进 Spring Boot
        proxy_pass http://coderoadmap_backend/;
        # … headers …
    }

    location / {
        # SPA：真实文件优先，否则回退前端路由
        try_files $uri $uri/ /index.html;
    }
}

在笔记写两句：

1. 静态资源与 /api/ 可共存于同一 server