Nginx配置咨询:静态文件服务、API代理及非匹配请求返回index.html
没问题,我来帮你搞定这个Nginx配置的问题!下面是满足你所有需求的完整配置示例,我会逐个部分解释清楚,重点讲你困惑的第三项功能怎么实现。
完整的Nginx Server配置块
server { listen 80; server_name your-domain.com; # 替换成你的域名或者localhost # 1. 直接响应所有/static路径的请求 location /static/ { root /usr/share/nginx/html; # 替换成你的静态文件根目录,/static下的文件对应该目录的/static子文件夹 expires 30d; # 可选:给静态资源设置缓存时间,优化性能 add_header Cache-Control "public, immutable"; } # 2. 将所有/api路径的请求代理至本地8200端口 location /api/ { proxy_pass http://localhost:8200/; # 注意末尾的斜杠,避免/api被重复拼接 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } # 3. 所有其他请求返回index.html location / { root /usr/share/nginx/html; # 确保index.html在这个目录下 try_files $uri $uri/ /index.html; # 核心指令!按顺序检查:先找请求文件,再找目录,都找不到就返回index.html index index.html; } }
关键部分解释
第一项(/static路径):用
location /static/匹配所有以/static开头的请求,通过root指定静态文件的根目录,Nginx会自动把请求路径拼接在root后面找文件。比如请求/static/css/style.css,会去/usr/share/nginx/html/static/css/style.css找文件直接返回。第二项(/api代理):
proxy_pass把请求转发到本地8200端口的服务,末尾的斜杠很重要——如果不加,请求/api/users会被转发成http://localhost:8200/api/users,加了斜杠则会转发成http://localhost:8200/users,你可以根据后端服务的路由规则调整。另外添加的proxy_set_header是为了让后端服务能正确获取请求的原始信息(比如真实IP、请求域名)。第三项(其他请求返回index.html):这部分的核心是
try_files指令,它的逻辑非常直观:- 先尝试查找请求路径对应的文件(
$uri),比如请求/about,会找/usr/share/nginx/html/about这个文件 - 如果文件不存在,尝试查找对应的目录(
$uri/),比如找/usr/share/nginx/html/about/这个目录 - 如果以上都找不到,就直接返回
/index.html文件
这样不管是
/contact/123还是其他任何未被前面两个location匹配的请求,最终都会返回index.html,完美适配单页应用(SPA)的前端路由场景。- 先尝试查找请求路径对应的文件(
注意事项
- 确保
root指定的目录下确实存在index.html文件,路径要和实际部署位置一致 - 测试配置可以用
nginx -t命令检查语法是否正确,没问题后重启Nginx生效 - 如果你的静态文件目录不是
/usr/share/nginx/html,记得替换成你实际的路径
内容的提问来源于stack exchange,提问作者K Johnson




