Reactjs Heroku:404（未找到），“；地区/"；未创建

我试图了解PWA是如何工作的，所以我想在Heroku上部署我的React PWA。在成功部署且无错误后，当我访问我的web应用程序页面时，我会看到一个白色页面：404未找到nginx

经过一些研究，我发现我需要使用这个构建包：

我已经创建了一个static.json配置文件：

{
  "root": "dist/",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}

我已经添加了（如这里所解释的：）这2个构建包：

$ heroku buildpacks:clear
$ heroku buildpacks:add heroku/nodejs
$ heroku buildpacks:add https://github.com/hone/heroku-buildpack-static

{
  "name": "myname",
  "description": "mydescription",
  "version": "1.0.0",
  "scripts": {
    "postinstall": "webpack --env.production --config ./config/webpack.js --progress",
    "build": "webpack --env.production --config config/webpack",
    "start": "serve dist -s",
    "watch": "webpack-dashboard -- webpack-dev-server --config config/webpack",
  },
  "dependencies": {
    "classnames": "^2.2.5",
    "ganalytics": "^2.0.1",
    "md-colors": "^1.0.0",
    "preact": "^8.2.1",
    "preact-router": "^2.5.5",
    "prop-types": "^15.5.10"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-react-jsx": "^6.22.0",
    "babel-preset-babili": "^0.1.4",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-stage-2": "^6.22.0",
    "clean-webpack-plugin": "^0.1.15",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^4.5.0",
    "postcss-loader": "^2.0.6",
    "sass-loader": "^6.0.3",
    "serve": "^6.0.2",
    "style-loader": "^0.18.2",
    "sw-precache-webpack-plugin": "^0.11.4",
    "webpack": "^3.4.1",
    "webpack-dashboard": "^0.4.0",
    "webpack-dev-server": "^2.6.1"
  }
}

但它仍然不起作用。当我访问我的页面时，我仍然没有找到404

我在日志中找不到明确的错误消息，这里是部署后我的heroku日志：

2017-08-24T08:40:15.818194+00:00 heroku[web.1]: Restarting
2017-08-24T08:40:15.819113+00:00 heroku[web.1]: State changed from up to starting
2017-08-24T08:40:15.520597+00:00 app[api]: Release v21 created by user me@gmail.com
2017-08-24T08:40:16.760078+00:00 app[web.1]: Going down, terminating child processes...
2017-08-24T08:40:16.742709+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2017-08-24T08:40:16.852882+00:00 heroku[web.1]: Process exited with status 0
2017-08-24T08:40:18.004409+00:00 heroku[web.1]: Starting process with command `bin/boot`
2017-08-24T08:40:21.135817+00:00 app[web.1]: Starting log redirection...
2017-08-24T08:40:21.136153+00:00 app[web.1]: Starting nginx...
2017-08-24T08:40:21.778827+00:00 heroku[web.1]: State changed from starting to up
2017-08-24T08:40:36.136610+00:00 heroku[router]: at=info method=GET path="/" host=my-host.herokuapp.com request_id=5056fc07-1c22-4a91-ba91-c662a1c70dfa fwd="217.169.5.2" dyno=web.1 connect=1ms service=2ms status=404 bytes=403 protocol=https
2017-08-24T08:40:36.138603+00:00 app[web.1]: 10.157.112.148 - - [24/Aug/2017:08:40:36 +0000] "GET / HTTP/1.1" 404 191 "https://dashboard.heroku.com/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36"

这里是我的包.json：

$ heroku buildpacks:clear
$ heroku buildpacks:add heroku/nodejs
$ heroku buildpacks:add https://github.com/hone/heroku-buildpack-static

{
  "name": "myname",
  "description": "mydescription",
  "version": "1.0.0",
  "scripts": {
    "postinstall": "webpack --env.production --config ./config/webpack.js --progress",
    "build": "webpack --env.production --config config/webpack",
    "start": "serve dist -s",
    "watch": "webpack-dashboard -- webpack-dev-server --config config/webpack",
  },
  "dependencies": {
    "classnames": "^2.2.5",
    "ganalytics": "^2.0.1",
    "md-colors": "^1.0.0",
    "preact": "^8.2.1",
    "preact-router": "^2.5.5",
    "prop-types": "^15.5.10"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-react-jsx": "^6.22.0",
    "babel-preset-babili": "^0.1.4",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-stage-2": "^6.22.0",
    "clean-webpack-plugin": "^0.1.15",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^4.5.0",
    "postcss-loader": "^2.0.6",
    "sass-loader": "^6.0.3",
    "serve": "^6.0.2",
    "style-loader": "^0.18.2",
    "sw-precache-webpack-plugin": "^0.11.4",
    "webpack": "^3.4.1",
    "webpack-dashboard": "^0.4.0",
    "webpack-dev-server": "^2.6.1"
  }
}

我的应用程序结构是：

最后，清单文件：

{
  "name": "name",
  "short_name": "shorname",
  "start_url": "/?utm_source=homescreen",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#F2F2F2",
  "theme_color": "#c10079",
  "icons": [{
    "src": "icon/android-chrome-192x192.png",
    "type": "image/png",
    "sizes": "192x192"
  }, {
    "src": "icon/android-chrome-512x512.png",
    "type": "image/png",
    "sizes": "512x512"
  }]
}

我想知道是不是因为dist文件夹。当我运行heroku run bash时，我看不到任何dist文件夹，所以可能存在构建问题？在dist文件夹中，我有index.html，它应该是可用的，这样就可以解释为什么我有一个not found 404错误

更新： 因此，我从my.gitignore中删除了dist文件夹，在my static.json中，我现在有了根：“./dist”。现在它开始工作了。我不知道为什么Heroku不生成我的dist文件

更新2: 我正在尝试在我的package.json中使用postinstall： 到目前为止，我仍然有同样的问题，即使： “postinstall”：“npm安装和npm运行构建”，位于package.json的脚本部分

更新3: 问题解决了！我已经添加了nodejsbuildpack:heroku/NodeJS

---

现在它开始工作了。我正在为我的包使用json脚本：“postinstall”：“webpack--env.production--config./config/webpack.js--progress”，我的节点_env=production和NPM_config_production=true

你确定这不仅仅是路由问题吗？换句话说，您确定为该路线创建了网页吗？阅读您提供的日志后，似乎没有任何错误。有时候，最小的问题就是让你陷入困境的问题。

你有没有在package.json中尝试过使用

heroku postbuild

脚本？我在heroku上运行了几个应用程序，这些应用程序可以用来构建自己。另外，请确保安装了所需的依赖项，heroku与NODE_ENV production一起运行，因此默认情况下将忽略devdependency。@ivarni谢谢，很高兴知道它对您有效，因此我可以继续使用heroku postbuild寻找解决方案。我试过了，但还是不行，我肯定错过了什么。“heroku postbuild”：“webpack-p--config./config/webpack.js--progress”