Question

我使用django构建一个漂亮的Web应用程序并做出反应，我想部署它，在开发期间我曾经不得不分离在我的sys，django应用程序和反应js app上的不同端口上运行的应用程序。我使用axios连接我的前端和后端。现在我想我完成了我的第一个版本的我的网络应用程序，我想部署它，我理解它不是那么简单，因为我想，我很沮丧，我无法找到正确的方法。

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

我不需要完美的方式去做，因为它的第一个版本和我第一次这样做，我想要正确的方式开始并将我的第一个应用程序部署到互联网上。

Answer 1

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

使用Nginx提供静态文件

我认为第一种方式，更简单的方法是将其直接集成到您的反向代理中，例如NGINX。您可以像使用任何静态html站点一样直接为NGINX提供已编译的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应用时生成的python manage.py collectstatic。虽然构建的js和css包应该在你的静态文件夹中，但是当你运行gunicorn时它应该被收集在一起。像这样的可能的项目架构将有两个项目有两个不同的git存储库，但是你可以使React存储库成为Django存储库的子模块。

单独提供每个应用

最后一种方法可能就是你所提到的，即将两个应用程序视为单独的项目，并将它们部署为独立的独立项目。这意味着您可以在与Django应用程序不同的服务器或不同端口上提供React应用程序。服务Django在任何服务器上都是直接的，通常的做法是将它放在/var/www之后。但是对于React，我可以看到两个可能的选项 - 一个是以第一种方式提供它：在本地构建应用程序并将构建文件放入像{% load crispy_forms_tags %} <form action="post" ...> {% crispy formset %} </form>这样的目录中，让nginx为构建服务。第二种方法是使用生产级流程管理器（如pm2）将React应用程序作为进程提供，而不是由反向代理服务的静态文件。

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

为Django和React

1 个答案: