7.4.1 静态资源类型与目录规划

静态资源类型与目录规划#

静态资源主要包括 HTML、CSS、JS、图片、字体、音视频与可下载文件等。合理分类与目录规划可提升缓存命中率、加速发布回滚，并便于权限与防盗链策略的统一管理。本节给出目录设计原理、可执行示例、排错与练习。

原理草图：资源路径到缓存策略

常见静态资源类型
- 文本类：.html、.css、.js、.json、.xml
- 图片类：.jpg、.png、.gif、.webp、.svg、.ico
- 字体类：.woff、.woff2、.ttf、.otf
- 多媒体：.mp4、.mp3、.flv
- 下载类：.zip、.tar.gz、.pdf

目录规划原则
- 按类型拆分，便于设置差异化缓存与防盗链
- 按业务拆分，便于权限控制与灰度发布
- 版本化管理，避免缓存污染与回滚困难
- 环境隔离（dev/test/prod），避免交叉引用

推荐目录结构示例

/data/www/
  ├── html/                  # 入口页面与模板
  ├── static/
  │   ├── css/
  │   ├── js/
  │   ├── img/
  │   ├── font/
  │   └── media/
  ├── download/
  └── app/
      ├── portal/
      └── admin/

路径命名与版本化建议
- 采用内容 hash 或版本号：/static/js/app.8f3a1d.js
- 业务模块前缀：/static/portal/js/
- 避免中文与空格，统一小写与连字符风格

---

完整可执行示例：创建目录与部署静态资源

1) 创建目录与示例文件

sudo mkdir -p /data/www/{html,static/{css,js,img,font,media},download,app/{portal,admin}}
echo '<h1>OK</h1>' | sudo tee /data/www/html/index.html >/dev/null
echo 'body{background:#f5f5f5}' | sudo tee /data/www/static/css/app.css >/dev/null
echo 'console.log("ok")' | sudo tee /data/www/static/js/app.8f3a1d.js >/dev/null

2) Nginx 配置（/etc/nginx/conf.d/static.conf）

server {
    listen 80;
    server_name static.example.com;

    # 入口页面
    location / {
        root /data/www/html;
        index index.html;
    }

    # 静态资源
    location /static/ {
        root /data/www;
        expires 30d;
        access_log off;
        add_header Cache-Control "public";
    }

    # 下载目录
    location /download/ {
        root /data/www;
        add_header Content-Disposition "attachment";
    }
}

3) 检查与重载

sudo nginx -t
sudo systemctl reload nginx

命令解释
- nginx -t：检查配置语法与路径有效性
- root /data/www;：URL /static/xx 映射到 /data/www/static/xx
- expires 30d;：设置浏览器缓存时长
- access_log off;：关闭静态资源访问日志降低 IO

---

验证与预期效果

curl -I http://static.example.com/static/js/app.8f3a1d.js

预期输出包含：
- HTTP/1.1 200 OK
- Cache-Control: public
- Expires: ...（未来 30 天）

---

常见排错
1) 404 错误：root/alias 配置不正确

# 检查资源是否真实存在
ls -l /data/www/static/js/app.8f3a1d.js
# 查看 Nginx 访问日志
tail -f /var/log/nginx/access.log

2) 缓存未生效：浏览器未收到 Expires/Cache-Control

# 查看响应头
curl -I http://static.example.com/static/css/app.css
# 检查是否命中了 location /static/
nginx -T | grep -n "location /static" -n

3) 资源目录权限问题

# 确保 nginx 用户可读
sudo chown -R nginx:nginx /data/www/static
sudo chmod -R 755 /data/www/static

---

练习
1) 为 /static/img/ 设置更长缓存（365d），并验证响应头。
2) 将 /app/portal/ 下的静态文件映射到 /portal/ 路径，给出 alias 示例并验证 200 响应。
3) 使用版本化文件名（如 app.8f3a1d.js）替换旧版本并验证浏览器强制刷新有效。