iT邦幫忙

0

React專案佈署heroku問題

heroku react
silence 2020-05-25 14:04:30 ‧ 6242 瀏覽

  • 分享至 

  • xImage

想請教各位大大，小弟目前想把react專案佈署到heroku上，有顯示success，專案看起來也有推上去，但是點開了網址卻是 Application error，找了很久找不出問題，想請問是什麼問題? 謝謝~https://ithelp.ithome.com.tw/upload/images/20200525/20109533WjW5GkGWBy.jpg

https://ithelp.ithome.com.tw/upload/images/20200525/20109533Xa7TmGeTpR.jpg

logs

2020-05-25T04:30:55.533693+00:00 app[api]: Scaled to web@1:Free by user beast964089@gmail.com
2020-05-25T04:31:04.000000+00:00 app[api]: Build succeeded
2020-05-25T04:31:08.337904+00:00 heroku[web.1]: Starting process with command `npm start`
2020-05-25T04:31:11.596590+00:00 app[web.1]:
2020-05-25T04:31:11.596611+00:00 app[web.1]: > react-erp@0.1.0 start /app
2020-05-25T04:31:11.596612+00:00 app[web.1]: > react-scripts start
2020-05-25T04:31:11.596612+00:00 app[web.1]:
2020-05-25T04:31:15.963001+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.18.211.94/
2020-05-25T04:31:15.963827+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-05-25T04:31:15.964011+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-05-25T04:31:15.964180+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-05-25T04:31:15.964536+00:00 app[web.1]: Starting the development server...
2020-05-25T04:31:15.964536+00:00 app[web.1]:
2020-05-25T04:31:16.096482+00:00 heroku[web.1]: Process exited with status 0
2020-05-25T04:31:16.156713+00:00 heroku[web.1]: State changed from starting to crashed
2020-05-25T04:31:16.160577+00:00 heroku[web.1]: State changed from crashed to starting
2020-05-25T04:31:26.037181+00:00 heroku[web.1]: Starting process with command `npm start`
2020-05-25T04:31:28.995603+00:00 app[web.1]:
2020-05-25T04:31:28.995620+00:00 app[web.1]: > react-erp@0.1.0 start /app
2020-05-25T04:31:28.995621+00:00 app[web.1]: > react-scripts start
2020-05-25T04:31:28.995621+00:00 app[web.1]:
2020-05-25T04:31:31.785012+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.18.101.166/
2020-05-25T04:31:31.786041+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-05-25T04:31:31.786180+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-05-25T04:31:31.786265+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-05-25T04:31:31.786455+00:00 app[web.1]: Starting the development server...
2020-05-25T04:31:31.786457+00:00 app[web.1]:
2020-05-25T04:31:31.860323+00:00 heroku[web.1]: Process exited with status 0
2020-05-25T04:31:31.917969+00:00 heroku[web.1]: State changed from starting to crashed
2020-05-25T04:31:33.842613+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-erp-silence.herokuapp.com request_id=f5e42a22-e860-4d30-9df8-3d4af58629ea fwd="125.227.111.240" dyno= connect= service= status=503 bytes= protocol=https
2020-05-25T04:31:34.862116+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-erp-silence.herokuapp.com request_id=431fe0d9-890d-4877-9e72-ca5e5b02c031 fwd="125.227.111.240" dyno= connect= service= status=503 bytes= protocol=https
2020-05-25T04:33:42.832119+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-erp-silence.herokuapp.com request_id=61ea5fd4-9d51-43f1-8702-c35b2db8e61c fwd="125.227.111.240" dyno= connect= service= status=503 bytes= protocol=https
2020-05-25T04:33:43.357636+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-erp-silence.herokuapp.com request_id=7698fa3b-3d98-4857-89ff-eefc1ed0f33a fwd="125.227.111.240" dyno= connect= service= status=503 bytes= protocol=https
2020-05-25T04:53:40.391760+00:00 heroku[web.1]: State changed from crashed to starting
2020-05-25T04:53:48.846009+00:00 heroku[web.1]: Starting process with command `npm start`
2020-05-25T04:53:51.072810+00:00 app[web.1]:
2020-05-25T04:53:51.072824+00:00 app[web.1]: > react-erp@0.1.0 start /app
2020-05-25T04:53:51.072824+00:00 app[web.1]: > react-scripts start
2020-05-25T04:53:51.072824+00:00 app[web.1]:
2020-05-25T04:53:52.838034+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.19.93.238/
2020-05-25T04:53:52.838431+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-05-25T04:53:52.838525+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-05-25T04:53:52.838626+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-05-25T04:53:52.838822+00:00 app[web.1]: Starting the development server...
2020-05-25T04:53:52.838824+00:00 app[web.1]:
2020-05-25T04:53:52.864797+00:00 heroku[web.1]: State changed from starting to up
2020-05-25T04:53:52.916823+00:00 heroku[web.1]: Process exited with status 0
2020-05-25T04:53:52.957267+00:00 heroku[web.1]: State changed from up to crashed
2020-05-25T05:06:38.210301+00:00 heroku[web.1]: State changed from crashed to starting
2020-05-25T05:06:46.821889+00:00 heroku[web.1]: Starting process with command `npm start`
2020-05-25T05:06:49.437827+00:00 app[web.1]:
2020-05-25T05:06:49.437840+00:00 app[web.1]: > react-erp@0.1.0 start /app
2020-05-25T05:06:49.437841+00:00 app[web.1]: > react-scripts start
2020-05-25T05:06:49.437841+00:00 app[web.1]:
2020-05-25T05:06:51.503698+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.17.107.170/
2020-05-25T05:06:51.504142+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-05-25T05:06:51.504223+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-05-25T05:06:51.504300+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-05-25T05:06:51.504521+00:00 app[web.1]: Starting the development server...
2020-05-25T05:06:51.504521+00:00 app[web.1]:
2020-05-25T05:06:51.580634+00:00 heroku[web.1]: Process exited with status 0
2020-05-25T05:06:51.629961+00:00 heroku[web.1]: State changed from starting to crashed
2020-05-25T05:27:52.205712+00:00 heroku[web.1]: State changed from crashed to starting
2020-05-25T05:28:01.785260+00:00 heroku[web.1]: Starting process with command `npm start`
2020-05-25T05:28:04.449513+00:00 app[web.1]:
2020-05-25T05:28:04.449530+00:00 app[web.1]: > react-erp@0.1.0 start /app
2020-05-25T05:28:04.449531+00:00 app[web.1]: > react-scripts start
2020-05-25T05:28:04.449531+00:00 app[web.1]:
2020-05-25T05:28:06.794599+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.16.250.230/
2020-05-25T05:28:06.795207+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-05-25T05:28:06.795354+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-05-25T05:28:06.795497+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-05-25T05:28:06.795822+00:00 app[web.1]: Starting the development server...
2020-05-25T05:28:06.795824+00:00 app[web.1]:
2020-05-25T05:28:06.950347+00:00 heroku[web.1]: Process exited with status 0
2020-05-25T05:28:06.999405+00:00 heroku[web.1]: State changed from starting to crashed
2020-05-25T05:49:36.374167+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-erp-silence.herokuapp.com request_id=03408e68-56a5-4aa7-be32-bddc135d08ee fwd="125.227.111.240" dyno= connect= service= status=503 bytes= protocol=https
2020-05-25T05:49:36.899802+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-erp-silence.herokuapp.com request_id=bce991d5-cc62-49c2-890f-74f2c26a8c7a fwd="125.227.111.240" dyno= connect= service= status=503 bytes= protocol=https
2020-05-25T06:14:14.001856+00:00 heroku[web.1]: State changed from crashed to starting
2020-05-25T06:14:22.917072+00:00 heroku[web.1]: Starting process with command `npm start`
2020-05-25T06:14:24.906103+00:00 app[web.1]:
2020-05-25T06:14:24.906119+00:00 app[web.1]: > react-erp@0.1.0 start /app
2020-05-25T06:14:24.906120+00:00 app[web.1]: > react-scripts start
2020-05-25T06:14:24.906120+00:00 app[web.1]:
2020-05-25T06:14:26.643838+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.18.78.34/
2020-05-25T06:14:26.644168+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-05-25T06:14:26.644243+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-05-25T06:14:26.644310+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-05-25T06:14:26.644473+00:00 app[web.1]: Starting the development server...
2020-05-25T06:14:26.644473+00:00 app[web.1]:
2020-05-25T06:14:26.724557+00:00 heroku[web.1]: Process exited with status 0
2020-05-25T06:14:26.759956+00:00 heroku[web.1]: State changed from starting to crashed
2020-05-25T06:15:32.692592+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-erp-silence.herokuapp.com request_id=b560ea31-695e-417d-bc80-54d1e72fa9bf fwd="59.124.14.121" dyno= connect= service= status=503 bytes= protocol=http
2020-05-25T06:15:34.011364+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-erp-silence.herokuapp.com request_id=10135825-aa02-43e1-901d-97a6115563a7 fwd="59.124.14.121" dyno= connect= service= status=503 bytes= protocol=http
2020-05-25T06:15:39.338692+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-erp-silence.herokuapp.com request_id=a7844cd8-e487-40d1-8a65-0be5fac99860 fwd="59.124.14.121" dyno= connect= service= status=503 bytes= protocol=http
2020-05-25T06:15:39.860728+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-erp-silence.herokuapp.com request_id=56b9144a-bc62-42d8-9e06-8a1e2b818bc9 fwd="59.124.14.121" dyno= connect= service= status=503 bytes= protocol=http
2020-05-25T06:15:42.409991+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-erp-silence.herokuapp.com request_id=f5a36a9c-d442-45a9-9c73-2f723cc059cd fwd="59.124.14.121" dyno= connect= service= status=503 bytes= protocol=http
2020-05-25T06:15:43.027243+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-erp-silence.herokuapp.com request_id=17a60549-b31e-4c6e-be25-23f3c2d44c24 fwd="59.124.14.121" dyno= connect= service= status=503 bytes= protocol=http
2020-05-25T06:15:44.582868+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-erp-silence.herokuapp.com request_id=662d066e-0e8d-4f4e-9de0-df90c18879a6 fwd="59.124.14.121" dyno= connect= service= status=503 bytes= protocol=http
2020-05-25T06:15:45.175344+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-erp-silence.herokuapp.com request_id=ed0530e3-0a99-4917-b610-43ad39694fec fwd="59.124.14.121" dyno= connect= service= status=503 bytes= protocol=http
看更多先前的討論...收起先前的討論...
dragonH iT邦超人 5 級 ‧ 2020-05-25 14:12:29 檢舉
貼你的 deploy 後的 log 吧

