昨天我們完成了部署的前置作業,今天當然要來實戰部署啦!這篇文章會帶你一步步把 Node.js + TypeScript 專案部署到 Render,並驗證 API 是否能正常運作。
到 Render Dashboard 右上角點擊 New → Web Service,建立一個新的服務。
接著選擇 連結 GitHub 專案,點擊 Connect。
Node
develop
分支Render 需要知道如何建置與啟動專案。
建置指令 (Build Command)
npm install && npm run build
啟動指令 (Start Command)
npm run start
如果是學習或 Side Project,可以先選擇 Free 方案。
接著到 Environment Variables 區塊,新增專案需要的環境變數。
例如:
DB_HOST=<你的資料庫主機>
DB_PORT=5432
DB_USERNAME=<你的使用者名稱>
DB_PASSWORD=<你的密碼>
DB_NAME=<你的資料庫名稱>
點擊 Add from .env。
點擊 Add variables,就能看到變數成功新增。
設定完成後,點擊 Deploy Web Service,Render 就會開始自動建置與部署。
部署中畫面
部署成功畫面
部署完成後,Render 會提供一個公開網址。
透過該網址即可呼叫 API:
使用 Postman 測試新增 Todo 資料,API 回應正常 ✅
🎉 恭喜你完成了一個完整的 Express + TypeScript + TypeORM 後端專案,並成功部署到 Render!
從這一步開始,你的專案已經能讓全世界存取了 。
⚠️ 小提醒:Render Free Plan 限制
如果你使用的是 Render 免費方案,會有以下幾點需要注意:
在 Day 10,我們完成了部署的所有前置作業:
package.json
,指定 Node.js 版本PORT
feature
分支合併到 develop
接著在 Day 11,我們則把 develop
分支部署到 Render,並完成:
至此,我們已經把專案從「本地端」正式推上「雲端」,讓全世界都能透過網址存取 。
接下來的篇章,我們將來點輕鬆的主題,介紹 Prettier 、ESLint 小工具,並逐步探索更多進階主題(檔案上傳、驗證系統等),讓專案更接近真實商業應用。