node.js - 404 未找到 | NGINX——尝试将客户端 React 代码部署到 Heroku 和 Webpack

Question

我正在尝试将我的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

Answer 1

错误是构建包问题，我正在使用的构建包(第三方服务推荐的特定第三方构建包，用于部署默认的裸机 react 应用程序)

无法找到我的应用程序，因为 buildpack 没有将服务器指向我创建的 dist 文件夹内的 index.html 文件，它正在寻找完全不同的文件夹

请注意

如果您在任何单页应用程序中遇到部署问题，请使用以下构建包并确保指定捆绑应用程序的根文件夹

https://github.com/heroku/heroku-buildpack-static