使用 Node express 作为后端部署 ReactJS 的生产版本答案

【问题标题】：Deploy production build of ReactJS with Node express as backend使用 Node express 作为后端部署 ReactJS 的生产版本
【发布时间】：2021-09-16 09:13:10
【问题描述】：

嗨，即使经过大量搜索，我仍然对部署使用 create-react-app 创建的 react 应用程序以 express 作为后端的正确方法感到困惑。我跑了npm run build，它创建了构建文件夹。我复制了构建文件夹以用作 express 的静态文件夹并放入 app.use(express.static('build'));。它在主页上运行良好，即当我运行我的 express 节点服务器时主页打开，但是当我转到主页外的任何其他链接时，它会给出404。在开发人员模式下一切正常，我通过npm start 命令运行。我只想知道我在这里做错了什么。让我知道了解问题所需的更多信息。谢谢。

【问题讨论】：

标签： node.js reactjs express deployment create-react-app

【解决方案1】：

听起来您没有运行后端服务器。你需要 npm 启动你的服务器，然后如果有意义的话，你需要 npm 启动你的前端。它们是两个不同的东西。

【讨论】：

不，我将构建文件夹作为后端的静态文件夹提供服务，并且我正在运行后端服务器。它可以很好地打开主页，但主页外的任何链接都会给出 404，尽管它在开发模式下运行良好.. 希望你能得到它。
什么是 404？它们是来自 express 应用程序的路由，还是也是静态文件？
路由..静态文件工作正常。
您是否尝试从浏览器访问任何 GET 路由？听起来您的快递应用没有运行
没有快速应用程序正在运行，它将如何为静态文件夹提供服务。！是的，我正在尝试从浏览器获取路由，并且主页也正在呈现..但是主页外的链接不起作用

【解决方案2】：

您是否使用客户端路由？一个流行的实现是react-router。

假设您正在尝试访问/page1，客户端路由所做的是使用 JS 在不同组件之间切换以“伪造”路由，而不是渲染新的 HTML。

然而，默认情况下，当您更改路由时，浏览器会执行通常的操作并向服务器发送 GET 请求，请求相应的 HTML 文件。但由于您只提供了index.html，这就是您收到 404 的原因。

您需要在app.js 的末尾添加以下内容，就在您调用express 服务器的app.listen 之前，告诉服务器无论收到什么路由都始终返回index.html。

/* client-side routing. 
 * For GET requests from any routes (other than those which is specified above),
 * send the file "index.html" to the client-side from the folder "build"
 */
app.get("*", (_, res) => res.sendFile("index.html", { root: "build" }));

// your usual app.listen
app.listen(port, () => console.log("Listening"));

【讨论】：