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

【问题标题】：After heroku deployment, it looks like can't find my react app files: GET / 404部署 heroku 后，似乎找不到我的反应应用程序文件：GET / 404
【发布时间】：2020-01-04 07:08:36
【问题描述】：

我分别构建了两个应用程序：一个反应应用程序客户端 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。

【问题讨论】：

您需要在本地构建 React 应用程序，然后将 build 文件夹中的文件添加到您的 express 项目的 public 文件夹中。公共文件夹当前为空，即没有索引文件，并且您的快速应用程序没有设置/ 路由。这会导致 / 出现 404 错误。编辑：我刚刚看到你说你这样做了，但 folder 是空的。
嗨，克里斯，在 github 我还没有上传我上传到 heroku 的内容，对此感到抱歉。但是，是的，公用文件夹就像你说的那样。实际上，如果我在 localhost 工作，它可以工作......这只是 heroku 我非常疯狂的问题，为什么它不能工作！？
对，那里面到底有什么？另外，app.use(express.static(path.join(__dirname, 'public/index.html'))); 看起来很奇怪；不应该是app.use(express.static(path.join(__dirname, 'public')));吗？
你是对的，克里斯，谢谢！

标签： javascript node.js reactjs heroku

【解决方案1】：

最后，我做到了：

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

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

幸运的是，heroku 应用程序在线...

但是，我在浏览它时遇到了一些问题。

感谢 Chirs G.！

【讨论】：

第二部分不应该是必要的，它实际上可能会杀死对 JS 和 CSS 文件的请求，因为 express 总是发送 index.html 文件？
一点也不，index.html是我从npm run build in react application生成的
是的，我知道，但是 build 文件夹还包含 JS 和 CSS 文件，当请求这些文件时，上面的 * 路由将返回 index.html，据我所知.
那么，你要做什么而不是 * ？
完全删除app.get('*', ...); 路由；该 sn-p 的第一行应该涵盖您需要的所有内容，因为构建的 React 应用程序都是静态文件。

【解决方案2】：

我在 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 中删除了构建文件夹。当您在默认构建文件夹中使用创建反应应用程序时，它位于 .gitignore 中。记得在部署之前重新构建。

【讨论】：

【解决方案3】：

我得到相同的“404 找不到请求的路径”并通过从 .gitignore 中删除构建来解决它

【讨论】：