如何将 create-react-app 与提供 index.html 的后端一起使用？答案

【问题标题】：How to use create-react-app with a backend which serves index.html?如何将 create-react-app 与提供 index.html 的后端一起使用？
【发布时间】：2020-01-05 20:49:54
【问题描述】：

我有一个在 https://localhost:8080 上运行的后端 API 服务器

以及在https://localhost:3000上运行的前端

在后端，我有一个 / 路由，它为 index.html 文件提供服务。

我想要完成的是这样设置，这样当我使用 npm start 编写前端代码时，我会获得 create-react-app 实时重新加载的好处。

问题是 index.html 文件在调试模式下看起来像这样：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src='%PUBLIC_URL%/js/axios.min.js'></script>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

当我在 .env 文件中使用 npm run build 和 PUBLIC_URL=https://localhost:3000 构建应用程序时，情况会好一些，但即便如此，因为服务器没有运行，所以无法引用文件（我也宁愿不必须在每次更改之间手动运行该命令）

这超出了 create-react-app 的范围吗？我不确定要使用正确的捆绑设置，以便我使用 create-react-app，但不是从前端托管 index.html 文件，而是从后端提供它（这样我就可以在它）。

【问题讨论】：

到底是什么问题？如果您想在开发中实时重新加载，请使用npm start 并转到localhost:3000，当您想在生产中为您的应用提供服务时，请运行npm run build，然后转到localhost:8000。
你的 index.html 应该在前端，去 localhost:3000 应该在浏览器中加载它，然后将 react 加载到 <div id="root"></div> 并从 React 调用后端，通常是后端只返回 react 消耗的 json 数据
听起来你想要一个经典的网络应用，而不是一个 SPA。
@RyanPeschel 如果您这么想，模板将无法工作。如果您想避免“加载闪烁”，那么您可以查看“服务器端渲染”以加快您的初始加载，但同样，您将无法使用此设置或一般 SPA 完成“模板化”。
@RyanPeschel 这取决于您的设置，但我所说的“服务器端渲染”仍然不允许您使用“特定于用户的预填充值”来渲染初始视图。根据您的设置，“服务器端渲染”可能看起来不同。看看alligator.io/react/server-side-rendering 和flaviocopes.com/react-server-side-rendering 和nextjs.org，但这与您目前使用的方法完全不同。

标签： javascript html reactjs bundle create-react-app

【解决方案1】：

您不会以这种方式将后端与 React 一起使用。

React 是用于简化前端开发的 UI 框架。

服务器 API 用于与数据库交互并检索和存储数据，还用于托管用于发出 POST、GET、PATCH、DELETE 等请求的路由。您可以在后端使用模板渲染引擎通过模板解构函数静态渲染和提供 HTML 页面以及一些动态加载的内容，但是据我所知，这与 react 的操作方式不兼容。通常，与反应前端一起使用的后端将用于连接数据库和反应组件状态。

听起来你需要做的就是将你的静态 html 页面转换为 JSX 并通过一个反应组件呈现它，并使用一个后端（如果你仍然需要一个）来传递所需的任何数据该页面，或者您可以创建一个纯基于服务器的 Web 应用程序，该应用程序使用模板引擎来提供静态 html 页面。

如果您确实需要将数据从您的服务器发送到前端，您还应该更新您的 package.json 文件以包含一个带有 api 地址的代理

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

【讨论】：