Question

我使用reactjs，nodejs和postgres创建Web应用程序，并且在localhost上运行良好，然后将其部署在heroku上，并且构建成功，但是打开它使用heroku链接返回我blank page，当我在browser console I see some errors中看到错误时，错误很常见，并重复10次。错误是

Error in console displays in image

我的项目结构为：

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 （客户端/构建/）

<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"><link rel="stylesheet" href="../src/css/myform.css"/><link rel="stylesheet" href="../src/css/Hrcss.css"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="./logo192.png"/><link rel="manifest" href="./manifest.json"/><title>React App</title><link href="./static/css/main.305b25b3.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script><script>!function(e){function r(r){for(var n,l,a=r[0],f=r[1],i=r[2],c=0,s=[];c<a.length;c++)l=a[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,i||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,a=1;a<t.length;a++){var f=t[a];0!==o[f]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var a=this.webpackJsonpema=this.webpackJsonpema||[],f=a.push.bind(a);a.push=r,a=a.slice();for(var i=0;i<a.length;i++)r(a[i]);var p=f;t()}([])</script><script src="./static/js/2.c570e064.chunk.js"></script><script src="./static/js/main.cbcc4cc1.chunk.js"></script></body></html>

package.json （来自根目录）

{
  "name": "backend",
  "version": "1.0.0",
  "engines": {
    "npm": "6.x",
    "node": "12.18.2"
  },
  "main": "index.js",
  "start": "node Server.js",
  "heroku-postbuild": "cd client && npm install && npm run build",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "client": "npm run start --prefix client",
    "server": "nodemon Server.js",
    "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\"",
    "start": "node Server.js",
    "heroku-postbuild": "cd client && npm install && npm run build"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^8.2.0",
    "jquery": "^3.5.1",
    "pg": "^8.3.0",
    "pg-hstore": "^2.3.3",
    "restify": "^8.5.1",
    "restify-cors-middleware2": "^2.1.0",
    "sequelize": "^6.3.3",
    "sequelize-cli": "^6.2.0",
    "serve-static-restify": "^3.0.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.4"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/path.git"
  },
  "keywords": [],
  "bugs": {
    "url": "https://github.com/path"
  },
  "homepage": "https://github.com/path",
  "description": ""
}

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

Answer 1

404是“找不到文件”的错误代码，在您的情况下，未找到那些CSS和JS文件，因为由webpack配置为生产构建生成的哈希CSS和JS文件名确实存在与您的HTML文件请求的文件名不匹配。

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

在heroku上部署后，Web应用程序显示空白页吗？

1 个答案: