如何使用 expressJS 服务 ReactJS 静态文件？

Question

问题

我已经成功地为我的 React 应用程序提供了 index.html 文件，但是 index.js 替换了 html 文件中的 <root> 我的第一个 React 组件没有在 ReactDOM.render 上触发。 如何启动 index.js 文件？ 如果我对服务 React 应用程序的理解在某些方面有偏差，我会非常感谢澄清。

文件夹结构

/ - 包含所有服务器端文件，包括 server.js
/client/ - 包含所有 React 文件
/client/build/ - 包含所有生产就绪的客户端文件
- /client/build/index.html
- /client/build/static/js/main.[hash].js - 似乎是 index.js 的缩小版本，其中包含 ReactDOM.render 我的 React 应用程序

当前部署

我正在为 /client/ 目录使用 Facebook 的 create-react-app，包括 npm 运行 build 以自动填充 /client/build/

文件片段

// server.js
let app = express();
app.use(express.static(path.join(__dirname, '../client/public')));

这成功加载了由 index.html 提供的默认设置创建反应应用程序

// index.html
<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="root"></div>
</body>

上面那段代码may/may用处不大，不过是默认的 html create-react-app 自带的文件。我需要更换吗带有引用缩小 index.js 的脚本标签的 noscript 标签文件？我试过了，没有任何改变，但也许是因为不正确的相对路径。

Answer 1

通过 trial/error 尝试了许多不同的事情后，解决方案非常简单：

在静态调用中提供 /client/build 文件夹，如下所示：

app.use(express.static(path.join(__dirname, '../client/build')));

Answer 2

我有一段时间遇到了同样的问题，我会说有效的解决方案分为两部分以避免路由器出现问题

服务器来自 CRA 构建的静态（在您的情况下 client/build）

const buildPath = path.normalize(path.join(__dirname, '../client/build'));
app.use(express.static(buildPath));

设置最终路由（在服务器中的所有其他路由器之后）以使用以下内容：

const rootRouter = express.Router();
/* 
* all your other routes go here
*/
rootRouter.get('(/*)?', async (req, res, next) => {
  res.sendFile(path.join(buildPath, 'index.html'));
});
app.use(rootRouter);

Answer 3

//在你的 React 应用程序上运行

npm run build

//在你的服务器上插入以下代码

const path = require("path");
app.use(express.static(path.join(__dirname,"nameOfYourReactApp","build")))

//Replace nameOfYourReactApp with the name of your app

Answer 4

我的项目结构
项目
-->客户端
后端（快递）\

在使用 npn 运行构建后，我发现构建中的 index.html 使用了错误的 css 文件目录或静态目录，而不是使用

const path = require('path');
app.use(express.static(path.join(__dirname, '/client/build/')));

我知道我也试过../client ......但没有用

所以我所做的是将构建的静态文件夹剪切并粘贴到根目录中这张图片可以给你想法，它的工作原理 structure

如何使用 expressJS 服务 ReactJS 静态文件？

How to serve ReactJS static files with expressJS?

static

express

reactjs

server

create-react-app

问题

文件夹结构

当前部署

文件片段