[Node.JS] 打造 todolist api 4 - 部署上線

發表於 更新於 分類於 閱讀次數：

寫了好幾篇，功能終於做完了，這篇來記錄如何把寫好的功能放到雲端上，讓這個 API 不再只是本地戳，真正的上線運行。

💎 需要工具

  • 雲端平台：Heroku
  • 部署工具：Git

💎 Git

要把做好的專案部署到 Heroku 上，會需要用到 Git 來發佈，加入 git 版控只需要在 todolist 練習的資料夾下一個初始化的指令即可。

1
git init

如果還沒有 Git，可以到 Git 官方網站 下載

完成初始化後可以建立在專案資料夾建立 .gitignore 檔案（例外清單），並打開編輯，在裡面加入 node_modules，當上傳專案到 heroku 平台上時，平台會自動根據 package.json 裡面的 dependancies 來安裝套件，所以可以把模組的實體檔案加到例外，不用一起部署上線。

1
node_modules

💎 環境設定

在部署上線前，需要（）做一些調整，才能順利運行：

  • package.json
    • “scripts” 內加入啟動伺服器的指令
      1
      2
      3
      "scripts": {
        "start": "node server.js"
      },
    • 新增 “engines” 屬性來指定運行的 node.js 版本
      1
      2
      3
      "engines": {
          "node": "16.x"
      }
  • 確認 server.js 裡面的 PORT 設定有沒有使用 process.env.PORT 來獲取環境變數，沒有的話伺服器會無法連線。
  • 完成環境設定後記得用 Git 提交版本
    1
    2
    git add .
    git commit -m 'todolist v1(名稱自訂)'

💎 Heroku 申請與安裝

  1. 如果還沒有 Heroku 帳號，可以先到 Heroku 官方網站 註冊。
  2. 註冊完成後回到開發環境（VS Code）。
  3. 安裝 Heroku CLI（建議使用全域安裝）。
    1
    npm i -g heroku
    安裝完會出現不少衝突警告，但可以先無視
  4. 測試一下 Heroku CLI 能不能正常使用（下面是檢查版本資訊的指令）
    1
    heroku --version

💎 Heroku 上線！

  1. 先回到 VScode，並且進入 todolist 專案資料夾，在終端機執行登入 heroku 的指令，送出後按任意按鍵會跳轉到登入的網頁，接著再網頁登入成功後，終端機也會跳出登入成功訊息。

    1
    heroku login

  2. 執行建立伺服器指令，執行後系統會產生一組專案名稱，可以複製名稱最後的幾個數字，在網頁介面的搜尋列找到這個專案。

    1
    heroku create

    建立伺服器成功後，同時也會把這個遠端專案加到本地中，可以用指令 git remote 檢查，會發現多了一組 heroku。

  3. 發佈專案！運用 git push 把心血結晶上傳吧！
    （指令最後的本地分支名稱視版本有所不同，需要自行調整）

    1
    git push heroku main/master

  4. 如果上傳部署成功，就可以執行指令來啟用伺服器。

    1
    heroku open

💎 線上功能測試

把所有的可能性從頭到尾測一遍。
測試網址：

  • http://(heroku給的網域名稱)/todo
  • http://(heroku給的網域名稱)/todo/
  • http://(heroku給的網域名稱)/todo/(任一筆id)
  • http://(heroku給的網域名稱)/(亂打)

測試方法：

  • OPTIONS
  • GET
  • POST
  • PATCH
  • DELETE
  • 其他 POSTMAN 上有的方法都可以試試

測試資料：

  • {"title": "隨意"}
  • 各種奇怪資料

💎 結語

這系列文章是參考六角學院的課程撰寫的，這些基本的功能照著課程走，花了很大篇幅和時間才寫出來，寫了才發現每個環節都有詳細的說明，儘管實作的內容還只是皮毛，但是能穩紮穩打的進步，真的比到論壇複製貼上慢慢摸索前進還要有成就感。

我的 GitHub - todolistDemo 也存放了照著這些文章寫出來的成果，如果操作有問題也可以參考上面的檔案。