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

Question

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

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

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

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

我添加了（就像那里解释的那样： https: //gist.github.com/hone/24b06869b4c1eca701f9）这两个构建包：

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

但它仍然不起作用。当我访问我的页面时，仍然出现 404 not found。

我在日志中找不到明确的错误消息，部署后我的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"
  }
}

我的应用程序结构是：

最后是清单文件：

{
  "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 中我现在有 root：“./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 构建包：heroku/nodejs，现在它可以工作了。我正在使用我的包 json 脚本： "postinstall": "webpack --env.production --config ./config/webpack.js --progress"，以及我的 NODE_ENV=product 和 NPM_CONFIG_Production=true