在heroku部署后，似乎找不到我的React应用程序文件：GET / 404

时间：2019-08-31 09:23:22

标签： javascript node.js reactjs heroku

我分别构建了两个应用程序： 一个反应应用程序客户端 和API取决于node和express

遵循许多教程之后，我总是发现一些问题。 看来我在两个应用程序之间都没有连接，在我的代码中似乎不是index.html文件。

我的 package.json

中有此文件 
  "scripts": {
    "start": "react-app-rewired start",
    "build-dev": "dotenv -e .env.development react-app-rewired build",
    "build-prod": "dotenv -e .env.production react-app-rewired build",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
  }

我做了npm run build，并将此文件复制到我的API（服务器端）的public /文件夹中

我已经在 app.js 中将此行更改为：

app.use(express.static(path.join(__dirname, 'public/index.html')));

在我的api（服务器端）中，在公用文件夹中，我粘贴了npm run build（客户端应用程序）中的所有内容，甚至index.html。该文件的完整内容是：

<!doctype html><html><head><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/><script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script><script>"addEventListener"in document&&document.addEventListener("DOMContentLoaded",function(){FastClick.attach(document.body)},!1),window.Promise||document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"><\/script>')</script><title>A-Web</title><link href="/static/css/2.393a28fb.chunk.css" rel="stylesheet"><link href="/static/css/main.969b3049.chunk.css" rel="stylesheet"></head><body><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={1:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/2.7b0a8543.chunk.js"></script><script src="/static/js/main.c4eaec6f.chunk.js"></script></body></html>

我从heroku获得了这些日志：

