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

【问题标题】：Serving a Create-React-App application with a Node/Express router module使用 Node/Express 路由器模块为 Create-React-App 应用程序提供服务
【发布时间】：2019-06-18 20:28:33
【问题描述】：

我是 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 时，我得到一个空白页和一个错误提示：

获取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.js reactjs express create-react-app

【解决方案1】：

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

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

你需要类似的东西

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

【讨论】：

【解决方案2】：

使用

express.static

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

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

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

【讨论】：