使用Nginx部署React+Django应用不稳定、接口请求偶发失败

问题1：访问量计数器数值随机变化 #

该问题和Nginx无关，根源是你将计数器数据存储在Django进程内存中。你在gunicorn配置中通过--workers 3启动了3个独立的worker进程，每个进程的内存空间相互隔离，各自维护独立的计数器值。gunicorn默认采用轮询策略分配请求到不同worker，每次请求落到不同worker上就会返回不同的计数结果。
修复方案：将计数器存储到所有worker都能共享访问的公共存储中，比如Redis、MySQL数据库等，不要存储在进程内存中。

问题2：每3次服务端请求就有1次失败 #

问题出在Nginx配置逻辑错误，location /块同时配置了proxy_pass和try_files，二者逻辑冲突：
你当前的配置会让所有非/api、/static、/media开头的请求，先尝试代理到Django，如果Django无对应路由返回404后，才会执行try_files返回React的index.html，这不仅会导致大量无效请求打到Django，还会因为前端路由匹配逻辑混乱出现请求失败。
另外你当前location /块的proxy_pass配置完全多余，React打包后都是静态资源，不需要代理到Django处理。

修复后的Nginx配置参考： #

server {
    listen 80;
    server_name myip;
    client_max_body_size 700m;
    client_body_buffer_size 16k;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /path/to/app;
    }

    location /media/ {
        root /path/to/app;
    }

    # API请求直接代理到Django
    location /api {
        include proxy_params;
        proxy_pass http://unix:/home/ubuntu/myapp/myapp.sock;
        proxy_set_header X-Forwarded-Host $server_name;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 所有其他请求全部走React静态资源
    location / {
        # 此处填写你React打包后build文件夹的绝对路径
        root /path/to/your/react/build;
        try_files $uri $uri/ /index.html;
    }
}

疑问解答 #

1. 不需要单独配置适配React的api/路径，Nginx默认会优先匹配更长的前缀路径，只要保证location /api的定义顺序在location /之前即可正常匹配API请求。
2. 不需要把React应用单独在其他端口运行，生产环境React打包后都是静态资源，直接交给Nginx托管即可，启动Node服务仅适用于开发环境，生产环境用Nginx托管静态资源性能更高、更稳定。

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