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

【问题标题】：Problem serving static files with Node.js, sometimes files is found, sometimes not, how to solve it?使用Node.js提供静态文件时出现问题，有时找到文件，有时找不到，如何解决？
【发布时间】：2018-11-20 09:08:32
【问题描述】：

我用 create-react-app 用 Node.js 作为后端创建了一个 React 项目。我使用 Node.js 提供静态文件。

我已经尝试了几个小时。当我在 docker 中运行并将应用程序推送到 Heroku 时，有时会出现此错误：错误：ENOENT：没有这样的文件或目录，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")
);

在开发模式下一切正常，但在生产中我遇到了这些问题。当我在开发模式下刷新页面时，我仍然在页面上。如果我在生产模式下刷新，我也会得到同样的错误：错误：ENOENT：没有这样的文件或目录，stat '/usr/src/app/server/build/index.html'

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

【问题讨论】：

听起来你没有适当的配置来处理结尾的/ - 或者缺少它 - 在 url 字符串的末尾。
什么意思？我能做些什么来解决它吗？谢谢

标签： node.js reactjs heroku static-files

【解决方案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"));
}

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

【讨论】：

【解决方案2】：

我的猜测是 app.use("/", express.static("build")); 无法按预期工作。尝试这样做：

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

但很难猜。我正在使用上述内容，完全没有问题。它可能不适用于您的用例。祝你好运。

【讨论】：

当我现在尝试访问该页面时，我得到：错误：ENOENT：没有这样的文件或目录，stat '/usr/src/app/server/build/index.html'
好吧，如果您无法访问您的代码，就很难为您找出问题所在。我建议使用 express.static(path) 记录您设置的路径。该消息告诉您所有需要知道的信息。您正在引用一个不存在的文件。文件实际上不存在或路径错误。

【解决方案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'));
  });
}

【讨论】：