当前位置：首页 > news >正文

Nginx静态资源配置

news 2025/8/17 1:54:37

基本配置原则

明确资源目录：为不同类型的静态资源指定不同的路径，这样可以避免路径冲突，并且便于管理。
正确设置文件权限：确保 Nginx 具有读取静态资源的权限。
缓存优化：为静态资源设置缓存头（如 expires），提高性能。
目录结构清晰：保持清晰、合理的目录结构，避免将所有资源放在同一目录下。

示例配置：

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错误页面的目录}}

配置解析：

root /usr/local/nginx/html;：
- root 指令指定了网站的根目录，静态资源将会相对于此目录来寻找。比如 location /css/ 配置意味着当访问 http://your-site/css/style.css 时，Nginx 会从 /usr/local/nginx/html/css/style.css 文件路径提供资源。
expires 和 Cache-Control：
- expires 7d; 设置资源的过期时间（在客户端缓存中存储）。例如，css 和 js 文件缓存时间为 7 天，images 和 media 目录的文件缓存时间更长，设置为 30 天。
- add_header Cache-Control "public"; 使得这些资源可以被缓存。
location /css/、location /js/、location /images/ 等：
- 每个资源目录都单独配置了 location，Nginx 根据请求的路径 /css/、/js/ 来匹配相应的目录。
- 这些资源将直接从 Nginx 的根目录下提供，无需代理到后端应用。
error_page：
- error_page 404 /404.html; 用于配置自定义的错误页面。当文件未找到时，Nginx 将显示自定义的 404.html 页面。
location = /404.html：
- 配置 404 错误页面的位置，Nginx 会提供一个静态的 404.html 页面。

其他注意事项：

文件权限：
- 确保 Nginx 用户（通常是 nginx 或 www-data）对静态资源目录具有 读取权限。
避免缓存冲突：
- 通过合理设置缓存头（如 Cache-Control）来避免客户端缓存过期的资源。对于不经常更新的资源（如图片、字体），可以设置较长的缓存时间；对于经常更新的资源（如 CSS 和 JS），可以设置较短的缓存时间。
路径避免冲突：
- 确保静态资源的路径（如 /css/, /js/）和动态路径（如应用请求路径）没有冲突，避免路径匹配错误。