Express 没有路由到静态 React 构建文件，因为缺少 URL slug

路由到静态 React 构建文件，因为缺少 URL slug"/>

Express 没有路由到静态 React 构建文件，因为缺少 URL slug

设置

我正在构建一个使用 Express 静态提供的 React 应用程序。

• React 应用程序是使用

  npm run build

  构建的，静态文件位于

  build/

  目录中。

• Express 使用以下代码静态提供这些文件（reference）：

const path = require("path");
const express = require("express");
const app = express();
const port = 80;
const host = "::";

let root = path.join(__dirname, "build"); // Output of `npm run build`
app.use(express.static(root));  // Tell Express to serve static files from here

// The wildcard (*) lets all paths bypass Express 
// in favor of React handling client-side routing.
app.get("/*", (req, res) => {
  res.sendFile(path.join(root, "index.html"));
});

app.listen(port, host, () => {
  console.log(`Serving from root=${root}`);
  console.log(`Example app listening on host ${host} & port ${port}`);
});

我还将应用程序容器化并将其部署到 Ingress（也称为入口点）后面的 EKS。

• Ingress URL 是

  ingresspany

• 我的应用程序在

  ingresspany/my-app

  保留了一个地址。所有用户都必须能够访问这里，因此每个 URL 都应该使用这个

  /my-app

  slug.

问题

当我将浏览器指向

ingresspany/my-app

时，Express成功返回

build/index.html

。但是，找不到随附的静态 JavaScript 文件，导致没有生命的裸 HTML 文件。

我发现了原因：

• 静态 JavaScript 文件位于

  ingresspany/my-app/js/main.hash.js

• Express 正在尝试访问位于

  ingresspany/js/main.hash.js

  的文件（缺少

  my-app/

  ）并返回 404。

如何让我的 Static Express Server 在为构建文件提供服务时包含 URL slug

my-app/

？有没有办法设置基本 URL？

回答如下：