django - Django 和 React 的部署和开发环境

Question

我使用 django 和 React 构建了一个不错的 Web 应用程序，我想部署它，在开发过程中，我曾经必须将在我的系统上的不同端口上运行的应用程序、django 应用程序和 React js 应用程序分开。我正在使用 axios 连接前端和后端。现在我想我完成了我的网络应用程序的第一个版本，我想部署它，我明白它并不像我想象的那么简单，我很沮丧，我找不到正确的方法。

我的问题是使用这两个平台构建此类项目的最佳方法是什么？有没有一种方法可以让我开发这个应用程序并使其在开发中作为生产工作？我如何处理开发上的相对 http 请求，因为它的服务器不同？

我不需要完美的方法来做到这一点，因为它的第一个版本，而且我是第一次这样做，我想要正确的方法来开始并将我的第一个应用程序部署到互联网..

Answer 1

首先，您应该考虑您希望前端和后端的隔离程度。有几种部署 React + Django 的方法。

使用 Nginx 提供静态文件

我认为第一种方法，也是更简单的方法，是将其直接集成到您的反向代理中，例如 NGINX。您可以让 NGINX 直接为编译后的 React 应用程序包提供服务，就像处理任何静态 html 站点一样 - 将其放入/var/www/并直接提供服务。然后您可以将/api 的 url 映射到端口 8000 上的 Django。您的 nginx.conf 的一部分可能如下所示:

server {
    server_name your-server-host;
    root /home/www;  # this is the parent directory of where you copied your React bundle to

    location /api {
        proxy_pass http//your-server-host:8000/;  # this is where you point it to the Django server
        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 $scheme;
    }

    location / {
        try_files $uri $uri/ /index.html; # this is where you serve the React build
    }
}

直接从 Django 提供 React

第二种方法是让 Django 处理后端并让 React 处理 Django 的前端，而不是 Django 的模板系统。请注意，这与在一个端口上提供 Django 而在另一个端口上提供 React 不同。在这里，您只是为 Django 应用程序提供服务，并在 Django 的静态 Assets 中使用 React 构建包，因此它将像任何其他静态 Assets 一样提供服务。为了说明这一点，请看一下根 URL conf:

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api/', include('yourapi.urls')),
    url(r'^.*', TemplateView.as_view(template_name="index.html")
]

请注意我们如何在最后放置一个模板 View ，以捕获其前面的模式未捕获的任何 URL。一旦我们捕获它，我们就会提供 index.html ，这里我们假设它被放置在您的模板目录中。这个 index.html 应该是您构建 React 应用程序时生成的。而构建的 js 和 css 包应该位于您的 static 文件夹中，并且应该在运行 python manage.pycollectstatic 时将其收集在一起。像这样的可能的项目架构是两个项目都有两个不同的 git 存储库，但您可以将 React 存储库作为 Django 存储库的子模块。

单独为每个应用提供服务

最后一种方法可能就是您提到的，即将两个应用程序视为单独的项目并将它们部署为单独的独立项目。这意味着您可以在不同的服务器上或与 Django 应用程序不同的端口上提供 React 应用程序。在任何服务器上提供 Django 服务都是直接的，常见的做法是将其放在 gunicorn 后面。对于 React，我可以看到两种可能的选择 - 一种是像第一种方式一样提供服务:在本地构建应用程序并将构建文件放入像 /var/www 这样的目录中，然后让 nginx 提供服务构建。第二种方法是使用生产级流程管理器，例如 pm2将 React 应用程序作为进程提供服务，而不是由反向代理提供的静态文件。

最终，选择取决于您，除了考虑必须制作的两个应用程序之外，还有一些考虑因素 - 例如，您是否正在考虑部署管道？持续集成/持续交付？您是手动部署吗？您使用 Docker 进行部署吗？这些因素最终可能会影响您的决定。