Nginx静态资源配置

tone 1426 2024-12-05

基本配置原则

  1. 明确资源目录：为不同类型的静态资源指定不同的路径，这样可以避免路径冲突，并且便于管理。

  2. 正确设置文件权限：确保 Nginx 具有读取静态资源的权限。

  3. 缓存优化：为静态资源设置缓存头（如 expires），提高性能。

  4. 目录结构清晰：保持清晰、合理的目录结构，避免将所有资源放在同一目录下。

示例配置：

server {
    listen 80;
    server_name www.example.com;  # 域名

    # 设置网站的根目录
    root /usr/local/nginx/html;  # 网站根目录

    index index.html index.htm;

    # 配置静态资源路径
    # 配置 CSS 目录
    location /css/ {
        root /usr/local/nginx/html;  # 静态资源根目录
        # 缓存静态资源 1 周
        expires 7d;
        add_header Cache-Control "public";
    }

    # 配置 JS 目录
    location /js/ {
        root /usr/local/nginx/html;  # 静态资源根目录
        # 缓存静态资源 1 周
        expires 7d;
        add_header Cache-Control "public";
    }

    # 配置图片目录
    location /images/ {
        root /usr/local/nginx/html;  # 静态资源根目录
        # 缓存图片 1 月
        expires 30d;
        add_header Cache-Control "public";
    }

    # 配置其他文件类型的静态资源（如视频、音频等）
    location /media/ {
        root /usr/local/nginx/html;  # 静态资源根目录
        # 设置缓存时间
        expires 30d;
        add_header Cache-Control "public";
    }

    # 为静态文件配置错误页面
    error_page 404 /404.html;
    location = /404.html {
        root /usr/local/nginx/html;  # 设置404错误页面的目录
    }
}

配置解析：

  1. root /usr/local/nginx/html;：

    • root 指令指定了网站的根目录，静态资源将会相对于此目录来寻找。比如 location /css/ 配置意味着当访问 http://your-site/css/style.css 时，Nginx 会从 /usr/local/nginx/html/css/style.css 文件路径提供资源。

  2. expires 和 Cache-Control：

    • expires 7d; 设置资源的过期时间（在客户端缓存中存储）。例如，css 和 js 文件缓存时间为 7 天，images 和 media 目录的文件缓存时间更长，设置为 30 天。

    • add_header Cache-Control "public"; 使得这些资源可以被缓存。

  3. location /css/、location /js/、location /images/ 等：

    • 每个资源目录都单独配置了 location，Nginx 根据请求的路径 /css/、/js/ 来匹配相应的目录。

    • 这些资源将直接从 Nginx 的根目录下提供，无需代理到后端应用。

  4. error_page：

    • error_page 404 /404.html; 用于配置自定义的错误页面。当文件未找到时，Nginx 将显示自定义的 404.html 页面。

  5. location = /404.html：

    • 配置 404 错误页面的位置，Nginx 会提供一个静态的 404.html 页面。

其他注意事项：

  1. 文件权限：

    • 确保 Nginx 用户（通常是 nginx 或 www-data）对静态资源目录具有 读取权限。

  2. 避免缓存冲突：

    • 通过合理设置缓存头（如 Cache-Control）来避免客户端缓存过期的资源。对于不经常更新的资源（如图片、字体），可以设置较长的缓存时间；对于经常更新的资源（如 CSS 和 JS），可以设置较短的缓存时间。

  3. 路径避免冲突：

    • 确保静态资源的路径（如 /css/, /js/）和动态路径（如应用请求路径）没有冲突，避免路径匹配错误。

总结：

  1. 通过 location 配置不同静态资源的目录，可以提高配置的可维护性和清晰度。

  2. 使用 expires 和 Cache-Control 来设置缓存策略，提高性能。

  3. 确保静态资源文件的权限和路径正确，避免出现无法访问的情况。

  4. 定期检查日志文件，确保静态资源配置生效。

这种配置方式不仅能够有效提高网站的访问速度，还能减轻服务器的压力，因为浏览器可以缓存静态资源，减少每次访问时对服务器的请求。

Tips

500页面参考


404页面参考

静态资源集合仓库：https://gitee.com/lin_yi1/html-resources.git

Nginx