如何从 Nginx 提供 React 应用程序和 Django 博客？答案

【问题标题】：How to serve React app AND Django blog from Nginx?如何从 Nginx 提供 React 应用程序和 Django 博客？
【发布时间】：2018-12-09 17:45:40
【问题描述】：

我正在使用 nginx 从我的域根 / 提供一个 React 应用程序，并从 /blog 提供一个 Django 博客应用程序。我也在使用 nginx 将所有http 重定向到https。

问题是一些奇怪的行为...如果我导航到具有清晰缓存的博客，它会显示该博客。如果我然后导航到索引页面，它会显示反应应用程序。到目前为止一切都很好。但是那么，如果我返回/blog，它会继续显示 react 应用程序，而不是博客！我认为问题涉及缓存，但我不确定在哪里。

我没有使用 react-router，所以我不确定如何在客户端重定向 url。

这是我的 nginx 配置：

server {
    listen 80;
    server_name mydomain.com;
    return 301 https://$server_name$request_uri;
}


server {
    listen 443 ssl;
    server_name mydomain.com;
    root /production_build;

    location /static/ {
        root /var/www/mysite;
    }

    location /blog {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass http://upstream_django_server;
    }

    location /cms {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass http://upstream_django_server;
    }

    location / {
        try_files $uri /index.html;
    }
}

【问题讨论】：

第二次点击/blog时，nginx访问日志显示什么？
@Tarun 我第二次去 /blog 的 nginx 日志只显示对 /api 的成功（代码 200）GET 请求（我的 nginx 配置的一部分，类似于 blog 和 cms），即由我的反应应用程序调用。因此，我猜这表明浏览器没有将第二个 /blog 请求传递给服务器。为什么？
尝试禁用反应工作进程，看看在这种情况下会发生什么？
没有反应工作者，因为它是与 nginx 一起提供的捆绑包。但是，如果我只是删除 location / 部分（提供默认的 nginx 页面而不是反应）导航工作正常。
响应数据中第二个博客请求的 chrome 网络选项卡显示什么？

标签： django reactjs nginx

【解决方案1】：

您应该在 react 中禁用 service worker，因为它会干扰您的 /blog url 并在下次返回自己的响应。

由于您在这里混合了 2 个应用程序，因此您不想冒险拥有难以摆脱的东西。

Service Worker 有时会因为缓存响应而变得非常讨厌

【讨论】：