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

如何配置Nginx直接提供静态文件,避免转发至Gunicorn/Django?

让我一步步帮你理清问题并解决:

一、先搞懂为什么/admin能正常工作

你提到的/admin请求逻辑其实是这样的:

  • /admin是Django自带的URL路由规则,当你访问http://0.0.0.0:8000/admin时,这个请求会匹配Nginx里的location /规则,被转发到Gunicorn交给Django处理。
  • Django动态渲染出admin的页面后,页面里的静态资源引用(比如/static/admin/css/base.css这类路径)会匹配Nginx的location /static规则,直接从你的static/admin文件夹返回对应的样式、脚本文件,所以你能看到完整样式的admin页面。
  • 简单说:admin的页面是Django生成的,静态资源是Nginx直接返回的,它本身不需要index.html。

二、实现让/login直接返回静态index.html的配置

要让Nginx直接处理/login请求,你需要在Nginx配置里新增一个优先级更高的location规则,把/login相关的请求都指向你的静态login文件夹。具体修改如下:

修改后的完整Nginx配置

server {
    listen 8000;
    server_name 0.0.0.0;
    rewrite_log on;
    error_log /home/vagrant/debug.log debug;
    root /sync/genetesis/github/cardioflux-webapp/myproject;

    location = /favicon.ico {
        access_log off;
        log_not_found off;
    }

    # 新增处理/login的规则,放在location /前面
    location /login {
        alias /sync/genetesis/github/cardioflux-webapp/myproject/static/login;
        # 先找请求的文件,找不到找目录,再找不到返回index.html(适配Vue SPA路由)
        try_files $uri $uri/ /login/index.html;
    }

    location /static {
        alias /sync/genetesis/github/cardioflux-webapp/myproject/static;
        autoindex on;
    }

    location / {
        include proxy_params;
        proxy_pass http://0.0.0.0:8030;
    }
}

配置说明

  1. location顺序很重要:必须把location /login放在location /前面,因为Nginx匹配location规则是按从上到下的顺序,优先匹配更精确的规则。
  2. alias的作用:指定/login请求对应的文件根目录,也就是你static下的login文件夹。
  3. try_files的作用:完美适配Vue单页应用的路由需求——如果用户访问/login,直接返回index.html;如果访问/login/static/css/style.css,返回对应的静态文件;如果用户直接访问Vue路由里的/login/xxx,也会返回index.html让前端路由处理。

生效配置

修改完成后,重启Nginx让配置生效:

sudo systemctl restart nginx

三、测试验证

  • 访问http://0.0.0.0:8000/login:应该能直接加载login文件夹下的index.html,相关的css、js静态资源也能正常加载。
  • 原有的/admin和Django首页:依然会正常转发到Gunicorn,保持原有功能。

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

火山引擎 最新活动