2017-05-08 87 views
0

我正在嘗試將我的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 
+0

是否的WebPack產生有效文件當你在本地運行它?你的網站在本地工作嗎? – speckledcarp

+0

是的,在本地工作就好 - 但是我不知道如何測試npm運行版本,開發版本正常工作 – aronlmin

+0

Webpack通常使用不同的版本配置作爲本地版本和發佈版本。 'npm run build'應該將所有內容發送到一個文件夾。該文件夾應該有一個index.html文件。只需在瀏覽器中打開它即可。如果一切Webpacked正確,網站應該運行爲dev設備的版本(雖然沒有任何熱重載功能)。我不確定這是否是問題,但需要檢查。 – speckledcarp

回答

3

錯誤是一個buildpack問題,我使用(由第三方服務推薦特定的第三方buildpack部署默認裸露的骨頭反應應用的buildpack )

我的應用程序無法定位,因爲在buildpack wasnt指向服務器我創造dist文件夾在我的index.html文件,它一直在尋找一個不同的文件夾完全

請留意

,如果您有任何網頁應用程序的部署問題,請使用以下buildpack並確保您指定的捆綁式應用程序的根文件夾

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