Java 學習記錄141 — 員工管理系統專案練習-deployee to heroku

接著把專案上傳至 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

6.回到 Heroku app 的 Deploy,點最下方的 Deploy Branch,好了把上方的 Enable Automatic Delploys 給打開

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 指示操作

  • 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/")

打開前端網址,看看資料正不正確,若都成功則恭喜大功告成

弄到這步花了我好多時間…終於完成

--

--

記錄成為軟體工程師的過程

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store