React.JS react-create-app 后端相同的端口答案

【问题标题】：React.JS react-create-app backend same portReact.JS react-create-app 后端相同的端口
【发布时间】：2017-01-25 21:37:13
【问题描述】：

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

我想知道有没有办法使用相同的主机和端口来响应 API 请求（服务器同时服务于前端和后端，就像在 Django 中一样）。

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

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

【问题讨论】：

同一个主机和端口是什么意思——你是指example.com和example.com/api这样的东西吗？

标签： reactjs

【解决方案1】：

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

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

致您的package.json。

这会将您的 API 查询从 React 代理到您在另一个端口（那里是 8000）上工作的其他应用程序。

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

在 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/

【讨论】：

但是为什么在开发过程中在同一端口上运行 react 应用程序和例如烧瓶后端会更好？