iT邦幫忙

2022 iThome 鐵人賽

DAY 20
0
Modern Web

MERN Stack + Tailwind CSS - React 小專案實踐計畫系列 第 20

【Day 20】免費的雲端資料庫 - MongoDB Atlas

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20221004/20152502iLb1dVz9El.png

在前幾篇有提到除了在自己的電腦上運行本機端的 MongoDB,也可以使用雲端的方式將資料儲存在雲端資料庫,隨時都能取用~ 而今天就要來使用 MongoDB Atlas !!!

使用 MongoDB Atlas

  • 進入官網,點擊 「Try Free」 然後登入
  • 可能需要先建立一個組織 organization(任意取名即可~)

https://ithelp.ithome.com.tw/upload/images/20221004/20152502L3DfLMuSLO.png

  • 然後進入該組織,就會出現可以建立新專案的「New Project」按鈕

https://ithelp.ithome.com.tw/upload/images/20221004/20152502Jp5fjfYPZi.png

  • 接著命名專案、成功建立專案!

https://ithelp.ithome.com.tw/upload/images/20221004/20152502gYiJ6wKKab.png

  • 然後點擊「Build a Database」來建立資料庫

https://ithelp.ithome.com.tw/upload/images/20221004/20152502XzPwcSLMVd.png

  • 選擇免費方案

https://ithelp.ithome.com.tw/upload/images/20221004/20152502lB2PI8x8aO.png

  • 選擇雲端提供者及地區(可任意選擇,這邊我選 Google Cloud → Taiwan),最後建立 Cluster!

https://ithelp.ithome.com.tw/upload/images/20221004/20152502oHyYk1LQu4.png

(這邊可能會跳出快速開始的選項,可以先跳過~接著會直接設定)

https://ithelp.ithome.com.tw/upload/images/20221004/20152502p4sYrZcPK5.png

  • 點擊左方選單的「Database」,然後點擊畫面中的連接「Connect」

https://ithelp.ithome.com.tw/upload/images/20221004/20152502JwFpzkBS4Q.png
接著依序指示進行設定
https://ithelp.ithome.com.tw/upload/images/20221004/20152502Iu7KmjafeG.png

https://ithelp.ithome.com.tw/upload/images/20221004/20152502ep03vYLp6s.png

https://ithelp.ithome.com.tw/upload/images/20221004/20152502XoVUHtfhJn.png

https://ithelp.ithome.com.tw/upload/images/20221004/20152502tEwB9coM54.png
獲得連接雲端資料庫的字串!

mongodb+srv://sofia:<password>@cluster0.rlsa7ty.mongodb.net/test

接著打開 Compass 應用程式,建立新的連接:

  • 輸入剛剛的連接字串
  • <password> 替換成剛剛建立使用者 sofia 的對應密碼
  • 最後的 /test 改成 /bb-log (要連接的資料庫名稱,與待會跟後端程式連接有關
  • 按下「Connect」!

https://ithelp.ithome.com.tw/upload/images/20221004/20152502qNOBfhR9Tr.png

成功連接後就會進到資料庫頁面~

https://ithelp.ithome.com.tw/upload/images/20221004/20152502ATTt5QyPqS.png

可以將這個資料庫設為 Favorite,這樣就能命名容易辨識的名稱,之後也比較好找!

https://ithelp.ithome.com.tw/upload/images/20221004/20152502pPLN0E2HBI.png

回到後端程式碼

更改原本的 MongoDB 連接方式:

  • 將連接的位址改成雲端的位址
  • 最後方記得改成要建立的資料庫名稱 → bb-log
  • 傳入以下 options 設定,可以避免一些警告
  • 最後使用 .then() 來確認是否成功連上資料庫
// 原本以 local 存取的
// mongoose.connect('mongodb://localhost:27017/bb-log');

const DB = 'mongodb+srv://sofia:密碼@cluster0.rlsa7ty.mongodb.net/bb-log';
mongoose
    .connect(DB, {
        useNewUrlParser: true,
        useUnifiedTopology: true,
    })
    .then(() => console.log('DB connection successful!'));

最後,執行 yarn dev,成功列出「DB connection successful!」

https://ithelp.ithome.com.tw/upload/images/20221004/20152502F28Do99W4r.png

回到 Compass 確認看看,左邊選單刷新一下,也的確看見我們的資料庫 bb-log!成功!

https://ithelp.ithome.com.tw/upload/images/20221004/20152502VpwR9GEQBc.png

在網頁上點擊 Database → Cluster0 → Collections 也看得到噢~

https://ithelp.ithome.com.tw/upload/images/20221004/20152502IdpWhUB6Q7.png

!!!最後先別急著提交這次的 commit,下一篇我們會提到如何保護較為機密的資料,避免將隱私暴露在網路上(如:GitHub上)


上一篇
【Day 19】取得單一文章資料 - Model.findById()
下一篇
【Day 21】機密資料不外洩!環境變數 .env
系列文
MERN Stack + Tailwind CSS - React 小專案實踐計畫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言