不然只能通靈
silence iT邦新手 4 級 ‧ 2020-05-25 14:15:40 檢舉
請問你是指heroku logs --tail 出來的log嗎?
dragonH iT邦超人 5 級 ‧ 2020-05-25 14:21:02 檢舉
是阿 上面那個只能知道你推上去了而已
silence iT邦新手 4 級 ‧ 2020-05-25 14:22:34 檢舉
了解，文章重新編輯了
dragonH iT邦超人 5 級 ‧ 2020-05-25 14:33:38 檢舉
你是把整包 react project 推上去嗎

怎麼不推 build 完的就好
silence iT邦新手 4 級 ‧ 2020-05-25 14:41:05 檢舉
所以只要推build完的就行了嗎?
dragonH iT邦超人 5 級 ‧ 2020-05-25 14:46:56 檢舉
是阿

一般來說都是這樣

npm start那個 server

只是給你開發測試用的

不過我忘了 heroku 可不可以推 static page

可能需要 一個 server 來 host 吧

但不會是 npm 那個就是
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

2
dragonH
iT邦超人 5 級 ‧ 2020-05-25 15:10:08
最佳解答

剛試推了一下

demo

應該還是要個 static server 來 host

如果是放在 s3 之類的就不用了

server.js

const Koa = require('koa');
const serve = require('koa-static');
const path = require('path');

