接著把專案上傳至 heroku,分別需要上傳前端跟後端
1.到 Heroku 官網註冊帳密
2. create new app
3.接著到 resource 新增 ClearDb MySQL(須新增信用卡資料,不然無法用)
4.使用 MySQL Workbench(遷移本地數據庫資料,若有其他方法可跳過) 連接至 ClearDb MySQL
- heroku 新創 app 的 setting 的 Config Vars 點 Reavl Config Vars 把 CLEARDB_DATABASE_URL 右邊那欄全部複製
取文字從 @ 後至 / 前,填至 MySQL Workbench 的 Hostname(我的長這樣:us-cdbr-east-06.cleardb.net) - heroku 新創 app 的 resource 點 ClearDb MySQL 再點 Name 下方藍色連結(我的長這樣:heroku_457c3d0a3324e23)
進去後點 Sysyem Information 看到 帳密填入 MySQL Workbench 的 username 跟 password,填好點 test connection 測試看看
5.到 Intellij 專案中,修改 application.properties 其中的 url、username、password
及新增一行 spring.datasource.hikari.max-lifetime = 2000
接著運行專案,回到 MySQL Workbench 看有沒有新增對應的 table
我想隱藏 github 上的 application.properties,結果填好了也隱藏不了,解決方法:有些檔案我不想放在 Git 裡面
後來是成功了,但我取消隱藏還是有擺上去
6.回到 Heroku app 的 Deploy,點最下方的 Deploy Branch,好了把上方的 Enable Automatic Delploys 給打開
BUG:
7.遷移本地資料庫數據至 ClearDb MySQL(若有其他方法可跳過)
- 打開 Intellij,點右邊 Database,對employees點右鍵,選 export data to file
- 打開 MySQL Workbench,找到 table employyes 點右鍵,選 table data import wizard
接著架設前端
1.create new app
2.回到 Heroku app 的 Setting,找到 Buildpacks 填入 https://github.com/mars/create-react-app-buildpack
3.點回 Deploy,按照下方的 Heroku Git 指示操作
BUG:
- Node version not specified in package.json
- 解完上面的bug後,又遇到新bug,但沒提示是什麼問題,只好查最後幾句 Push rejected, failed to compile Node.js app.
查到答案是,用 Intellij 打開前端專案,點下方 terminal 輸入:git rm package-lock.json
之後 git commit 跟 push 就可以成功 deploy 了 - 後面打開網頁又遇到 Application error,查一查發現可能是配置出問題,後來補上上方第2點即可
回到後端專案
找到 EmployeeController.java
@CrossOrigin(origins = "your frontend url")
替換成你的前端網址
我的長這樣 @CrossOrigin(origins = "https://employee-manage-system-jack.herokuapp.com/")
打開前端網址,看看資料正不正確,若都成功則恭喜大功告成
弄到這步花了我好多時間…終於完成
還有個討厭的 error:has exceeded the ‘max_user_connections’
查了半天都無法解決,終於在 ClearDb MySQL 的文件裡找到了,上面寫說建議升級方案…