Node.js web应用程序在heroku上部署后显示空白页？

我使用

reactjs

、

nodejs

和

postgres

创建web应用程序，并在本地主机上运行良好，然后我将其部署在

heroku

上并成功构建，但当我使用heroku链接打开它时，它会返回我的

空白页

，当我在

浏览器控制台中看到一些错误时

，错误很常见，重复10次。错误是

我的项目结构是：

Rootfolder/
/client
      /build
      /static
          /css
          /js
      /node_modules
      /public
      /src
         /css
            myform.css
            hrcss.css
      /component (this folder contains all my reactjs that is fronent files)
   /routes
   package.json
   Server.js

index.html（client/build/）

Server.js

var restify=require('restify')
const { logIn,userCreation, demotable } = require('./routes/Function');
const corsMiddleware = require('restify-cors-middleware2');
const { data } = require('jquery');
const PORT=process.env.PORT || 8080;
var path=require('path')
var serveStatic = require('serve-static-restify')
var server=restify.createServer() //server created

server.use(
    function crossOrigin(req,res,next){
      res.header("Access-Control-Allow-Origin", "*");
      res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
      res.setHeader('Access-Control-Allow-Credentials', true); // If needed
      res.header("Access-Control-Allow-Origin", "*");
      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
      res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
      return next();
    }
  );
const cors = corsMiddleware({
  preflightMaxAge: 5, //Optional
  origins: ['*'],
  allowHeaders: ['*'],
  exposeHeaders: ['*']
})

server.pre(cors.preflight)
server.use(cors.actual)

console.log(__dirname);
console.log(path.join(__dirname, "client/build"));
server.post('/', userCreation);  
server.use(restify.plugins.bodyParser());
server.get('/login',logIn)
server.get('/employees',demotable)


if(process.env.NODE_ENV==='production')
{
  server.get("*", restify.plugins.serveStatic({
    directory: __dirname+"/client/build",
    default: 'index.html',
    appendRequestPath: false
   })
  );
}
server.listen(PORT, function(){
    console.log("server started...")

})

heroku日志没有显示任何错误，但显示了所有文件的404状态，这在浏览器控制台中给出了错误。 heroku日志样本

2020-08-10T17:38:57.167522+00:00 heroku[router]: at=info method=GET path="/static/css/main.a8c455be.chunk.css" host=deployableema.herokuapp.com request_id=82757ef5-eeff-4640-b435-0414e90c2f80 fwd="157.47.17.61" dyno=web.1 connect=1ms service=4ms status=404 bytes=700 protocol=https

---

404

是“找不到文件”的错误代码，在您的情况下，这些CSS和JS文件找不到，因为生产版本的webpack配置生成的哈希CSS和JS文件名与HTML文件请求的文件名不匹配

---

尝试在本地机器上以生产模式构建。这将帮助您调试问题。

感谢您回复

simmer

，但我是新开发人员，因此您能否澄清我需要做什么，因为我不明白您在第一条评论中告诉我的内容。您编写的javascript和CSS通过一个“预处理”步骤运行，该步骤可以执行诸如空格压缩、重写尖端JS语法以与旧浏览器兼容等操作。当您部署到Heroku时，这些预处理器以“生产”模式运行，这可能会以与本地开发模式不同的方式修改文件。在您的例子中，在生产模式中发生的一件事情是，为了破坏缓存，处理过的文件被重命名，从而生成名为

main.62532d7.chunk.js

的文件。首先，我建议您阅读网页，了解如何理解

package.json

文件中的

脚本部分。谢谢您的回复
var restify=require('restify')
const { logIn,userCreation, demotable } = require('./routes/Function');
const corsMiddleware = require('restify-cors-middleware2');
const { data } = require('jquery');
const PORT=process.env.PORT || 8080;
var path=require('path')
var serveStatic = require('serve-static-restify')
var server=restify.createServer() //server created

server.use(
    function crossOrigin(req,res,next){
      res.header("Access-Control-Allow-Origin", "*");
      res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
      res.setHeader('Access-Control-Allow-Credentials', true); // If needed
      res.header("Access-Control-Allow-Origin", "*");
      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
      res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
      return next();
    }
  );
const cors = corsMiddleware({
  preflightMaxAge: 5, //Optional
  origins: ['*'],
  allowHeaders: ['*'],
  exposeHeaders: ['*']
})

server.pre(cors.preflight)
server.use(cors.actual)

console.log(__dirname);
console.log(path.join(__dirname, "client/build"));
server.post('/', userCreation);  
server.use(restify.plugins.bodyParser());
server.get('/login',logIn)
server.get('/employees',demotable)


if(process.env.NODE_ENV==='production')
{
  server.get("*", restify.plugins.serveStatic({
    directory: __dirname+"/client/build",
    default: 'index.html',
    appendRequestPath: false
   })
  );
}
server.listen(PORT, function(){
    console.log("server started...")

})

2020-08-10T17:38:57.167522+00:00 heroku[router]: at=info method=GET path="/static/css/main.a8c455be.chunk.css" host=deployableema.herokuapp.com request_id=82757ef5-eeff-4640-b435-0414e90c2f80 fwd="157.47.17.61" dyno=web.1 connect=1ms service=4ms status=404 bytes=700 protocol=https