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

Question

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

Answer 1

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

如何使用 uWSGI 和 Nginx 为 Django 应用程序提供服务

Gunicorn 的这个：

如何使用 Postgres、Nginx 和 Gunicorn 设置 Django

我建议首先尝试使用这些说明在服务器上部署 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 以使用这些链接。

如果有效，则进行下一步。在另一个端口（例如 5100）上运行 NodeJS 服务器。您可以找到针对 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 最简单的方法。但这些配置仅用于开发！不用于生产。

希望它有帮助。