iT邦幫忙

2025 iThome 鐵人賽

DAY 11
0
Modern Web

30 天,讓 TypeScript 把你的 Node.js 開發再升級系列 第 11

Day 11|一鍵上線!完整部署到 Render 的實戰流程

  • 分享至 

  • xImage
  •  

昨天我們完成了部署的前置作業,今天當然要來實戰部署啦!這篇文章會帶你一步步把 Node.js + TypeScript 專案部署到 Render,並驗證 API 是否能正常運作。


Render 部署設定步驟

1. 建立 Web Service

到 Render Dashboard 右上角點擊 New → Web Service,建立一個新的服務。

接著選擇 連結 GitHub 專案,點擊 Connect


2. 選擇專案與分支

  • Language 選擇 Node
  • Branch 選擇 GitHub 專案的 develop 分支


3. 設定建置與啟動指令

Render 需要知道如何建置與啟動專案。

建置指令 (Build Command)

npm install && npm run build

啟動指令 (Start Command)

npm run start


4. 選擇 Instance Type

如果是學習或 Side Project,可以先選擇 Free 方案


5. 配置環境變數

接著到 Environment Variables 區塊,新增專案需要的環境變數。

例如:

DB_HOST=<你的資料庫主機>
DB_PORT=5432
DB_USERNAME=<你的使用者名稱>
DB_PASSWORD=<你的密碼>
DB_NAME=<你的資料庫名稱>

點擊 Add from .env

點擊 Add variables,就能看到變數成功新增。


6. 開始部署

設定完成後,點擊 Deploy Web Service,Render 就會開始自動建置與部署。

部署中畫面

部署成功畫面


驗證部署結果

部署完成後,Render 會提供一個公開網址。

透過該網址即可呼叫 API:

使用 Postman 測試新增 Todo 資料,API 回應正常 ✅


🎉 恭喜你完成了一個完整的 Express + TypeScript + TypeORM 後端專案,並成功部署到 Render!

從這一步開始,你的專案已經能讓全世界存取了 。

⚠️ 小提醒:Render Free Plan 限制

如果你使用的是 Render 免費方案,會有以下幾點需要注意:

  • 服務若 15 分鐘沒有流量,會自動進入休眠狀態。
  • 當再次有人存取時,服務會重新啟動,通常需要等待 30 秒左右
  • 免費方案的硬體資源有限,若專案流量大或需要長時間穩定服務,建議升級到付費方案。

結語:從準備到上線 🚀

Day 10,我們完成了部署的所有前置作業:

  • 認識 Render 與雲端平台的定位
  • 修改 package.json,指定 Node.js 版本
  • 調整程式碼以支援環境變數的 PORT
  • 學會透過 GitHub PR 把 feature 分支合併到 develop

接著在 Day 11,我們則把 develop 分支部署到 Render,並完成:

  • 建立 Web Service
  • 設定 Build 與 Start 指令
  • 配置資料庫環境變數
  • 驗證部署成功,API 可以正常使用

至此,我們已經把專案從「本地端」正式推上「雲端」,讓全世界都能透過網址存取 。

接下來的篇章,我們將來點輕鬆的主題,介紹 Prettier 、ESLint 小工具,並逐步探索更多進階主題(檔案上傳、驗證系統等),讓專案更接近真實商業應用。


上一篇
Day 10|部署啟程!從 Render 部署前置作業到 GitHub PR
下一篇
Day 12|程式碼自動排版神器:Prettier 實戰導入
系列文
30 天,讓 TypeScript 把你的 Node.js 開發再升級13
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言