我正在嘗試將我的React js應用程序(使用react-router v4和webpack)部署到heroku。404未找到| NGINX - 嘗試將客戶端React代碼部署到Heroku和Webpack
不幸的是,當實際訪問頁面時,根據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 [email protected]: The platform "linux" is incompatible with this module.
remote: info "[email protected]" 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: > [email protected] 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: > [email protected] 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
是否的WebPack產生有效文件當你在本地運行它?你的網站在本地工作嗎? – speckledcarp
是的,在本地工作就好 - 但是我不知道如何測試npm運行版本,開發版本正常工作 – aronlmin
Webpack通常使用不同的版本配置作爲本地版本和發佈版本。 'npm run build'應該將所有內容發送到一個文件夾。該文件夾應該有一個index.html文件。只需在瀏覽器中打開它即可。如果一切Webpacked正確,網站應該運行爲dev設備的版本(雖然沒有任何熱重載功能)。我不確定這是否是問題,但需要檢查。 – speckledcarp