如何配置NGINX实现Django与Angular PWA共存部署？

我来帮你搞定这个配置冲突的事儿～你现在的问题是两个独立的server块监听了同一个IP和端口，Nginx启动时会优先使用第一个加载的server配置，导致Angular的/pwa路径完全没机会被匹配到。

核心思路 #

把两个server的配置合并到同一个server块里，按照路由匹配的优先级来排列location规则：

• 先处理Angular的/pwa前缀路径（因为前缀匹配需要放在通用匹配前面）
• 再处理Django的静态资源、favicon等特殊路径
• 最后用根路径/的proxy_pass接管所有其他请求到Django

完整可行配置 #

server {
    listen 123.456.7.89:80;

    # Angular PWA 路径配置
    location /pwa {
        root /home/pwa/dist/reportpwa;
        try_files $uri $uri/ /pwa/index.html;  # 注意这里要改成/pwa/index.html，避免跳转到Django的根路径
    }

    # Django 相关配置
    location = /favicon.ico {
        access_log off;
        log_not_found off;
    }

    location /static/ {
        root /home/django-apps/reportdbapi;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }
}

关键细节说明 #

• location /pwa里的try_files最后要写/pwa/index.html，而不是原来的/index.html，否则当Angular的路由（比如/pwa/dashboard）匹配不到静态文件时，会跳转到Django的根路径，而不是Angular的入口文件。
• 所有location规则按从特殊到通用的顺序排列，Nginx会优先匹配先出现的规则，确保/pwa路径的请求不会被后面的根路径规则拦截。

测试步骤 #

1. 替换原有的两个server配置为上面的代码
2. 检查Nginx配置语法：sudo nginx -t
3. 重启Nginx生效：sudo systemctl restart nginx

这样配置后，访问http://123.456.7.89/pwa会加载Angular应用，其他路径则正常走Django的接口服务，两者的路由就不会冲突啦～

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