设置
我正在构建一个使用Express静态服务的React应用程序。
- React应用程序是用
npm run build
构建的,静态文件位于build/
目录中。 - Express使用以下代码静态地提供这些文件(参考):
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为
ingress.company.com
- 我的应用程序在
ingress.company.com/my-app
上保留了一个地址。所有用户都必须能够访问这里,所以每个URL都应该使用这个/my-app
slug。
问题
当我将浏览器指向ingress.company.com/my-app
时,Express成功返回build/index.html
。然而,没有找到附带的静态JavaScript文件,导致一个没有生命的空HTML文件。
我发现了原因:
- 静态JavaScript文件位于
ingress.company.com/my-app/js/main.hash.js
- Express正在尝试访问位于
ingress.company.com/js/main.hash.js
(缺少my-app/
)的文件,并返回404。
如何让Static Express Server在为构建文件提供服务时包含URL slug my-app/
?有办法设置基本URL吗?
1条答案
按热度按时间yzxexxkh1#
根据官方的Create React App文档:
默认情况下,Create React App会生成一个构建,假设你的应用托管在服务器根目录。要覆盖它,请在package.json中指定主页,例如:
这将使Create React App正确推断生成的HTML文件中使用的根路径。