404 未找到 | NGINX——尝试将客户端 React 代码部署到 Heroku 和 Webpack
404 Not Found | NGINX -- trying to deploy client side React code to Heroku and Webpack
我正在尝试将我的 React js 应用程序（使用 react-router v4 和 webpack）部署到 heroku。
根据 heroku 的部署脚本（见下文），一切构建都没有错误，不幸的是，当实际访问页面时，它说找不到页面。
最初 Heroku 给出了构建错误，但我能够消除构建错误，现在它已成功构建，我不知道下一步应该在哪里进行故障排除。
我的整个项目代码：
https://github.com/aronlmin/react_doesnt_work/blob/master/webpack.config.js
aronlilland:backbone_cac_client (master)$ git push heroku master
Counting objects: 3, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 315 bytes | 0 bytes/s, done.
Total 3 (delta 2), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> React.js (create-react-app) multi app detected
remote: =====> Downloading Buildpack:
https://github.com/heroku/heroku-buildpack-multi.git
remote: =====> Detected Framework: Multipack
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
remote: =====> Detected Framework: Node.js
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NPM_CONFIG_PRODUCTION=false
remote: NODE_VERBOSE=false
remote: NODE_ENV=development
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): unspecified
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Resolving node version 6.x via semver.io...
remote: Downloading and installing node 6.10.3...
remote: Using default npm version: 3.10.10
remote: Resolving yarn version (latest) via semver.io...
remote: Downloading and installing yarn (0.23.4)...
remote: Installed yarn 0.23.4
remote:
remote: -----> Restoring cache
remote: ! node_modules checked into source control
remote: https://blog.heroku.com/node-habits-2016#9-only-git-the-important-bits
remote:
remote: Loading 2 from cacheDirectories (default):
remote: - node_modules
remote: - bower_components (not cached - skipping)
remote:
remote: -----> Building dependencies
remote: Installing node modules (yarn.lock)
remote: yarn install v0.23.4
remote: [1/4] Resolving packages...
remote: [2/4] Fetching packages...
remote: warning fsevents@1.1.1: The platform "linux" is incompatible with this module.
remote: info "fsevents@1.1.1" is an optional dependency and failed compatibility check. Excluding it from installation.
remote: [3/4] Linking dependencies...
remote: [4/4] Building fresh packages...
remote: $ npm run build
remote:
remote: > backbone_cac_client@1.0.0 build /tmp/build_c94a0cec125e5c3a562ef7e154841a47
remote: > webpack -p
remote:
remote: Hash: d28b920eb76ccc581c9a
remote: Version: webpack 2.5.0
remote: Time: 13581ms
remote: Asset Size Chunks Chunk Names
remote: bundle.js 386 kB 0 [emitted] [big] main
remote: index.html 383 bytes [emitted]
remote: [0] ./~/react/react.js 56 bytes {0} [built]
remote: [1] ./~/fbjs/lib/invariant.js 1.63 kB {0} [built]
remote: [26] ./~/react-dom/index.js 59 bytes {0} [built]
remote: [35] ./~/react/lib/React.js 3.32 kB {0} [built]
remote: [43] ./~/react-dom/lib/EventPluginHub.js 9.11 kB {0} [built]
remote: [67] ./~/react-grid-system/build/index.js 1.32 kB {0} [built]
remote: [182] ./src/app/App.jsx 4.01 kB {0} [built]
remote: [183] ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 1.04 kB {0} [built]
remote: [185] ./src/app/Router.jsx 3.75 kB {0} [built]
remote: [191] ./src/index.js 723 bytes {0} [built]
remote: [310] ./~/material-ui/styles/MuiThemeProvider.js 2.15 kB {0} [built]
remote: [342] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built]
remote: [405] ./~/react-router-dom/BrowserRouter.js 2.57 kB {0} [built]
remote: [428] ./~/react-tap-event-plugin/src/defaultClickRejectionStrategy.js 151 bytes {0} [built]
remote: [446] ./src/app/App.css 1 kB {0} [built]
remote: + 437 hidden modules
remote: Child html-webpack-plugin for "index.html":
remote: [0] ./~/lodash/lodash.js 540 kB {0} [built]
remote: [1] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 694 bytes {0} [built]
remote: [2] (webpack)/buildin/global.js 509 bytes {0} [built]
remote: [3] (webpack)/buildin/module.js 517 bytes {0} [built]
remote: Done in 43.06s.
remote:
remote: -----> Caching build
remote: Clearing previous node cache
remote: Saving 2 cacheDirectories (default):
remote: - node_modules
remote: - bower_components (nothing to cache)
remote:
remote: -----> Build succeeded!
remote: =====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
remote: =====> Detected Framework: React.js (create-react-app)
remote: Using existing `static.json`
remote: Enabling runtime environment variables
remote:
remote: > backbone_cac_client@1.0.0 build /tmp/build_c94a0cec125e5c3a562ef7e154841a47
remote: > webpack -p
remote:
remote: Hash: d28b920eb76ccc581c9a
remote: Version: webpack 2.5.0
remote: Time: 13451ms
remote: Asset Size Chunks Chunk Names
remote: bundle.js 386 kB 0 [emitted] [big] main
remote: index.html 383 bytes [emitted]
remote: [0] ./~/react/react.js 56 bytes {0} [built]
remote: [1] ./~/fbjs/lib/invariant.js 1.63 kB {0} [built]
remote: [26] ./~/react-dom/index.js 59 bytes {0} [built]
remote: [35] ./~/react/lib/React.js 3.32 kB {0} [built]
remote: [43] ./~/react-dom/lib/EventPluginHub.js 9.11 kB {0} [built]
remote: [67] ./~/react-grid-system/build/index.js 1.32 kB {0} [built]
remote: [182] ./src/app/App.jsx 4.01 kB {0} [built]
remote: [183] ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 1.04 kB {0} [built]
remote: [185] ./src/app/Router.jsx 3.75 kB {0} [built]
remote: [191] ./src/index.js 723 bytes {0} [built]
remote: [310] ./~/material-ui/styles/MuiThemeProvider.js 2.15 kB {0} [built]
remote: [342] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built]
remote: [405] ./~/react-router-dom/BrowserRouter.js 2.57 kB {0} [built]
remote: [428] ./~/react-tap-event-plugin/src/defaultClickRejectionStrategy.js 151 bytes {0} [built]
remote: [446] ./src/app/App.css 1 kB {0} [built]
remote: + 437 hidden modules
remote: Child html-webpack-plugin for "index.html":
remote: [0] ./~/lodash/lodash.js 540 kB {0} [built]
remote: [1] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 694 bytes {0} [built]
remote: [2] (webpack)/buildin/global.js 509 bytes {0} [built]
remote: [3] (webpack)/buildin/module.js 517 bytes {0} [built]
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
remote: =====> Detected Framework: Static HTML
remote: % Total % Received % Xferd Average Speed Time Time Time Current
remote: Dload Upload Total Spent Left Speed
remote: 100 838k 100 838k 0 0 17.5M 0 --:--:-- --:--:-- --:--:-- 17.8M
remote: -----> Installed directory to /app/bin
remote: Using release configuration from last framework (Static HTML).
remote: -----> Discovering process types
remote: Procfile declares types -> (none)
remote: Default types for buildpack -> web
remote:
remote: -----> Compressing...
remote: Done: 31.7M
remote: -----> Launching...
remote: Released v5
remote: https://cacbackboneclient.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/cacbackboneclient.git
9c5b5c6..d6cd99c master -> master
错误是 buildpack 问题，我正在使用的 buildpack（第三方服务推荐的特定第三方 buildpack 来部署默认的基本反应应用程序）
无法找到我的应用程序，因为 buildpack 没有将服务器指向我创建的 dist 文件夹中的 index.html 文件，它正在寻找完全不同的文件夹
请注意
如果您遇到任何单页应用程序的部署问题，请使用以下构建包并确保您指定了捆绑应用程序的根文件夹
我正在尝试将我的 React js 应用程序（使用 react-router v4 和 webpack）部署到 heroku。
根据 heroku 的部署脚本（见下文），一切构建都没有错误，不幸的是，当实际访问页面时，它说找不到页面。
最初 Heroku 给出了构建错误，但我能够消除构建错误，现在它已成功构建，我不知道下一步应该在哪里进行故障排除。
我的整个项目代码： https://github.com/aronlmin/react_doesnt_work/blob/master/webpack.config.js
aronlilland:backbone_cac_client (master)$ git push heroku master
Counting objects: 3, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 315 bytes | 0 bytes/s, done.
Total 3 (delta 2), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> React.js (create-react-app) multi app detected
remote: =====> Downloading Buildpack:
https://github.com/heroku/heroku-buildpack-multi.git
remote: =====> Detected Framework: Multipack
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
remote: =====> Detected Framework: Node.js
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NPM_CONFIG_PRODUCTION=false
remote: NODE_VERBOSE=false
remote: NODE_ENV=development
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): unspecified
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Resolving node version 6.x via semver.io...
remote: Downloading and installing node 6.10.3...
remote: Using default npm version: 3.10.10
remote: Resolving yarn version (latest) via semver.io...
remote: Downloading and installing yarn (0.23.4)...
remote: Installed yarn 0.23.4
remote:
remote: -----> Restoring cache
remote: ! node_modules checked into source control
remote: https://blog.heroku.com/node-habits-2016#9-only-git-the-important-bits
remote:
remote: Loading 2 from cacheDirectories (default):
remote: - node_modules
remote: - bower_components (not cached - skipping)
remote:
remote: -----> Building dependencies
remote: Installing node modules (yarn.lock)
remote: yarn install v0.23.4
remote: [1/4] Resolving packages...
remote: [2/4] Fetching packages...
remote: warning fsevents@1.1.1: The platform "linux" is incompatible with this module.
remote: info "fsevents@1.1.1" is an optional dependency and failed compatibility check. Excluding it from installation.
remote: [3/4] Linking dependencies...
remote: [4/4] Building fresh packages...
remote: $ npm run build
remote:
remote: > backbone_cac_client@1.0.0 build /tmp/build_c94a0cec125e5c3a562ef7e154841a47
remote: > webpack -p
remote:
remote: Hash: d28b920eb76ccc581c9a
remote: Version: webpack 2.5.0
remote: Time: 13581ms
remote: Asset Size Chunks Chunk Names
remote: bundle.js 386 kB 0 [emitted] [big] main
remote: index.html 383 bytes [emitted]
remote: [0] ./~/react/react.js 56 bytes {0} [built]
remote: [1] ./~/fbjs/lib/invariant.js 1.63 kB {0} [built]
remote: [26] ./~/react-dom/index.js 59 bytes {0} [built]
remote: [35] ./~/react/lib/React.js 3.32 kB {0} [built]
remote: [43] ./~/react-dom/lib/EventPluginHub.js 9.11 kB {0} [built]
remote: [67] ./~/react-grid-system/build/index.js 1.32 kB {0} [built]
remote: [182] ./src/app/App.jsx 4.01 kB {0} [built]
remote: [183] ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 1.04 kB {0} [built]
remote: [185] ./src/app/Router.jsx 3.75 kB {0} [built]
remote: [191] ./src/index.js 723 bytes {0} [built]
remote: [310] ./~/material-ui/styles/MuiThemeProvider.js 2.15 kB {0} [built]
remote: [342] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built]
remote: [405] ./~/react-router-dom/BrowserRouter.js 2.57 kB {0} [built]
remote: [428] ./~/react-tap-event-plugin/src/defaultClickRejectionStrategy.js 151 bytes {0} [built]
remote: [446] ./src/app/App.css 1 kB {0} [built]
remote: + 437 hidden modules
remote: Child html-webpack-plugin for "index.html":
remote: [0] ./~/lodash/lodash.js 540 kB {0} [built]
remote: [1] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 694 bytes {0} [built]
remote: [2] (webpack)/buildin/global.js 509 bytes {0} [built]
remote: [3] (webpack)/buildin/module.js 517 bytes {0} [built]
remote: Done in 43.06s.
remote:
remote: -----> Caching build
remote: Clearing previous node cache
remote: Saving 2 cacheDirectories (default):
remote: - node_modules
remote: - bower_components (nothing to cache)
remote:
remote: -----> Build succeeded!
remote: =====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
remote: =====> Detected Framework: React.js (create-react-app)
remote: Using existing `static.json`
remote: Enabling runtime environment variables
remote:
remote: > backbone_cac_client@1.0.0 build /tmp/build_c94a0cec125e5c3a562ef7e154841a47
remote: > webpack -p
remote:
remote: Hash: d28b920eb76ccc581c9a
remote: Version: webpack 2.5.0
remote: Time: 13451ms
remote: Asset Size Chunks Chunk Names
remote: bundle.js 386 kB 0 [emitted] [big] main
remote: index.html 383 bytes [emitted]
remote: [0] ./~/react/react.js 56 bytes {0} [built]
remote: [1] ./~/fbjs/lib/invariant.js 1.63 kB {0} [built]
remote: [26] ./~/react-dom/index.js 59 bytes {0} [built]
remote: [35] ./~/react/lib/React.js 3.32 kB {0} [built]
remote: [43] ./~/react-dom/lib/EventPluginHub.js 9.11 kB {0} [built]
remote: [67] ./~/react-grid-system/build/index.js 1.32 kB {0} [built]
remote: [182] ./src/app/App.jsx 4.01 kB {0} [built]
remote: [183] ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 1.04 kB {0} [built]
remote: [185] ./src/app/Router.jsx 3.75 kB {0} [built]
remote: [191] ./src/index.js 723 bytes {0} [built]
remote: [310] ./~/material-ui/styles/MuiThemeProvider.js 2.15 kB {0} [built]
remote: [342] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built]
remote: [405] ./~/react-router-dom/BrowserRouter.js 2.57 kB {0} [built]
remote: [428] ./~/react-tap-event-plugin/src/defaultClickRejectionStrategy.js 151 bytes {0} [built]
remote: [446] ./src/app/App.css 1 kB {0} [built]
remote: + 437 hidden modules
remote: Child html-webpack-plugin for "index.html":
remote: [0] ./~/lodash/lodash.js 540 kB {0} [built]
remote: [1] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 694 bytes {0} [built]
remote: [2] (webpack)/buildin/global.js 509 bytes {0} [built]
remote: [3] (webpack)/buildin/module.js 517 bytes {0} [built]
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
remote: =====> Detected Framework: Static HTML
remote: % Total % Received % Xferd Average Speed Time Time Time Current
remote: Dload Upload Total Spent Left Speed
remote: 100 838k 100 838k 0 0 17.5M 0 --:--:-- --:--:-- --:--:-- 17.8M
remote: -----> Installed directory to /app/bin
remote: Using release configuration from last framework (Static HTML).
remote: -----> Discovering process types
remote: Procfile declares types -> (none)
remote: Default types for buildpack -> web
remote:
remote: -----> Compressing...
remote: Done: 31.7M
remote: -----> Launching...
remote: Released v5
remote: https://cacbackboneclient.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/cacbackboneclient.git
9c5b5c6..d6cd99c master -> master
错误是 buildpack 问题，我正在使用的 buildpack（第三方服务推荐的特定第三方 buildpack 来部署默认的基本反应应用程序）
无法找到我的应用程序，因为 buildpack 没有将服务器指向我创建的 dist 文件夹中的 index.html 文件，它正在寻找完全不同的文件夹
请注意
如果您遇到任何单页应用程序的部署问题，请使用以下构建包并确保您指定了捆绑应用程序的根文件夹