เพิ่มฐานข้อมูล MongoDB ในแอป SaaS MVP ที่เราสร้างขึ้นในส่วนแรกของบล็อกชุดนี้

Codebase เริ่มต้นที่เราตั้งค่าสำหรับ SaaS MVP โดยใช้ NextJS, TypeScript, MaterialUI, Storybook, Jest และ SWR ได้อธิบายไว้ดังนี้:

ในโพสต์นี้ เราจะเชื่อมต่อแอพของเรากับฐานข้อมูล MongoDB

เราใช้เส้นทาง NextJS API (https://nextjs.org/docs/api-routes/introduction) เพื่อให้มีแบ็กเอนด์ HTTP API อยู่บนฐานรหัสเดียวกัน โดยใช้ TypeScript แน่นอน

ขั้นแรก สร้างฐานข้อมูล MongoDB

มีโซลูชัน MongoDB บนคลาวด์หลายตัว หนึ่งในนั้น (หากไม่ใช่วิธีที่ดีที่สุด) คือ MongoDB Atlas (https://www.mongodb.com/cloud/atlas). MongoDB Atlas มีระดับฟรี 500Mb DB มากมาย

สร้างฐานข้อมูล MongoDB บน ​​Atlas ขั้นตอนแรก สร้างโครงการ :

ขั้นตอนที่สอง สร้างคลัสเตอร์ฐานข้อมูลโดยเลือกแผน (ฟรี) และโฮสต์ (คลาวด์):

ขั้นตอนที่สาม สร้างผู้ใช้ฐานข้อมูลคลัสเตอร์:

หมายเหตุ: เขียนรหัสผ่านผู้ใช้ที่ใดที่หนึ่ง เราจะต้องใช้มันในขั้นตอนต่อไป

เมื่อสร้างผู้ใช้คลัสเตอร์ฐานข้อมูลแล้ว เราสามารถสร้างฐานข้อมูลโดยใช้ฟังก์ชันการเชื่อมต่อ

เข็มทิศ MongoDB (https://www.mongodb.com/products/compass) เป็นไคลเอ็นต์ MongoDB บนเดสก์ท็อป ดาวน์โหลดและติดตั้งลงในกล่องภายในเครื่องของคุณ เราจะใช้มันเพื่อสร้างฐานข้อมูลของเราบนคลัสเตอร์และเพื่อสร้างคอลเลกชันและสืบค้นข้อมูลในพวกเขา

ชื่อฐานข้อมูลของเราจะเป็น: saas-dbและชุดแรกregistrations

ใช้ MongoDB จากเส้นทาง NextJS API

เริ่มจาก repo ที่เราสร้างขึ้นในส่วนที่ 1 มาแก้ไขกัน เพื่อให้เราสามารถจัดเก็บและสอบถามผู้ใช้ที่ลงทะเบียนใน/จากฐานข้อมูล

ใน repo นั้น เราใช้ตัวแปรในหน่วยความจำเพื่อจัดเก็บการลงทะเบียนอีเมลที่มาจากเพจ เราจะแก้ไขปลายทางนั้นเพื่อใช้ MongoDB Collection registrationsแทน

ติดตั้งการพึ่งพา

mongodb เป็นที่พึ่งเดียวที่เราต้องการ

$ yarn add mongodb
yarn add v1.22.11
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 9 new dependencies.
info Direct dependencies
└─ [email protected]
info All dependencies
├─ @types/[email protected]
├─ @types/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  Done in 7.90s.

สำหรับการเชื่อมต่อกับ MongoDB เราใช้ "ฟังก์ชันการเชื่อมต่อ" ซ้ำจากโฟลเดอร์ตัวอย่าง NextJS repo (https://github.com/vercel/next.js/tree/canary/examples/with-mongodb) และปิดด้วยฟังก์ชันทั่วไปที่ให้การเข้าถึงฐานข้อมูลโดยตรง ดังนั้นเราจึงไม่จำเป็นต้องกังวลเกี่ยวกับการเชื่อมต่อกับฐานข้อมูลทุกครั้งที่เราจำเป็นต้องสืบค้น

withMongoฟังก์ชั่นเป็น async ทั่วไปที่จะอนุญาตให้กลับค่าพิมพ์<T> Tอดีต:

const registrations = await withMongo(async (db: Db) => {
  const collection = db.collection<User>('registrations')
  return await collection.find().toArray()
})

รายละเอียดที่สำคัญอีกประการหนึ่งคือการตั้งค่าตัวแปรรันไทม์ของสภาพแวดล้อม:

• MONGO_DB_URL : ที่อยู่ URL การเชื่อมต่อ MongoDB (เหมือนกับที่เราเคยเชื่อมต่อกับคลัสเตอร์ฐานข้อมูล MongoDB โดยใช้เข็มทิศ)
• MONGO_DB_NAME: MongoDB Name (เราตั้งให้เป็นsaas-db)

MONGO_DB_URL=mongodb+srv://<user>:<pass>@<server-url>
MONGO_DB_NAME=saas-db

เรียกใช้แอปของคุณ ตอนนี้มีแบ็กเอนด์ MongoDB

บทสรุป

• การตั้งค่าฐานข้อมูลสำหรับ SaaS MVP ไม่ควรเสียเวลาและเงินมากนัก ระดับฟรีมีอยู่เพื่อให้คุณสามารถบูตสแตรปแอปพลิเคชันของคุณได้ หากแอปพลิเคชันของคุณเติบโตขึ้น คุณสามารถซื้อพื้นที่เพิ่มเติมได้ตามต้องการโดยใช้แผนแบบไร้เซิร์ฟเวอร์ (https://www.mongodb.com/pricing)
• MongoDB Atlas ฟรีระดับให้พื้นที่ฐานข้อมูล 500Mb แก่คุณ เพียงให้แน่ใจว่าได้ปกป้องการเข้าถึงด้วยรหัสผ่านที่รัดกุม และหากเป็นไปได้ ให้อนุญาตรายการ IP ให้ Peering (https://docs.atlas.mongodb.com/security-vpc-peering/) หรือปลายทางส่วนตัว (https://docs.atlas.mongodb.com/security-private-endpoint/)
• ประเภท TypeScript ทำให้ทุกอย่างง่ายขึ้นมาก mongodbแพ็คเกจถูกพิมพ์อย่างสมบูรณ์ ใช้มัน.
• รหัสเต็มสามารถพบได้ใน: https://github.com/outsrc/next-mui/tree/efg/with-mongodb
• เรียกใช้การสาธิตที่: https://next-mui-r3ranh7al-outsrc.vercel.app/( เนื่องจากไม่มีปุ่มลบและอีเมลปรากฏบนหน้าเว็บ เราจึงลบข้อมูลทั้งหมดทุก ๆ ชั่วโมง )