使用 Node/Express 路由器模塊為 Create-React-App 應用程序提供服務

Question

我對 CRA 相當陌生，通常我只是將常規 React 與 Webpack 一起使用。 我正在嘗試為我的 CRA 提供服務，就像我為任何其他 React 應用程序提供服務一樣。 我的根目錄文件結構目前看起來像這樣：

controllers/
build/
app.js
package.json

其中“app.js”是我的 Node/Express 服務器， build/是我的 CRA 應用程序的構建文件夾（index.hmtl、靜態目錄、清單等都在這里）， controllers/是我的路由器文件。 我必須為我的反應服務的路由器文件，稱為“staticController.js”，位於控制器/目錄中，如下所示：

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

當我再次嘗試這條路線時，我仍然遇到同樣的錯誤。 現在我對 Node 文件結構的工作方式有點困惑。 如果 app.js 在根目錄中， localhost:3001/static/ 不就是我的static/文件夾嗎？ 為什么 CRA 應用找不到這個文件夾？

Answer 1

用

表示.靜態

為構建文件夾（或任何靜態文件）提供服務

例如：這里我在根路徑上提供 build 文件夾（假設它與服務器文件位於同一目錄中）

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

Answer 2

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

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

你需要類似的東西

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