const app = new Koa();
const staticPath = './';
const port = process.env.PORT || 3000;

app.use(serve(path.join(__dirname, staticPath)));

app.listen(port, () => {
    console.log(`[Message]: Server is listening on port ${port}`);
});
看更多先前的回應...收起先前的回應...
silence iT邦新手 4 級 ‧ 2020-05-25 15:17:55 檢舉

請問一下，所以我這邊在加個server.js 然後照你的內容打就行了嗎?

dragonH iT邦超人 5 級 ‧ 2020-05-25 15:18:49 檢舉

你可以試試

要注意的是

我 server.js

是放在 build 的 folder 裡

然後記得在 package.json

補上 npm start 的指令

silence iT邦新手 4 級 ‧ 2020-05-25 15:24:15 檢舉

好的 請問Koa需要用npm安裝嗎?

dragonH iT邦超人 5 級 ‧ 2020-05-25 15:25:55 檢舉

package.json

{
  "name": "build",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "koa": "^2.12.0",
    "koa-static": "^5.0.0"
  }
}

用 npm install 下載

silence iT邦新手 4 級 ‧ 2020-05-25 15:42:39 檢舉

是放在這裡嗎?https://ithelp.ithome.com.tw/upload/images/20200525/20109533l2MUm6LCdX.jpg

