Heroku：404（未找到），未创建“dist/”答案

【问题标题】：Heroku : 404 (Not Found), "dist/" not createdHeroku：404（未找到），未创建“dist/”
【发布时间】：2017-08-24 08:57:35
【问题描述】：

我正在尝试了解 PWA 的工作原理，因此我想在 Heroku 上部署我的 React PWA。成功部署且没有错误后，当我访问我的 Web 应用程序页面时，我看到了这个白页：404 Not Found nginx

经过一番研究，我发现，我需要使用这个 buildpack：https://github.com/heroku/heroku-buildpack-static

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

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

我已经添加了（就像那里解释的那样：https://gist.github.com/hone/24b06869b4c1eca701f9）这 2 个 buildpacks：

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

但它仍然无法正常工作。 当我访问我的页面时仍然找不到 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"

这是我的 package.json：

{
  "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"
  }
}

我的应用结构是：

最后是 manifest 文件：

{
  "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，所以它可能解释了为什么我没有找到 404 错误..

更新： 所以我从我的 .gitignore 中删除了 dist 文件夹，在我的 static.json 中我现在有根目录：“./dist”。现在它正在工作。我不确定 Heroku 为什么不生成我的 dist 文件。

更新 2： 我正在尝试在我的 package.json 中使用 postinstall： https://devcenter.heroku.com/articles/node-best-practices#hook-things-up 到目前为止，即使遇到以下问题，我仍然遇到同样的问题： "postinstall": "npm install && npm run build" 在 package.json 的脚本部分中

更新 3： 问题已解决！我添加了 NodeJS buildpack：heroku/nodejs 现在它正在工作。我正在使用我的包 json 脚本：“postinstall”：“webpack --env.production --config ./config/webpack.js --progress”，以及我的 NODE_ENV=production 和 NPM_CONFIG_PRODUCTION=true

【问题讨论】：

您是否尝试过在 package.json 中使用 heroku-postbuild 脚本？我在 heroku 上运行了几个应用程序，它们使用它来构建自己。还要确保安装了所需的依赖项，heroku 使用 NODE_ENV 生产运行，因此默认情况下将忽略 devDependencies。
@ivarni 谢谢，很高兴知道它对你有用，所以我可以继续寻找 heroku-postbuild 的解决方案。我已经尝试过，但它仍然无法正常工作，我肯定肯定错过了一些东西。 "heroku-postbuild": "webpack -p --config ./config/webpack.js --progress"

标签： reactjs nginx heroku webpack

【解决方案1】：

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

【讨论】：