คุณเคยประสบปัญหานี้ไหม จะขายเว็ปไซต์ให้ลูกค้าหลายคน ซึ่งถ้าขายให้ลูกค้า 10 คน แล้วบังเอิญไปเจอบัคสักบัคนึงเนี่ย เราต้องไปนั่งแก้บัคให้ลูกค้าทีละคน จะดีกว่ามั้ยถ้าเราแก้บัคทีเดียวลง github ให้ deploy เสร็จให้ครบทุกคนในทีเดียว
เริ่มต้น เราจะมาสร้าง project ใน MongoDB Atlas กัน ในที่นี้ ผมจะใช้ชื่อ testing project
เมื่อสร้างเสร็จแล้ว ให้เราสร้าง database โดยไปที่ collections -> Add My Own Data
เราจะใส่ชื่อ database เป็นชื่อลูกค้า ในที่นี้ ผมจะใช้ชื่อ Customer-A กับ Customer-B ใน database ของแต่ละลูกค้าจะประกอบด้วย collection customers, items, users
ทำ Customer-B แบบเดียวกันกับ Customer-A
ใน collection ให้เราใส่ข้อมูลแต่ละ database ไม่เหมือนกัน
ทีนี้ก็ทำการ connect database
เลือก Connect your application และ copy URL ด้านล่าง
ในที่นี้ผมจะสร้าง Next JS ด้วย command
npx create-next-app –example with-mongodb <project name>
นี่เป็น example code ที่มี mongodb package มาให้
จากนั้นให้เราไปที่หน้า index.js และแก้ไข getServerSideProps ให้เป็นแบบในรูป
นี่คือหน้าตาเว็ปไซต์ที่ผมทำ ข้อมูลรายชื่อลูกค้า สินค้า และผู้ใช้จะมาจาก document ที่เราสร้างใน Atlas ก่อนหน้านี้
จากนั้นก็ทำการ push ขึ้น github เพราะ github ช่วยให้เราทำงานง่ายเวลาจะ deploy ลง Vercel
ทีนี้เราก็มาที่ Vercel เพื่อทำการ deploy project ของเรากัน ให้เรากดที่ New project จากนั้นก็ import repository project ของเรา
ทีนี้ให้เรากดไปที่ Environment Variables เพื่อใส่ url ที่เราก็อปมา
ใส่ชื่อเป็น MONGODB_URI กับ MONGODB_DB โดย MONGODB_DB จะใส่เป็นชื่อของ database เช่น Customer-A
จากนั้นก็ทำการ deploy ได้เลย
เราได้ deploy Customer-A ไปแล้ว ทีนี้ก็ deploy ของ Customer-B กันบ้าง โดยทำคล้ายของเดิมเลย เพียงแค่เราจะใส่ Environment Variables ไม่เหมือนกัน (อย่าลืมเปลี่ยนชื่อ project ไม่ให้ซ้ำกับ customer-A)
ถ้าเราจำได้ URI จะมีให้ใส่ database name ไป เราเพียงแค่เปลี่ยน database name จาก Customer-A มาเป็น Customer-B เพียงเท่านี้เราก็สามารถ deploy project ให้กับ Customer-B ได้แล้ว
Deploy เสร็จสิ้น
นี่คือ website ของ Customer-B เราจะเห็นว่า data จะไม่เหมือนของ Customer-A แม้จะใช้ source code เดียวกัน
ถ้าเกิดเราเจอบัคหรืออยากเปลี่ยน style เราก็สามารถแก้ code อันเดิมได้เลย แล้วก็ push ขึ้น github ในที่นี้ผมจะเปลี่ยนสี header เป็นสีแดง
เมื่อเราทำการ push code จะเห็นว่า commit message จะขึ้นเหมือนกันทั้ง Customer-A กับ Customer-B
เมื่อ Deploy เสร็จก็จะหน้าตาประมาณนี้
ทีนี้ถ้าเรามีลูกค้าเป็นสิบคน เราก็ไม่ต้องมานั่งแก้บัคให้ลูกค้าทีละคนแล้ว เราแค่ deploy โปรเจคใหม่และเปลี่ยน environment ให้แต่ละคน แค่นี้ก็สบายเราแล้ว
ผู้เขียน Tanapat Limtemsap
วันที่ 12 พฤศจิกายน พ.ศ.2564