关于部署重型 Django + React.js Web 应用程序的建议

Question

我最近构建了一个 Django 应用程序，它有一个数据库并执行一些浮点运算（biopython、alpha-shapes 和对来自 数据库的晶体学数据的类似算法) 应 React.js 前端的请求。

我想知道部署类似长期的东西的最佳方式是什么，以及两个代码库如何相互通信（目前在 localhost 上运行良好）。 我遇到了一些建议，例如 django 的数字海洋和前端的 firebase，当然还有heroku。

---

然而，我从来没有托管过一个最终会投入生产的网站，更不用说两个了，我有点不知所措

1. 两个代码库如何相互通信，
2. 部署时如何保留django虚拟环境中安装的所有包，
3. 如何在线传输调用所在的数据库。

---

我非常感谢任何指向要阅读的资源或架构建议的指针。 非常感谢！

Answer 1

我使用Django 和React.js 制作了一些应用程序，对我来说最好的方法如下：

• 带有django-rest-framework 和适合您的数据库的“经典”后端，
• 通过您的django API 从前端调用您的后端。

我的项目的经典架构如下所示：

.
└── your_ambitious_project
    ├── frontend
    │   ├── public
    │   │   ├── favicon.ico
    │   │   ├── index.html
    │   │   └── manifest.json
    │   ├── src
    │   ├── package.json
    │   └── ...
    ├── backend_api
    │   ├── core_api
    │   │   ├── models.py
    │   │   ├── views.py
    │   │   └── ...
    │   └── backend_api
    │       ├── __init__.py
    │       ├── settings.py
    │       └── ...
    └── ...

假设你要使用Nginx，目标是：

• 让您的 backend_api 可用于您的 React.js 前端应用程序，
• 让用户能够访问您的frontend/public/index.html。

对我来说，一个典型的 nginx.conf 文件应该是这样的：

upstream backend_api { # so we can access django backend api from frontend
    server backend_api:8000;
}
# below: in dev environment only (for hot reloading)
# upstream frontend {
#   server frontend:1337;
#}
server {
    listen 80;
    server_name your_ambitious_project;

    location /api/ {
        proxy_pass http://backend_api;
    }

    location / {
        alias /var/www/frontend/build/; # for production environment
        # proxy_pass http://frontend; # for dev environment (hot reloading)
    }
}

然后，您必须使您的后端 api 可以从外部访问，因此您将使用例如 gunicorn 来这样做：

gunicorn siapi.wsgi:application --bind 0.0.0.0:8000

对于前端，在生产环境中Nginx 将在合适的位置构建您的项目（运行npm build 之后），否则在开发环境中您将不得不运行您的服务器：npm start。

一些你可以像我一样从中获得灵感的链接：

• https://www.techiediaries.com/django-react-rest/
• https://www.valentinog.com/blog/drf/

希望它能帮助您了解如何结合使用这两个框架！