如何设置 nginx 以正确地为 React 和 Django 提供服务

Question

我使用 Linux 服务器将 React 应用程序作为前端，将 Django 作为后端。

gunicorn 配置如下：

[Unit]
Description=gunicorn daemon
After=network.target

[Service]
User=name
Group=www-data
WorkingDirectory=/var/www/backend/app
ExecStart=/var/www/venv/bin/gunicorn --access-logfile - --workers 3 --bind unix:/home/name/backend.sock app.wsgi:application

[Install]
WantedBy=multi-user.target

而nginx的配置如下：

server {
    listen 80;
    root /var/www/frontend/build;
    server_name example.com;

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

    location / {

    }

    location /graphql {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_ssl_session_reuse off;
        proxy_set_header Host $http_host;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
        proxy_pass http://unix:/home/name/backend.sock;
    }
}

Django 应用 urls.py 如下：

urlpatterns = [
    path('admin/', admin.site.urls),
    path('reports/', include('reports.urls')),
    path('graphql/', csrf_exempt(GraphQLView.as_view(graphiql=True)))
]

如果我向www.example.com/graphql 发出提取请求，它可以正常工作。

但如果我想按如下方式访问 Django 管理仪表板 www.example.com/admin/ 它不起作用。

如果我理解得很好，location /graphql {} 表示 Django 应用程序在该 url 上运行。因此，如果我想访问 urls.py 文件中的一些 url，我使用www.example.com/graphql/url from urls.py

不应该是www.example.com/graphql/graphql

如何访问管理仪表板？有什么不懂的好？

Answer 1

方法一

将您的 urls.py 更改为：

from django.urls import include, path
# ... other imports ...

sub_patterns = [
    path('admin/', admin.site.urls),
    path('reports/', include('reports.urls')),
    path('graphql/', csrf_exempt(GraphQLView.as_view(graphiql=True)))
]

urlpatterns = [
    path('graphql/', include(sub_patterns)),
]

然后您将能够访问www.example.com/graphql/admin/ 的管理页面。

方法二

如果我理解得很好， location /graphql {} 表示 Django 应用程序在该 url 上运行。

实际上，没有。我们以一个虚构的 URL 为例：www.example.com/graphql/a/b/c/。 Django URL 调度程序将看到/graphql/a/b/c/（而不仅仅是您所期望的/a/b/c/）。

所以要让 Django 看到 /a/b/c/（同时仍然通过反转到 /graphql/a/b/c/ 来确保 reverse() 仍能正常工作），您可以编辑您的 nginx 配置：

// ...
    location /graphql {
        // ...
        // Add this line:
        proxy_set_header SCRIPT_NAME /graphql;
        // ...
    }
// ...

注意：我从来没有在生产中使用过这种方法，可能会有一些并发症，所以我建议你做进一步的研究。