[ 2024 IT 鐵人賽 DAY21 ] 後端專案最終章：Render 部署全攻略

哇！各位鐵粉們，今天是我們後端專案的最後一篇文章囉！已經過了 2/3 的賽程，我們一起繼續努力堅持下去～

雖然有時候會覺得好像要寫不完了，但想到大家的支持，就又充滿力量了呢！

房東不給養鸚鵡 - 那就用 Nuxt + Express + MongoDB 30 天寫一個全端鸚鵡專案。

挑戰人生第一次鐵人賽，就來個佛心分享 side project，從專案發想、規劃、設計、資料庫、開發到部署，技術使用 Nuxt 3、Tailwind CSS、Pinia、Axios、Express、MongoDB，製作一個前後端分離的鸚鵡專案，功能主要介紹食物計算機和聯絡我們，希望可以讓更多人瞭解專案的完整流程 ✨

IT 全文章連結

調整指令

欸嘿，前面寫得太開心，直接把部署需要的原始指令給忘光光了啦！真是個菜鳥工程師呢 XD
不過沒關係，我們在部署前先把它加回來吧！就當作是復習一下之前學過的東西啦！

打開 VSCode，找到 package.json 檔案。（沒錯，就是那個記錄我們專案靈魂的檔案！）
我們要把最初修改的 "start": "node ./bin/www" 調整一下。為什麼要調整呢？因為我們要區分「開發環境」和「正式環境」啦！就像是我們平常穿的居家服和出門的正式服一樣，各有各的用途喔！
調整成以下範例：
1
2
3
4
5
"scripts": {
"start": "node ./bin/www",
"dev": "nodemon ./bin/www",
"swagger": "node ./swagger.js"
}
解釋一下：
- start：這是我們要留給部署時使用的指令。就像是正式出場時穿的西裝革履！
- dev：這是我們開發時使用的指令。就像是在家裡爬 bug 時穿的舒適睡衣～
- swagger：這個不變，還是用來生成我們的 API 文件的。
  小提醒：nodemon 是一個超棒的工具，它會在我們修改程式碼時自動重新啟動服務器，省去我們手動重啟的麻煩。如果你還沒安裝的話，可以用 npm install nodemon --save-dev 來安裝喔！

推送更新到 Github

好啦，調整完指令之後，我們要把這些變更推送到 Github 囉！這次我們要使用 VSCode 內建的版本控制功能，超方便der～

在左側選單點擊「原始檔控制」（Source Control）。看到那個長得像樹枝的圖示了嗎？對，就是它！
在上方的輸入框中輸入本次變更的 Commit 訊息。例如：「調整 package.json 中的 start 和 dev 指令」。這就像是在寫一個小日記，記錄我們做了什麼變更。
選取要推送的變更檔案。通常 VSCode 會自動選取所有變更的檔案，但如果你只想推送部分變更，可以手動選擇。
點擊「提交」（Commit）按鈕。這就像是把我們的變更封裝起來，準備送出去。
最後，點擊「同步變更」（Sync Changes）按鈕，將本地端的檔案推送到遠端儲存庫。這就像是把我們的變更寄出去啦！

恭喜恭喜！我們成功將更新的檔案都推送到遠端囉～接下來，讓我們一起把專案部署到 Render 吧！

Render 介紹

Render 是一個超級好用的雲端平台，可以讓我們輕鬆部署我們的網站和應用程式。它就像是一個網路上的超級電腦，可以幫我們把專案跑起來，讓全世界的人都能使用我們的 API！

Render 休眠機制

不過要注意的是，Render 的免費方案有一個小小的特色——休眠機制。它就像是一個愛睡覺的小貓咪，如果一段時間沒有人「摸」它（也就是沒有人使用我們的 API），它就會進入睡眠狀態。
當有新的請求進來時，它需要一點時間「伸懶腰」（喚醒服務），可能會有幾秒鐘的延遲。所以如果你發現第一次呼叫 API 特別慢，別緊張，這是正常的！後續的請求就會恢復正常速度啦。

部署到 Render

好啦，現在讓我們開始部署的魔法儀式吧！

首先，前往 Render 官網註冊一個帳號。這裡建議使用 Github 帳號登入，因為這樣可以直接連結我們的 Github 專案，超級方便的啦！
進入儀表板後，我們要「New」一個「Web Service」。
選擇你的 Github 專案。這裡 Render 會列出你 Github 上的所有專案，選擇我們要部署的那個就可以了。
接下來要填入一些基本資料：
- Name：幫你的專案取個響亮的名字吧！
- Language：選擇 Node（因為我們用的是 Node.js 嘛）
- Branch：選擇你的主要分支（通常是 main 或 master）
- Build Command：填入 npm install（這是告訴 Render 要安裝我們專案的所有依賴）
- Start Command：填入 npm run start（這是告訴 Render 如何啟動我們的專案）
- Instance Type：選擇 Free $0 / month（誰說免費的不好，免費的完全夠用！）
環境變數設定：
這裡要特別注意！我們需要把本地 .env 檔案中的所有變數都複製到 Render 的環境變數設定中。為什麼要這麼做呢？因為 .env 檔案通常包含一些敏感資訊（比如資料庫密碼），我們不會把它上傳到 Github。但是我們的專案需要這些資訊才能正常運作，所以要在 Render 中設定。
一切都設定好後，點擊「Deploy web service」開始部署！
接下來就是見證奇蹟的時刻…等待部署完成！這個過程可能需要幾分鐘，你可以趁這個時間去泡杯咖啡，或者像我一樣看著他轉圈圈（誤）。
當你看到「Your service is live 🎉」的訊息時，恭喜你！你的專案已經成功部署到雲端了！

用 Postman 測試部署的 API

部署完成後，我們當然要測試一下我們的 API 是不是真的能用啦！

複製 Render 給我們的網址。它通常長得像 https://你的專案名稱.onrender.com。
打開我們的好朋友 Postman，新增一個請求。
把剛才複製的網址貼到 URL 欄位，記得在後面加上你的 API 路徑（例如 /api/freshfoods）。
選擇正確的 HTTP 方法（GET、POST 等），然後點擊「Send」。
如果你收到了預期的回應，那就代表我們的 API 已經成功部署並且可以正常使用啦！恭喜恭喜！🎉

調整 Swagger url

如果要將 API 文件交付給前端或是團隊的話，記得要修改 url：

到 Render 複製 url
VSCode 打開 swagger.js 修改成部署用的 host & schemes
1
2
host: "two024it-test-app.onrender.com", // 請使用自己的 url
schemes: ["https"],
host 注意不需要加前面 https:// 哦！
儲存並編譯 API 文件
1
npm run swagger
推送最新的變更
等待一大段時間，直到看到 Deploy live 部署成功，點擊 url 查看
進到頁面後，自行加上 /api-docs 進入到 swagger UI