如何在同一台服务器（Digitalocean 或 aws）上部署 react 作为前端和 drf（django rest 框架）答案

【问题标题】：how to deploy react as frontend and drf (django rest framework) on same server( Digitalocean or aws )如何在同一台服务器（Digitalocean 或 aws）上部署 react 作为前端和 drf（django rest 框架）
【发布时间】：2019-12-09 07:11:21
【问题描述】：

我有 Django 反应应用程序。我将 drf 用于 apis 并作为前端做出反应。我想将它们分别部署在同一台服务器上的数字海洋上。有什么建议吗？

【问题讨论】：

在不同的端口上运行您的 DRF cgi 服务器和 React 服务器应用程序或使用不同的套接字。您使用哪个 HTTP 服务器？
我正在使用 nginx，但您能否更具体地了解部署

标签： django reactjs django-rest-framework digital-ocean

【解决方案1】：

首先，我必须说我的主堆栈是 Django-uWSGI-NGNIX。有一个很好的说明，您可以将其与 DigitalOcean 一起使用：

How To Serve Django Applications with uWSGI and Nginx

这个是 Gunicorn 的：

How To Set Up Django with Postgres, Nginx, and Gunicorn

我建议先尝试使用这些说明在服务器上部署您的 Django 应用程序。也许这只是一个简单的一页项目。之后，您可以修改您的 ngnix 配置。就我而言，它将是：

upstream my_backend_server_name_or_whatever {
# server unix:///path/to/your/mysite/mysite.sock; -- if you want to use sockets
server 127.0.0.1:5000;
}

server {

    listen      80;
    server_name     yourdomain.com/api; #or /back, /backend, /what_you_like
    charset     utf-8;

    client_max_body_size 75M;  

    location /media #your locantions configs
    ....

    location / {
        uwsgi_pass  my_backend_server_name_or_whatever;
        include     /path/to/file/uwsgi_params;
    }
}

另外，您需要在端口 5000 上运行您的 CGI 服务器。之后，您可以通过 yourdomain.com/api 访问您的 Django 应用程序，它将上游到 localhost:5000。使用您当前的 Django 应用程序尝试此步骤。之后，您可以配置您的 DRF 以使用这些链接。

如果可行，下一步。在另一个端口上运行您的 NodeJS 服务器，例如 5100。您可以找到 Webpack 或原始 NodeJS 的相同说明。之后使用相同的技术，但用于 NodeJS 服务器。就我而言：

upstream my_frontend_server_or_whatever {
    server localhost:5100;
}

server {
    listen 80;
    server_name yourdomain.com;

    access_log /var/log/nginx/ide.access.log;
    error_log /var/log/nginx/ide.error.log;
    client_max_body_size 75M;

    location / {
        proxy_pass http://my_frontend_server_or_whatever;
        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 https;
        proxy_redirect    off;
    }

}

现在您可以将这两个文件保存为 backend.conf 和 frontend.conf，运行 ngnix 并按照上述说明检查所有配置。之后，您可以在 React 应用中使用 yourdomain.com/api 链接。

在我看来，这是尝试 React+DRF 最简单的方法。但是这些配置仅用于开发！不适用于生产。

希望对您有所帮助。

【讨论】：

什么是更好的生产方式
这取决于你的项目。您可以创建正确的 DRF 应用程序，在具体套接字上运行 Django CGI 服务器（出于安全目的），通过 webpack 构建 React 应用程序的 React 包并将其附加到 Django 应用程序中的主“index.html”。在这种情况下，您不需要分离应用程序，您将只使用一个 CGI 服务器。