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

Question

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

我想知道什么是长期部署这样的东西的最佳方式，以及两个代码库如何相互通信（目前在 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/

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