Nginx静态资源配置

基本配置原则

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