Nginx部署Gunicorn+Django及Vue静态文件HTTPS访问故障排查

DevOps 小满

2026-8-26

问题定位

你的配置存在4个核心错误，直接导致HTTPS访问失败、前后端承载逻辑异常：

443端口对应的server块缺失server_name配置：Nginx无法将公网到443端口的website.com请求匹配到该服务块，是访问提示"This site can't be reached"的核心原因。
前后端路由匹配逻辑完全写反：原配置将根路径/的所有请求全转发给Django后端，仅/static路径走前端静态资源，但Vite构建生成的Vue包入口index.html、静态资源均在dist目录根层级，不存在static子目录前缀，导致前端页面完全无法加载。
反向代理缺失HTTPS场景必填的转发头：Django无法识别请求是HTTPS协议发起，会出现CSRF校验失败、重定向循环等问题。
宿主机公网开放8080端口存在安全隐患：用户可绕过Nginx直接通过HTTP明文访问后端服务。

修复步骤

调整Nginx配置
将原有配置替换为以下内容，注意根据实际后端接口前缀调整匹配规则（示例默认后端所有接口统一使用/api前缀，若你未做前缀配置，可将后端专属路径逐个添加location规则，强烈建议给接口加统一前缀降低维护成本）：

# HTTP请求统一跳转HTTPS
server {
    server_name .website.com;
    listen 80;
    return 301 https://$host$request_uri;
}

server {
    server_name .website.com;
    listen 443 ssl;

    # SSL证书配置（保持原有Certbot生成的配置即可）
    ssl_certificate /etc/letsencrypt/live/website.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/website.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    # 前端静态资源匹配（Vite构建的Vue包）
    location / {
        root /code/frontend/dist/;
        autoindex off;
        index index.html;
        try_files $uri $uri/ /index.html; # 适配Vue History路由模式，刷新不404
    }

    # 后端接口反向代理，匹配/api前缀的所有请求
    location /api/ {
        # 末尾加斜杠会在转发时去掉/api前缀，若Django路由本身带/api前缀请删除末尾斜杠
        proxy_pass http://localhost:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # 告知Django当前请求协议，避免CSRF、重定向异常
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 若需直接匹配/bla这类无前缀后端接口，单独添加location规则即可，示例：
    # location /bla {
    #     proxy_pass http://localhost:8080;
    #     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;
    # }
}

校验并重载Nginx配置
执行以下命令校验配置合法性，通过后重载服务：

nginx -t
nginx -s reload

如果Nginx运行在Docker容器内部，需要进入容器执行上述命令，或直接重启容器加载新配置。
3. 安全加固
修改宿主机安全组/防火墙规则，关闭8080端口的公网入方向权限，仅允许本机（127.0.0.1）访问该端口，避免后端服务直接暴露在公网。

验证标准

访问https://website.com可正常加载Vue前端页面
前端发起的HTTPS接口请求可正常拿到Django返回结果
访问http://website.com会自动跳转到HTTPS地址
公网直接访问http://website.com:8080无法连接

内容的提问来源于stack exchange，提问作者JollyRoger