สำหรับเพื่อน ๆ คนไหนที่มีเว็บอยู่แล้ว แต่ยังไม่รู้ว่าจะเอาเว็บขึ้นคลาวด์ยังไงดี วันนี้แอดจะมาสอนวิธีเอาเว็บ Node.js ที่เชื่อมต่อกับฐานข้อมูล โดยจะใช้เป็น Azure Cosmos DB for MongoDB และนำเว็บนี้ขึ้นไปยังคลาวด์ โดยบริการคลาวด์ที่เราหยิบมายกตัวอย่างจะเป็น Microsoft Azure: App Service ที่ OS พื้นฐานจะเป็น Linux (แต่ถ้าอยากให้เราเอาขึ้นของค่ายไหนให้ดูอีกรีเควสมาได้น้าาาา)
เครื่องมือที่ใช้
ก่อนเริ่มใช้งาน เราต้องทำความเข้าใจเครื่องมือและสิ่งที่ต้องเตรียมกันก่อนมีดังนี้
1. Azure App Service: บริการบนคลาวด์จาก Microsoft ที่ใช้โฮสต์เว็บแอปพลิเคชัน รองรับภาษาโปรแกรมหลากหลาย เช่น Node.js, Java, Python
2. Azure Cosmos DB for MongoDB: ฐานข้อมูลบนคลาวด์จาก Microsoft รองรับ MongoDB API 100% ใช้งานง่าย สเกลได้ เหมาะกับแอปพลิเคชันที่ต้องการความยืดหยุ่น (เพราะเป็น MongoDB นี่แหละ)
3. Express.js: เฟรมเวิร์ก JavaScript ยอดฮิตสำหรับสร้างเว็บแอปพลิเคชัน เว็บเอพีไอ ที่หลาย ๆ คนที่เริ่มต้นใช้งาน JavaScript ในการทำ Backend ต้องเคยใช้กันมาแน่ ๆ
4. Github: บริการสำหรับฝาก Source Code ที่เราจะเอาไปเก็บแล้วให้ Azure App Service เรียกมารัน แต่หมายเหตุไว้ตัวโต ๆ ว่า Github ยังมีฟีเจอร์อื่น ๆ มากกว่าเก็บโค้ดอีกมากมาย
สิ่งที่ต้องเตรียม
- บัญชี Azure (สมัครฟรีได้ที่ https://azure.microsoft.com/en-us/free)
- ติดตั้ง Node.js บนเครื่องคอมพิวเตอร์
- ติดตั้ง MongoDB บนเครื่องคอมพิวเตอร์ (ไม่จำเป็น ถ้าต้องการลองใช้งานตัวอย่าง)
- โปรแกรม Git (เช่น Git Bash หรือ Github Desktop)
- บัญชี Github
- ตัวอย่างเว็บแอปพลิเคชันสำหรับคนที่อยากลองทำตาม (ไม่ได้บังคับ) สามารถดาวน์โหลดหรือ clone ได้จาก https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app
เมื่อทำความเข้าใจเครื่องมือและเตรียมสิ่งที่ต้องเรียบร้อยแล้ว เราก็พร้อมที่จะเริ่มใช้งาน!
วิธีทำ (Step by Step)
1. เตรียม Azure Web App กับ ฐานข้อมูล Cosmos DB
- เริ่มจากเข้าไปที่ Azure Portal ที่ https://portal.azure.com/
- ค้นหาคำว่า “web app database” ในแถบค้นหา แล้วเลือก Web App + Database ที่อยู่ในหมวด Marketplace
ตั้งค่าดังนี้
- Resource Group: ถ้ายังไม่มีให้สร้างใหม่ ชื่อประมาณ ‘expressjs-mongodb-tutorial-rg’
- Region: เลือก Region (อาจจะใช้เป็นประเทศที่อยู่ใกล้ที่สุดก็ได้)
- Name: ‘expressjs-mongodb-XYZ’ (XYZ คือ 3 ตัวอักษรหรือเลขอะไรก็ได้) ชื่อนี้ต้องไม่มีใครใช้มาก่อน
- Runtime stack: Node 20 LTS
- Hosting plan: Basic (ราคาประหยัดก่อน เดี๋ยวจะอัปเกรดเวลาจะเปิดจริงทีหลังได้)
- Azure Comos DB for MongoDB จะถูกรวมมาด้วยโดยอัตโนมัติ โดย MongoDB คือฐานข้อมูลที่รองรับเว็บของเรา (จะมีชื่อฐานข้อมูล auto-generate ขึ้นมาให้ จะขึ้นประมาณว่า <app-name>-database ส่วนนี้แนะนำให้เก็บหรือคัดลอกไว้ เพราะจำเป็นต้องใช้ในสเตปต่อไป)
- กด ‘Review + Create‘
- พอตรวจสอบทุกอย่างถูกต้องแล้ว กด ‘Create‘ แล้วรอสักพักแปปป
2. ตั้งค่าการเชื่อมต่อฐานข้อมูล
- ระบบจะมี MongoDB URI (เหมือนลิงก์เชื่อมต่อกับฐานข้อมูล) มาให้อัตโนมัติ แต่เราต้องสร้างตัวแปร DATABASE_URL และ DATABASE_NAME เพื่อให้เว็บใช้งานได้
- โดยการเข้าไปที่หน้าของ App Service ที่เราสร้าง แล้วมองหาเมนู Configuration ทางซ้าย
- ใน Tab ‘Application settings‘ สร้าง settings ขึ้นมา 2 อัน ดังนี้
- DATABASE_NAME : ใส่ชื่อฐานข้อมูลจากขั้นตอนแรก (อย่างในตัวอย่างจะเป็น msdocs-expressjs-mongodb-XYZ-database)
- DATABASE_URL : กดไปที่ MONGODB_URI ที่สร้างเอาไว้ จะดูเหมือนลิงก์ยาวๆให้เรากด Copy แล้วเอาไปใส่ตรงค่าของ DATABASE_URL
3. เอาโค้ดเว็บ (Deploy) ขึ้น Azure
มาถึงขั้นตอนหลักของเรากัน แล้วกับการเอาเว็บขึ้นคลาวด์ เราจะทำโดยใช้ GitHub Actions เพื่อให้ที่เราอัปเดตโค้ดใน GitHub ของเรา มันจะก็วิ่งเอาโค้ดใหม่ของ เราไปขึ้นเว็บบน Azure แบบ Auto เลยยย อารมณ์แบบแก้เสร็จ ใช้ Github Actions เอาไป Deploy ให้นั่นเอง
แต่ก่อนอื่นเราต้องมาตั้งค่าให้ Github Action และ Azure App Service มันรู้ก่อนว่าจะไปเอาโค้ดจากไหน Deploy ไปที่ไหน เริ่มจากขั้นตอนดังนี้
- เข้า GitHub แล้วทำตามนี้
- เริ่มจากไปที่ Github ตัวอย่างที่เราจะ Deploy (อันนี้จะเป็นตัวอย่างจาก Document ของ Microsoft) https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app แล้วทำการ ‘Fork’ โค้ดนี้เป็นของเรา
- เข้าไปดูโค้ดใน GitHub ที่เพิ่ง fork มา ถ้าใครจะลองให้แก้ไขในไฟล์ config/connection.js ตรงที่มีส่วนเกี่ยวข้องกับ DATABASE_URL กับ DATABASE_NAME (ใช้ app settings ที่เราสร้างมาเมื่อสักครู่)
- กลับไปที่ App Service กัน
- หา Deployment Center ทางเมนูซ้าย
- ตรง Source ให้เลือก GitHub โดยจะมี GitHub Actions ขึ้นมาเป็น Default อยู่แล้ว
- ล็อกอินเข้า GitHub และทำการอนุญาต (Authorize) ให้ Azure เข้าใช้งานได้
- จะให้เราเลือกว่าเป็น GitHub องค์กรหรือของเราเองก็ได้
- Repository: เลือกโปรเจกต์ใน GitHub ที่เราเพิ่ง fork มา (msdocs-nodejs-mongodb-azure-sample-app)
- Branch: เลือก main
- กด Save แถว ๆ ด้านบน โดยอัตโนมัติระบบจะเพิ่ม workflow ลงใน GitHub ของเราโดยอัตโนมัติ
- กลับไปที่ Deployment Center แล้วกด Logs ระบบจะขึ้น log ให้เราดูว่า build/deploy ผ่านไหม อันนี้รอ ~15 นาที
4. เข้าเว็บ!
ในหน้า App Service ให้เราหาเมนู Overview แล้วจะมี URL ของเว็บขึ้นมา คลิกเลย!
หรือจะเข้าแบบ https://<ชื่อเว็บ>.azurewebsites.net ก็ได้เหมือนกัน
เพียงเท่านี้เราก็มีเว็บ Node.js ที่เชื่อมต่อกับฐานข้อมูล Azure Cosmos DB for MongoDB บน Azure App Service เรียบร้อยแล้ว! เว็บใหม่ผ่าน GitHub Actions สำหรับบทความนี้เป็นแค่พื้นฐานของการ Deploy เว็บ แต่ Service เหล่านี้ยังมีอะไรให้เรียนรู้อีกเยอะ เช่น การ scale เว็บ การทำ Authentication & Authorization เพิ่มเติมได้ หากใครอยากเรียนรู้การใช้งานเพิ่มเติมสามารถเรียนรู้เพิ่มเติมได้ที่ https://school.borntodev.com/course/get-started-with-azure-app-service
