React.JS react-create-app 后端同一端口

Question

我刚开始学习React.JS，使用react-create-app来设置项目。

我想知道是否有办法使用相同的主机和端口来响应API请求（服务器同时提供前端和后端，例如在Django中）。

文档提到了这一点，但没有详细说明。

通过相同的主机和端口，我意味着我只需要一个终端并且只运行npm start一次。

- spicyShoyo

---

什么是相同的主机和端口 - 你是指像 example.com 和 example.com/api 这样的东西吗？ - Gasim

Answer 1

如果只是用于开发，你可以简单地添加。

"proxy": "http://localhost:8000/"

将以下内容添加到你的package.json文件中。

这将把React中的API查询代理到在另一个端口（8000）上运行的其他应用程序中。

完成后，需要构建生产代码（npm build命令），其结果是一个加载了构建的js和css捆绑包的index.html文件。

从Django中，你只需要将IndexView指向此文件（可以将其作为TemplateView处理，但可能更简单的方法是像这样进行渲染：

class IndexView(View):
    def get(self, request):
        index = open(str(settings.BASE_DIR.path('build/index.html')), 'r')
        return HttpResponse(content=index.read())

然后只需要从React使用您的API-从这一点开始，两者都将在共同的端口上运行。

回到开发模式-您还可以配置Webpack以在保存更改时构建应用程序，并仅从Django（或Rails、Node或您的后端）运行它们，但我更喜欢使用代理，在开发完成之前保持两个应用程序在其本地上下文中。这种解决方案的缺点是，您需要同时运行两个应用程序。

我在这里找到了一些有关此问题的有用信息和解决方案：https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/

- Paweł BB Drozd

---

但是在开发过程中，为什么在同一个端口上运行React应用程序和Flask后端更好呢？ - Qbik