使用 Node.js 提供静态文件时出现问题，有时找到文件，有时找不到，如何解决？

Question

我用 create-react-app 和 Node.js 作为后端创建了一个 React 项目。我使用 Node.js.

提供静态文件

我试了几个小时才弄明白。当我在 docker 中运行并将应用程序推送到 Heroku 时，我有时会收到此错误： Error: ENOENT: no such file or directory, stat '/usr/src/app/server/build/index.html'

奇怪吗？如果我四处点击，一切正常。突然它不工作了，它告诉我它找不到 index.html ?

如果我再次进入页面并再次点击，一切正常。为什么会这样？

我在 node.js server.js 文件中提供静态文件的代码：

// Serve static files if in production or running in docker
if ( process.env.NODE_ENV === "production" || process.env.NODE_ENV === "docker" ) {
  // Set static folder
  app.use("/", express.static("build"));

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

我的文件夹结构：

还有我的反应路由器：

import Homepage from "./pages/Homepage";
import Dashboard from "./pages/Dashboard";
import Leaderboard from "./pages/Leaderboard";
import Signup from "./pages/Signup";
import Login from "./pages/Login";
import About from "./pages/About";
import Quiz from "./pages/Quiz";
import Locked from "./containers/Locked";

import WebSocketService from "./services/WebSocketService";

// Add the redux.dispatch function to WebSocketService
WebSocketService.setDispatch(store.dispatch);

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Switch>
        <Route exact path="/" component={Homepage} />
        <Route exact path="/signup" component={Signup} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/about" component={About} />
        {/* Locked */}
        <Locked>
          <Route exact path="/leaderboard" component={Leaderboard} />
          <Route exact path="/dashboard" component={Dashboard} />
          <Route exact path="/play/:quizId" component={Quiz} />
        </Locked>
        {/* 404 */}
        <Redirect to="/" />
      </Switch>
    </Router>
  </Provider>,
  document.getElementById("root")
);

在开发模式下一切正常，但在生产模式下我遇到了这些问题。当我在开发模式下刷新页面时，我仍在页面上。如果我在生产模式下刷新，我也会得到同样的错误：Error: ENOENT: no such file or directory, stat '/usr/src/app/server/build/index.html'

我可以做些什么来避免它吗？感谢您的帮助！

Answer 1

我还没有测试过，但是您正在提供 build 文件夹中的静态文件，而 app.get 正在提供该文件夹中的 index.html 文件。所以尝试：

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

这至少是表达的部分。但我不知道反应路由器如何适应图片。

Answer 2

我的疯狂猜测是 app.use("/", express.static("build")); 没有像您预期的那样工作。尝试这样做：

const clientDir = path.resolve(__dirname, 'build')
app.use(express.static(clientDir))

但很难猜。我正在使用上面的内容而没有任何问题。它可能不适用于您的用例。祝你好运。

Answer 3

我解决了问题。

提供静态文件的新代码。

// Serve static files if in production or running in docker
if ( process.env.NODE_ENV === "production" || process.env.NODE_ENV === "docker" ) {
  // Set static folder
  app.use(express.static(path.join(__dirname, '../build')));

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

使用 Node.js 提供静态文件时出现问题，有时找到文件，有时找不到，如何解决？

Problem serving static files with Node.js, sometimes files is found, sometimes not, how to solve it?

node.js

reactjs

heroku

static-files