架站心得

初次使用 MongoDB？手把手教用 MongoDB Atlas 架設部落格

Ivan Cheng

10 Aug 2025 • 5 min read

這篇文章主要參考 MongoDB 官方教學: Building a REST API with Express, Node, and MongoDB，教初學者如何用 Express.js + MongoDB Atlas 架設一個簡易部落格網站。文章有提供完整程式碼供用戶使用，本文會針對一些踩坑地方做補充。

技術棧 Tech Stack

MongoDB 作為一個 NoSQL 資料庫，提供高效查詢、插入操作的優勢。不過如果要架設一個全端網站 (前端 + 後端 + 資料庫) ，就可以搭配所謂 “MERN Stack”— MongoDB + Express.js + React.js + Node.js。

不會寫代碼？先參考範例程式

看完了示意圖，我對於實際程式怎麼撰寫還是缺乏經驗，於是決定參考官網的這篇教學文章操作。由於範例程式都寫完了，留給我完成只剩下這些步驟：

將程式碼 clone 到本地端
創建雲端的 MongoDB Atlas 資料庫，將後端成功連接資料庫
確認本地啟動、測試無誤
部署 (deployment)

連接 MongoDB Atlas 雲端資料庫

設定資料庫有很多方式，可以選擇自己 self-host MongoDB 服務、或是使用 MongoDB Atlas 這種雲端方案。初步比較的話，雲端方案優點是方便、後台功能配置那些都很方便，缺點就是如果使用量大起來，成本會比較高。

💡

翻文章時看到這篇 Medium 分享，查一下發現作者 Caspar Chang 是 MongoDB 台灣區的 Solution Architect 負責人非常厲害！

要將後端成功連接資料庫，其中需要新增一個.env 檔案，並設定 ATLAS_URI 值。

這個值要去哪找？我原本以為是參考mongodb+srv://<username>:<password>@sandbox.jadwj.mongodb.net/myFirstDatabase?retryWrites= ，替換username 及 password 就可以。後來發現要去 MongoDB Atlas 後台複製，才能得到正確的cluster 及 project name。

到後台 Clusters > Connect > Driver，可以複製這段字符

更新完後，我啟動後端服務，遇到報 conn.db("sample_training"); > Cannot read properties of undefined 錯誤。這裡要做兩件事

確認你的 MongoDB Atlas 有創建 sample_training 這個範例資料集，具體方式見官方教學
記得 Network Access 地方，將允許 IP 範圍改成 0.0.0.0/0

💡

這裏為了方便才這樣改，可能會影響資料庫安全性。實際上線之後，還是要想辦法改成固定 IP。

確認本地啟動、測試無誤

後端服務啟動成功後，接著是前端 React 服務。我遇到了一個版本相容問題，調查後發現我用的是 Node.js v22，降級成 v16.20後可以成功啟動了。

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "engines" : {
    "node" : ">=16.0.0 <17.0.0" // 推測跟這個有關
  },
  ...
}

部署

最後來到最重要的上線環節，害怕部署的我決定繼續選擇 Zeabur 平台。由於沒有現有的 template 可以用，我於是把改動後的代碼 push 到 github，並嘗試使用 Zeabur Github 整合能力，一次部署前後端。

實際測試後，這樣的測試無法成功部署前後端服務（辨識會出現問題）。後來去翻了 Zeabur 的Discord 討論，決定試著將前後端拆成兩個 Github repo 分別部署。

針對後端，我開了一個 mongodb-express-example-backend，再次使用 Zeabur 的 Github 整合能力，此時能正確被辨認爲 Express.js 服務，成功部署！

前端部分則是依樣畫葫蘆：開啟一個 mongodb-express-example-frontend、在 Zeabur 選擇以 Github 方式部署。

這裡還踩了一個環境變數的坑，有別於部署後端時用 dotenv 存取環境變數，React App 的環境變量必須以 REACT_APP_ 開頭。

REACT_APP_BASE_URL=https://express-backend.zeabur.app ## 需要以 REACT_APP_ 開頭

技術棧 Tech Stack

不會寫代碼？先參考範例程式

連接 MongoDB Atlas 雲端資料庫

確認本地啟動、測試無誤

部署

延伸閱讀