尝试将 MERN 应用程序部署到 Heroku 时出错

Question

我正在尝试将 MERN 堆栈应用程序部署到 Heroku，除了登录页面外，一切正常。 我尝试了所有可能的解决方案，但没有任何效果。 这是我的应用程序 landing page，它显示蓝色屏幕，顶部有一个按钮，如果尝试导航到不同的路线，如 /contact 或 /plans，它工作正常。 我检查了日志和网络请求一切正常 200 状态。

我在我的机器上测试了该应用程序，它按预期工作。

在 Heroku 上显示蓝屏

这是我的 server.js 代码

// Serve Static assests if in production
if (process.env.NODE_ENV === 'production') {
  //set Static folder
  app.use(express.static('frontUI/client/build'));
  app.get('*', (req, res) => {
    res.sendFile(
      path.resolve(__dirname, 'frontUI', 'client', 'build', 'index.html')
    );
  });
}

这是我的脚本

"scripts": {
    "client-install": "npm install --prefix frontUI/client",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix frontUI/client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "heroku-postbuild":
      "NPM_CONFIG_PRODUCTION=false npm install --prefix frontUI/client && npm run build --prefix frontUI/client"
  },

我的着陆页路线

<Route
        exact
        path="/"
        render={matchProps => (
          <WithLayout
            {...matchProps}
            component={ServicesView}
            layout={MainLayout}
          />
        )}
      />