You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

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指令,它的逻辑非常直观:

    1. 先尝试查找请求路径对应的文件($uri),比如请求/about,会找/usr/share/nginx/html/about这个文件
    2. 如果文件不存在,尝试查找对应的目录($uri/),比如找/usr/share/nginx/html/about/这个目录
    3. 如果以上都找不到,就直接返回/index.html文件

    这样不管是/contact/123还是其他任何未被前面两个location匹配的请求,最终都会返回index.html,完美适配单页应用(SPA)的前端路由场景。

注意事项

  • 确保root指定的目录下确实存在index.html文件,路径要和实际部署位置一致
  • 测试配置可以用nginx -t命令检查语法是否正确,没问题后重启Nginx生效
  • 如果你的静态文件目录不是/usr/share/nginx/html,记得替换成你实际的路径

内容的提问来源于stack exchange,提问作者K Johnson

火山引擎 最新活动