iT邦幫忙

2025 iThome 鐵人賽

DAY 27
0
Modern Web

使用 React + Node.js + MongoDB 打造電商網站系列 第 27

Day27 後端 API 部署至 Render,環境變數與功能測試

  • 分享至 

  • xImage
  •  

今天是鐵人賽 Day27,目標是將後端 API 部署到 Render,設定環境變數,並確認商品列表、會員與購物車功能能透過線上 API 正常運作。

1️⃣ 後端部署到 Render
專案上傳至 GitHub,連結 Render 進行部署
選擇 Node.js 專案、同一地區(Region)以利網路通訊
Render 自動安裝依賴並啟動伺服器
部署完成後獲得線上 URL:

https://ironman-store.onrender.com

2️⃣ 設定環境變數
在 Render 專案的 Dashboard 設定環境變數(Environment Variables):

MONGODB_URI=MongoDB 連線字串
JWT_SECRET=JWT 秘密金鑰
PORT=10000  # 可自訂

後端 index.js 使用 process.env.MONGODB_URI、process.env.JWT_SECRET 與 process.env.PORT

3️⃣ 測試 API 功能
透過 Postman 或瀏覽器測試各 API:
商品列表 GET:https://ironman-store.onrender.com/api/products
會員註冊 / 登入 POST:https://ironman-store.onrender.com/api/auth/register / login
購物車 GET / POST / PUT / DELETE:https://ironman-store.onrender.com/api/cart
測試結果:所有功能正常回傳資料,後端部署成功
https://ithelp.ithome.com.tw/upload/images/20251010/20178893zfnfEKlCHP.png

4️⃣ 後端測試路由
在 index.js 新增 /api 測試路由,方便確認後端運作:

app.get("/api", (req, res) => {
  res.send("Ironman Backend API 🛡️ Running!");
});

打開瀏覽器輸入 https://ironman-store.onrender.com/api 即可看到訊息
https://ithelp.ithome.com.tw/upload/images/20251010/20178893Sl7UtKRfg0.png

💡 Day27 收穫

  • 後端 API 成功部署至線上 Render
  • 環境變數(MONGODB_URI、JWT_SECRET、PORT)設定完成
  • 商品列表、會員、購物車功能確認可以透過線上 API 正常使用

上一篇
Day26 前端商品圖片顯示修正 + 首頁索引標籤更新
系列文
使用 React + Node.js + MongoDB 打造電商網站27
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言