然後是直接改裡面的start嗎?
https://ithelp.ithome.com.tw/upload/images/20200525/20109533Wf4pioR3vp.jpg

dragonH iT邦超人 5 級 ‧ 2020-05-25 15:45:29 檢舉
  1. npm run build
  2. cd build
  3. git init
  4. npm init -y
  5. 貼上我給的 package.json 和 server.js
  6. npm install
  7. npm start 看能不能正常運作
  8. git add.
  9. git commit -m "init commit"
  10. heroku git:remote -a
  11. git push heroku master
silence iT邦新手 4 級 ‧ 2020-05-25 15:54:15 檢舉

不好意思，想問一下index.js是哪一個? 剛剛好像沒有看到

dragonH iT邦超人 5 級 ‧ 2020-05-25 15:56:49 檢舉

飛過茫茫人海尋找一顆蘋果一點幸福

抱歉我上面說錯了

已修正

是 server.js

silence iT邦新手 4 級 ‧ 2020-05-25 16:14:26 檢舉

剛剛照著大大的方式去做，npm start可以正常運作,但是推上heroku 還是application error
logs:
https://ithelp.ithome.com.tw/upload/images/20200525/2010953304GCf1qaqd.jpg

dragonH iT邦超人 5 級 ‧ 2020-05-25 16:25:52 檢舉

飛過茫茫人海尋找一顆蘋果一點幸福

這樣說好了

你下完 npm run build 後

把 build 移走

在 build 裡面再照著我說的步驟走

我上面的步驟更新了

你的 log 看起來還是在 run react project 的東西

PS. 最好開個新的 heroku app

silence iT邦新手 4 級 ‧ 2020-05-27 09:32:20 檢舉

感謝大大，目前已成功推上去!

junis iT邦新手 5 級 ‧ 2021-10-06 16:28:42 檢舉

@dragonH
真的非常感謝你

登入發表回應
0
nagiMemo
iT邦新手 5 級 ‧ 2020-09-18 13:48:32

感謝，遇到一樣問題，依照以上最佳解答的確可以完成．

但好奇想請問有人知道這個與官方寫的https://blog.heroku.com/deploying-react-with-zero-configuration 做法會有什麼不同嗎？
沒有部署經驗，對大大教的這個部署方式原理不是很懂，
想知道有無相關文章或關鍵字（static server？）可以參考，查不太到這種方法的說明．
謝謝ＴＡＴ

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22202 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