时间戳

首页 > 解决方案 > 使用 Node/Express 路由器模块为 Create-React-App 应用程序提供服务

node.js - 使用 Node/Express 路由器模块为 Create-React-App 应用程序提供服务

问题描述

我对 CRA 还很陌生，通常我只是将常规的 React 与 Webpack 一起使用。我正在尝试为我的 CRA 服务，就像我为任何其他 React 应用程序服务一样。我的根目录文件结构目前看起来像这样：

controllers/
build/
app.js
package.json

其中“app.js”是我的 Node/Express 服务器，build/是我的 CRA 应用程序的构建文件夹（index.hmtl、静态目录、清单等都在这里），controllers/也是我的路由器文件。我必须为我的反应提供服务的路由器文件，称为“staticController.js”，位于 controllers/ 目录中，如下所示：

const express = require("express");
const path = require("path");
const router = express.Router();

router.get("/client/static/home", (req, res) => {
    res.sendFile(path.join(__dirname, ".." , "/build/index.html"));
})

module.exports = router;

我将此路由器模块导入 app.js 以使用它，并在端口 3001 上运行路由器。当我转到 localhost:3001/client/static/home 时，我得到一个空白页和一个错误提示：

GET http://localhost:3001/static/css/1.1ee5c864.chunk.css net::ERR_ABORTED 404（未找到）

我不确定如何向 CRA 指定静态目录和所有相关的构建文件应该位于“build/”目录下。因此，我将构建目录之外的静态文件夹移动到根目录中。文件结构现在看起来像这样：

controllers/
build/
static/
app.js
package.json

当我再次尝试该路线时，我仍然得到同样的错误。现在我对节点文件结构的工作方式有点困惑。如果 app.js 在根目录中，那么 localhost:3001/static/ 不就是我的static/文件夹吗？为什么 CRA 应用程序找不到此文件夹？

标签： node.jsreactjsexpresscreate-react-app

解决方案

利用

express.static

提供构建文件夹（或任何静态文件）

例如：这里我在根路径上提供构建文件夹（假设它与服务器文件位于同一目录中）

app.use('/', express.static('build'));

推荐阅读