2019-08-31T09:02:04.410915+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.410916+00:00 app[web.1]: at app.use (/app/app.js:38:3) message: 'Not Found' }
2019-08-31T09:02:04.413683+00:00 app[web.1]: GET / 404 3.094 ms - 23
2019-08-31T09:02:04.250521+00:00 heroku[router]: at=info method=GET path="/" host=opinoos-api.herokuapp.com request_id=ee83af00-4c66-4a52-a5e7-2966876625c1 fwd="89.128.30.48" dyno=web.1 connect=1ms service=6ms status=404 bytes=343 protocol=https
2019-08-31T09:02:04.413054+00:00 heroku[router]: at=info method=GET path="/" host=opinoos-api.herokuapp.com request_id=378720ba-9c05-464e-930e-74690578d64b fwd="89.128.30.48" dyno=web.1 connect=1ms service=7ms status=404 bytes=343 protocol=https
2019-08-31T09:02:04.594472+00:00 heroku[router]: at=info method=GET path="/" host=opinoos-api.herokuapp.com request_id=ad2abe4a-722b-497c-b97d-6e52e0fb7775 fwd="89.128.30.48" dyno=web.1 connect=1ms service=7ms status=404 bytes=343 protocol=https
2019-08-31T09:02:04.593770+00:00 app[web.1]: { NotFoundError: Not Found
2019-08-31T09:02:04.593788+00:00 app[web.1]: at /app/app.js:50:8
2019-08-31T09:02:04.593790+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:04.593792+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:04.593793+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:04.593795+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:04.593796+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.593798+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:635:15
2019-08-31T09:02:04.593802+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:260:14)
2019-08-31T09:02:04.593803+00:00 app[web.1]: at Function.handle (/app/node_modules/express/lib/router/index.js:174:3)
2019-08-31T09:02:04.593804+00:00 app[web.1]: at router (/app/node_modules/express/lib/router/index.js:47:12)
2019-08-31T09:02:04.593806+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:04.593807+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:04.593808+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:04.593810+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:04.593811+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.593812+00:00 app[web.1]: at app.use (/app/app.js:38:3) message: 'Not Found' }
2019-08-31T09:02:04.596042+00:00 app[web.1]: GET / 404 3.656 ms - 23
2019-08-31T09:02:04.711085+00:00 app[web.1]: { NotFoundError: Not Found
2019-08-31T09:02:04.711089+00:00 app[web.1]: at /app/app.js:50:8
2019-08-31T09:02:04.711091+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:04.711092+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:04.711094+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:04.711095+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:04.711097+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.711098+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:635:15
2019-08-31T09:02:04.711099+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:260:14)
2019-08-31T09:02:04.711101+00:00 app[web.1]: at Function.handle (/app/node_modules/express/lib/router/index.js:174:3)
2019-08-31T09:02:04.711102+00:00 app[web.1]: at router (/app/node_modules/express/lib/router/index.js:47:12)
2019-08-31T09:02:04.711103+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:04.711104+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:04.711106+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:04.711107+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:04.711108+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.711110+00:00 app[web.1]: at app.use (/app/app.js:38:3) message: 'Not Found' }
2019-08-31T09:02:04.734709+00:00 app[web.1]: GET / 404 4.202 ms - 23
2019-08-31T09:02:04.861445+00:00 app[web.1]: { NotFoundError: Not Found
2019-08-31T09:02:04.861467+00:00 app[web.1]: at /app/app.js:50:8
2019-08-31T09:02:04.861469+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:04.861470+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:04.861472+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:04.861473+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:04.861475+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.861476+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:635:15
2019-08-31T09:02:04.861477+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:260:14)
2019-08-31T09:02:04.861479+00:00 app[web.1]: at Function.handle (/app/node_modules/express/lib/router/index.js:174:3)
2019-08-31T09:02:04.861480+00:00 app[web.1]: at router (/app/node_modules/express/lib/router/index.js:47:12)
2019-08-31T09:02:04.861481+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:04.861482+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:04.861484+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:04.861485+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:04.861487+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:04.861488+00:00 app[web.1]: at app.use (/app/app.js:38:3) message: 'Not Found' }
2019-08-31T09:02:04.864485+00:00 app[web.1]: GET / 404 7.108 ms - 23
2019-08-31T09:02:05.052743+00:00 app[web.1]: { NotFoundError: Not Found
2019-08-31T09:02:05.052746+00:00 app[web.1]: at /app/app.js:50:8
2019-08-31T09:02:05.052748+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:05.052750+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:05.052751+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:05.052753+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:05.052754+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:05.052755+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:635:15
2019-08-31T09:02:05.052757+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:260:14)
2019-08-31T09:02:05.052758+00:00 app[web.1]: at Function.handle (/app/node_modules/express/lib/router/index.js:174:3)
2019-08-31T09:02:05.052759+00:00 app[web.1]: at router (/app/node_modules/express/lib/router/index.js:47:12)
2019-08-31T09:02:05.052761+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2019-08-31T09:02:05.052762+00:00 app[web.1]: at trim_prefix (/app/node_modules/express/lib/router/index.js:317:13)
2019-08-31T09:02:05.052763+00:00 app[web.1]: at /app/node_modules/express/lib/router/index.js:284:7
2019-08-31T09:02:05.052764+00:00 app[web.1]: at Function.process_params (/app/node_modules/express/lib/router/index.js:335:12)
2019-08-31T09:02:05.052766+00:00 app[web.1]: at next (/app/node_modules/express/lib/router/index.js:275:10)
2019-08-31T09:02:05.052767+00:00 app[web.1]: at app.use (/app/app.js:38:3) message: 'Not Found' }
2019-08-31T09:02:05.055590+00:00 app[web.1]: GET / 404 3.642 ms - 23

当我打开heroku时，控制台会向我显示：

Failed to load resource: the server responded with a status of 404 (Not Found)

{
message: "Not Found"
}

我只需要上传到heroku即可拥有生产环境。 看来一切都正确，我尝试了很多教程，但对我而言却无济于事。

我的github：

  

https://github.com/titoih/a-web

     

https://github.com/titoih/a-api

PD：我正在使用AntDesign。

3 个答案:

答案 0 :(得分：0)

最后，我做到了：

app.use(express.static(path.join(__dirname, 'public')));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

幸运的是，heroku应用程序处于在线状态...

但是，我在浏览服务器时遇到了服务器方面的问题。

感谢Chirs G。！

答案 1 :(得分：0)

我用server.js中的这段代码调试了它

app.use(express.static(path.join(__dirname, '/client/build')))

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, '/client/build', 'index.html'))
})

，我从客户端文件夹中的.gitignore删除了构建文件夹。当您重新使用create react app时，默认构建文件夹位于.gitignore中。记住在部署之前重新构建。

答案 2 :(得分：0)

我得到了相同的“ 404无法找到请求的路径”，并通过从.gitignore中删除构建来解决了该问题

相关问题
最新问题