使用 express 提供静态文件时出现问题

Question

我已经阅读了几篇关于如何使用 express 从 create-react-app 提供静态文件的文章。我现在已经尝试了一切。有人可以帮我吗？

我的结构是这样的

当我将其部署到 Heroku 时出现以下错误：main.ac4887ed.js:1 Uncaught SyntaxError: Unexpected token <

为什么会这样？我已经试了几个小时了。也许我遗漏了什么？

这是我的 server.js 文件中的代码：

if (process.env.NODE_ENV === "production") {
  // Set static folder
  app.use(express.static("../build"));

  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "../build", "index.html"));
});

我的 index.html 文件在 public 文件夹中：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, 
     shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/quiz.ico">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>QuizGame</title>
 </head>
  <body>
    <div id="root"></div>
  </body>
</html>

当我尝试进入页面时，Heroku 日志的输出如下所示：

我做错了什么吗？

这是来自我的构建文件夹的index.html：

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/quiz.ico"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><title>QuizGame</title></head><body><div id="root"></div><script type="text/javascript" src="/static/js/main.ac4887ed.js"></script></body></html>

这是我的 package.json 文件，用于显示依赖项，是否需要任何依赖项才能使其工作？

"dependencies": {
"axios": "^0.17.1",
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.2",
"connect-mongo": "^2.0.1",
"express": "^4.16.2",
"express-session": "^1.15.6",
"immutable": "^3.8.2",
"jsonwebtoken": "^8.3.0",
"lodash": "^4.17.4",
"moment": "^2.19.2",
"mongoose": "^5.0.2",
"morgan": "^1.9.0",
"passport": "^0.4.0",
"passport-local": "^1.0.0",
"passport.socketio": "^3.7.0",
"react": "^16.1.1",
"react-bootstrap": "^0.32.4",
"react-countdown-now": "^1.3.0",
"react-dom": "^16.1.1",
"react-redux": "^5.0.5",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.7",
"react-scripts": "1.0.17",
"redux": "^4.0.0",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"ws": "^6.1.0"
},

Answer 1

我有一个使用 create-react-app 部署的应用程序。以下是我的设置与您的设置之间的一些差异，您可以测试一下：

    if ( process.env.MODE !== 'development')
        app.use( express.static( `${__dirname}/../build` ) );

    if ( process.env.MODE !== 'development') {
        app.get('*', (req, res)=>{
            res.sendFile(path.join(__dirname, '../build/index.html')); 
        });
    }

我对静态路径和获取端点都使用绝对路径
这些块是分开的，我将静态中间件放在所有其他中间件之前，并将 get * 端点放在服务器文件的最底部。只有 app.listen() 低于它。
您还会注意到我使用的是 path.join 而不是 path.resolve，并将一个唯一参数附加到 __dirname

确保你这样做 npm run build 并在完成后重新启动服务器。

Answer 2

我想通了：

在我的 server.js 文件中我更改了

if (process.env.NODE_ENV === "production") {
  // Set static folder
  app.use(express.static("../build"));

  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "../build", "index.html"));
});

到

if (process.env.NODE_ENV === "production") {
  // Set static folder
  app.use('/', express.static("build"));

  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "build", "index.html"));
  }); 
}

感谢大家的帮助！

Answer 3

const express = require("express");
const app = express();
var path = require("path");
var jsonServer = require("json-server");
app.use(express.static("files"));
app.post("/mm", (req, res) => {
    res.sendFile(express.static(path.join(__dirname, "/files/hey.`enter code here`html")));
});
app.use("/api", jsonServer.router("./db.json"));
app.listen(9924, () => {
    console.log("hello");
});

使用 express 提供静态文件时出现问题

Problem serving static files with express

heroku

node.js

express

create-react-app