为 Django 和 React 部署和开发环境

Question

我用 django 构建了一个不错的 web 应用程序并做出反应，我想部署它，在开发过程中，我曾经不得不分离在我的 sys、django 应用程序和 react js 应用程序的不同端口上运行的应用程序。 我正在使用 axios 连接我的前端和后端。 现在我想我完成了我的网络应用程序的第一个版本，我想部署它，我理解它并不像我想的那样简单，我很沮丧，我找不到正确的方法。

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

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

Answer 1

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

使用 Nginx 提供静态文件

我认为第一种方法，也是更简单的方法，是将它直接集成到您的反向代理中，例如 NGINX。您可以让 NGINX 像使用任何静态 html 站点一样直接提供已编译的 React 应用程序包 - 将其放入 /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 的静态资产中使用 React 构建包，因此它可以作为任何其他静态资产服务。为了说明，看一下根 URL conf：

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

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

为每个应用单独提供服务

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

最终，选择权取决于您，除了考虑必须制作的两个应用程序之外，还有其他考虑因素 - 例如，您是否正在考虑部署管道？ CI/CD？你是手动部署的吗？您是否使用 Docker 进行部署？这些都是可能最终影响您的决定的各种因素。