reactjs - React.JS react-create-app 后端相同端口

Question

我是 React.JS 新手，正在使用 React-create-app 来设置项目。

我想知道是否有一种方法可以使用相同的主机和端口来响应 API 请求(服务器同时服务于前端和后端，就像在 Django 中一样)。

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

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

Answer 1

如果只是为了开发你可以简单添加

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

到您的package.json。

这会将您的 API 查询从 React 代理到在另一个端口(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 - 从此时起，两者都将在公共(public)端口上工作。

返回开发模式 - 您还可以配置 Webpack 在每次保存更改时构建应用程序，并且仅从 Django(或 Rails、Node，或任何后端)运行它们，但我更喜欢使用代理，它将两个应用程序保留在其 native 上下文中，直到完成开发。此解决方案的一个缺点是您始终需要同时运行两个应用程序。

我在那里找到了一些有用的信息和灵魂:https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/