iT邦幫忙

2026 iThome 鐵人賽

DAY 29
0
JavaScript

不要再說你不會後端!30 天 Node.js 降維打擊指南 系列 第 29 篇

Day 29:讓全世界看見你的作品 — 雲端部署實戰

  • 分享至 

  • xImage
  •  

經過了 28 天的奮戰,你的 API 已經具備了完整的 CRUD、MongoDB 資料庫、JWT 身分驗證、檔案上傳,甚至還用 Docker 完美打包成了貨櫃。但是,現在它只能在你的 http://localhost:3000 孤獨地運作。

今天,我們要把它送上雲端,換取一個真正的公開網址,讓全世界(以及你的前端夥伴)都能夠真正地使用你的系統!


1. 雲端服務的兩大陣營:IaaS vs PaaS

要把程式碼放上雲端,業界通常有兩種選擇:

  • IaaS (基礎設施即服務):代表產品是 AWS EC2、GCP Compute Engine。
    • 概念:雲端廠商租給你一台「完全空白的虛擬電腦」。
    • 優缺點:自由度極高,但你必須自己透過 SSH 連線進去安裝 Linux、安裝 Node.js、設定防火牆。對於新手來說,設定門檻較高。
  • PaaS (平台即服務):代表產品是 Render、Heroku、Vercel、Zeabur。
    • 概念:雲端廠商幫你把底層環境都架設好了,你只要「把程式碼丟上去」就能直接跑。
    • 優缺點:極度方便,通常支援「連接 GitHub 自動部署」。非常適合個人專案與新創團隊。

今天,我們將使用目前 Node.js 生態系中最受歡迎的免費 PaaS 平台:Render。


2. 部署前的最後準備:設定 Port 與啟動腳本

在把程式碼推上雲端之前,你的 app.js 與 package.json 必須符合雲端平台的規矩。

1. 動態綁定 Port
雲端平台不會永遠把 3000 Port 留給你。它會透過環境變數 process.env.PORT 隨機分配一個 Port 給你的程式。
請確保你的 app.js 底部是這樣寫的:

// 如果雲端環境有給 PORT 就用雲端的,否則才用本地的 3000
const PORT = process.env.PORT || 3000; 

app.listen(PORT, () => {
    console.log(`伺服器已啟動於 PORT: ${PORT}`);
});

2. 設定啟動指令 (Start Script)
雲端平台不知道你的主程式叫什麼名字,它預設會去執行 package.json 裡面的 start 腳本。
請打開 package.json,在 scripts 區塊加入:

"scripts": {
  "start": "node app.js",
  "dev": "nodemon app.js" // 這是你在本地開發用的
}

3. Render 雲端部署實戰 (5 分鐘上雲)

步驟 1:將程式碼推上 GitHub
確保你的專案已經 commit 並 push 到你的 GitHub 儲存庫。
絕對注意:檢查你的 .gitignore,確保 .env 和 node_modules/ 沒有被推上 GitHub!

步驟 2:登入 Render
前往 Render.com,使用你的 GitHub 帳號註冊/登入。

步驟 3:建立 Web Service

  1. 點擊右上角的 "New" -> 選擇 "Web Service"。
  2. 選擇 "Build and deploy from a Git repository"。
  3. 連結你的 GitHub 帳號,並選擇你剛剛 push 的那個 Node.js 專案。

步驟 4:設定環境與部署

  1. Name:幫你的 API 取個酷炫的名字。
  2. Environment:選擇 Node(或者如果你有寫 Dockerfile,可以選 Docker)。
  3. Build Command:輸入 npm install。
  4. Start Command:輸入 npm start。
  5. Environment Variables (環境變數):這是最重要的一步!因為我們沒有把 .env 推上 GitHub,所以你要在這裡手動把 JWT_SECRET、DB_URL 等機密資料一筆一筆填進去。
  6. 選擇免費方案 (Free Plan),點擊 Create Web Service!

4. 享受你的成果!

等待大約 2~3 分鐘,當畫面顯示綠色的 Live 標籤時,恭喜你!
Render 會配發一個類似 https://your-api-name.onrender.com 的網址給你。

趕快打開你的 Postman 或 Thunder Client,把網址從 http://localhost:3000 換成這個全新的雲端網址,發送一個 GET 請求看看吧。

你的 API,正式向全世界開放了!


上一篇
Day 28:讓程式隨處可跑 — Docker 容器化部署實戰
下一篇
Day 30:自動化部署 (CI/CD) 與後端工程師的下一站
系列文
不要再說你不會後端!30 天 Node.js 降維打擊指南 共 30 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言