Question

我正在尝试了解PWA的工作原理，因此我想在Heroku上部署我的React PWA。成功部署后没有错误，当我访问我的网页应用页面时，我有以下白页： 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个构建包：

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

我的应用结构是：

最后是清单文件：

{
  "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运行bash时，我看不到任何dist文件夹，所以可能周围存在构建问题？在dist文件夹中，我有index.html应该可用，这样就可以解释为什么我找不到404错误..

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

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

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

Answer 1

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

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

1 个答案: