Heroku 部署错误 : displaying backend, 不是前端

Question

我正在尝试将本地 MERN 应用程序部署到 Heroku。应用程序离线工作。部署后，当点击“打开应用程序”时，我看到的只是来自后端的数据。不是前端。部署在这里:https://whispering-falls-45660.herokuapp.com/。

新建Heroku工程，git push Heroku master成功后，应用只显示后台数据。 Heroku CLI 版本:heroku/7.24.1，Node 版本:v10.13.0。

Github 仓库:https://github.com/neilhsieh/whereToEat

根据 Brad Traversy，Package.json 文件具有适当的脚本:

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

server.js 代码有适当的代码指向客户端构建文件:

if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'))

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

期望前端部署在 Heroku 上，结果只有后端。

更新:将 process.env.NODE_ENV 测试移至所有 API 调用之前，这解决了我的问题。

Answer 1

1. 首先，如果您的 server/app.js 文件中有这样的路由

   app.get("/", (req, res) => res.send("Api Running"));

   绝对摆脱它

2. 然后将这些行添加到您的 server/app.js 文件

   const path = require("path");
   
   if (process.env.NODE_ENV === "production") {
   
       app.use(express.static("client/build"));
   
       app.get("*", (req, res) => {
   
       res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
   
      });
   
   }