Javascript 在heroku部署之后，它看起来像can'；找不到我的react应用程序文件：GET/404_Javascript_Node.js_Reactjs_Heroku

Javascript 在heroku部署之后，它看起来像can'；找不到我的react应用程序文件：GET/404

javascript node.js reactjs heroku

Javascript 在heroku部署之后，它看起来像can'；找不到我的react应用程序文件：GET/404,javascript,node.js,reactjs,heroku,Javascript,Node.js,Reactjs,Heroku,我分别构建了两个应用程序：一个应用程序客户端和API rest以及node和express 在学习了很多教程之后，我发现总是有一些问题。看起来两个应用程序之间没有连接，代码中似乎没有index.html文件我的包中有这个。json "scripts": { "start": "react-app-rewired start", "build-dev": "dotenv -e .e

我分别构建了两个应用程序：一个应用程序客户端和API rest以及node和express

在学习了很多教程之后，我发现总是有一些问题。看起来两个应用程序之间没有连接，代码中似乎没有index.html文件

我的包中有这个。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运行构建，并将此文件复制到API（服务器端）中的公共/文件夹

我已经将app.js中的这一行更改为：

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

在我的api（服务器端）中，我在公用文件夹中粘贴了从npm运行构建（客户端应用程序）到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时，控制台显示：

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

{
message: "Not Found"
}

我只需要上传到heroku就可以有生产环境了。似乎一切都是正确的，我尝试了很多教程，但都不适合我

我的github：

PD：我正在使用AntDesign。

最后，我做了以下工作：

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

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

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

然而，我遇到了一些问题来解决它

谢谢Chirs G

我在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中删除了构建文件夹。当您使用CreateReact应用程序时，默认生成文件夹位于.gitignore中。请记住在部署之前进行新构建。

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

您需要在本地构建React应用程序，然后将

构建

文件夹中的文件添加到express项目的

公共

文件夹中。公用文件夹当前为空，即没有索引文件，并且您的express应用程序没有设置路由。这将导致

的404错误。编辑：我刚才看到你说你这么做了，但是那是空的。嗨，克里斯，在github，我还没有上传我上传到heroku的内容，很抱歉。但是，是的，公用文件夹就像你说的那样。事实上，如果我在localhost工作，它会工作。。。这只是heroku我最大的疯狂问题，为什么它不能工作！？对，那里面到底是什么？另外，

app.use（express.static（path.join（uu dirname，'public/index.html'））似乎很奇怪；它不应该是app.use（express.static（path.join（uu dirname，'public'））？你说得对，克里斯，谢谢！第二部分应该没有必要，它实际上可能会终止对JS和CSS文件的请求，因为express总是发送index.html文件？一点也不，index.html是我从npm run build in react应用程序生成的，我知道，但是build文件夹也包含JS和CSS文件，当请求时，据我所知，上面的*
路由将返回index.html
。那么，你想做什么来代替*？只需删除app.get（'*'，…）路线；该代码段的第一行应该涵盖您需要的所有内容，因为构建的React应用程序都是静态文件。
app.use(express.static(path.join(__dirname, '/client/build')))

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