express * 使用 app.use(express.static) 时，所有路由都不会与 create react app 一起运行

Question

我正在使用 CRA 和运行快速应用程序，但是当我运行快速应用程序 localhost:8080 呈现我的 index.html 文件时，它从来没有运行s app.get("*")。它似乎正在使用 use static 并从那里加载 html。

对这可能发生的事情有什么想法吗？

server/index.js

const express = require("express");
const path = require("path");

const PORT = process.env.PORT || "8080";
const app = express();

const indexPath = path.join(__dirname, "../build/index.html");
app.use(express.static(path.resolve(__dirname, "../build")));

app.get("/test", (req, res) => {
  res.json({ message: "welcome to backend" });
});

app.get("*", (req, res) => {
  console.log("sending index.html");
  res.sendFile(indexPath);
});

app.listen(PORT, () => console.log(`listing on port ${PORT}`));

我的文件夹结构是。

Answer 1

如果这样：

app.use(express.static(path.resolve(__dirname, "../build")));

在您的构建目录中找到传入请求的匹配项，然后它将处理该请求，并且您所遵循的路由永远不会有机会为传入请求提供服务。这就是 express.static() 的工作原理。如果你有一个你不想 express.static() 匹配的路由，那么请确保在你的静态目录结构中没有文件匹配传入路由的路径。

在您提到的特定情况下，如果 express.static() 看到对 / 的请求，那么它将在您提供的目录中查找 index.html express.static() 如果它发现在那里，它将只为它服务并完成请求。

您可以通过几种方式控制它是否匹配 / 到 index.html。首先，如果 build 目录中没有 index.html，那么 express.static() 将找不到它。或者，其次，您可以将配置选项 {index: false} 传递给 express.static()，告诉它您不希望它为 / 服务 index.html，如下所示：

app.use(express.static(path.resolve(__dirname, "../build"), {index: false}));

在你的具体情况下，不清楚为什么这是一个问题，因为你的路线：

const indexPath = path.join(__dirname, "../build/index.html");

app.get("*", (req, res) => {
  console.log("sending index.html");
  res.sendFile(indexPath);
});

两种方式都发送相同的 index.html 文件。

仅供参考，对于任何 url 请求发送 index.html 通常被认为是不明智的，因为您要使用 app.get('*', ...) 匹配，因为这对搜索引擎来说更难，其他机器人爬虫来判断哪些页面实际存在于您的网站上，哪些不存在。您可能也不希望用户将恰好可用的 non-existent URL 添加为书签，因为该页面可能会在将来的某个时间更改为其他真实内容或其他目的。

express * 使用 app.use(express.static) 时，所有路由都不会与 create react app 一起运行

express * all routes never runs with create react app when using app.use(express.static)

express

reactjs

create-react-app