Question

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

controllers/
build/
app.js
package.json

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

controllers/

我将此路由器模块导入到app.js中以使用它，并在端口3001上运行路由器。当我进入localhost：3001 / client / static / home时，出现空白页，并显示一条错误消息：

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

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

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;

当我再次尝试路由时，我仍然遇到相同的错误。现在，我对Node文件结构的工作方式有些困惑。如果app.js位于根目录中，那么localhost：3001 / static /只是我的controllers/ build/ static/ app.js package.json文件夹吗？为什么CRA应用程序找不到此文件夹？

Answer 1

我相信您正在寻找的是static。

https://expressjs.com/en/4x/api.html#express.static

您需要类似的东西

var express = require('express');
var app = express();
app.use(express.static('static'));

Answer 2

使用

express.static

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

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

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

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

2 个答案: