แอปพลิเคชันสแต็ก MEAN แบบ Serverless ใน MongoDB Atlas และ Cloud Run

1. บทนำ

ในโพสต์นี้ เราจะมาดูว่า Cloud Run และ MongoDB ทำงานร่วมกันอย่างไรเพื่อมอบประสบการณ์การพัฒนาแอปพลิเคชัน MEAN Stack แบบ Serverless อย่างสมบูรณ์ เราจะมาเรียนรู้วิธีสร้างแอปพลิเคชัน MEAN แบบ Serverless ด้วย Cloud Run และ MongoDB Atlas ซึ่งเป็นแพลตฟอร์มข้อมูลแอปพลิเคชันแบบมัลติคลาวด์ของ MongoDB

Cloud Run คืออะไร

Cloud Run ช่วยให้คุณสร้างและทำให้ใช้งานได้แอปที่อยู่ในคอนเทนเนอร์ที่รองรับการปรับขนาดซึ่งเขียนด้วยภาษาใดก็ได้ (รวมถึง Go, Python, Java, Node.js, .NET และ Ruby) บนแพลตฟอร์มที่มีการจัดการครบวงจร Cloud Run โดดเด่นกว่าใครด้วยการช่วยให้เราทำสิ่งต่อไปนี้ได้

แพ็กเกจโค้ดในคอนเทนเนอร์แบบไม่เก็บสถานะหลายรายการที่รับรู้คำขอและเรียกใช้ผ่านคำขอ HTTP
ระบบจะเรียกเก็บเงินเฉพาะทรัพยากรที่คุณใช้เท่านั้น
รองรับภาษาโปรแกรมหรือไลบรารีระบบปฏิบัติการที่คุณเลือก หรือไบนารีใดก็ได้

ดูฟีเจอร์เพิ่มเติมในบริบททั้งหมดได้ที่ลิงก์นี้

ฐานข้อมูลแบบ Serverless ด้วย MongoDB Atlas

MongoDB เปิดตัวอินสแตนซ์แบบ Serverless ซึ่งเป็นการติดตั้งใช้งานฐานข้อมูลแบบ Serverless ที่มีการจัดการครบวงจรใหม่ใน Atlas เพื่อแก้ปัญหานี้ อินสแตนซ์แบบ Serverless ช่วยให้คุณไม่ต้องกังวลเรื่องโครงสร้างพื้นฐาน เพียงแค่ทำให้ใช้งานได้ฐานข้อมูล ระบบก็จะเพิ่มทรัพยากรและปรับขนาดลงได้อย่างราบรื่นตามความต้องการโดยไม่ต้องมีการจัดการด้วยตนเอง และที่สำคัญที่สุดคือระบบจะเรียกเก็บเงินเฉพาะการดำเนินการที่คุณเรียกใช้เท่านั้น เราจะผสานรวมความสามารถของ Cloud Run และ MongoDB Atlas เพื่อให้สถาปัตยกรรมของเราเป็นแบบ Serverless อย่างแท้จริง

MEAN Stack

MEAN Stack เป็นชุดเทคโนโลยีสำหรับสร้างเว็บแอปพลิเคชันแบบฟูลสแต็กด้วย JavaScript และ JSON ทั้งหมด MEAN Stack ประกอบด้วยองค์ประกอบหลัก 4 อย่าง ได้แก่ MongoDB, Express, Angular และ Node.js

MongoDB เป็นผู้รับผิดชอบในการจัดเก็บข้อมูล
Express.js เป็นเฟรมเวิร์กเว็บแอปพลิเคชัน Node.js สำหรับสร้าง API
Angular เป็นแพลตฟอร์ม JavaScript ฝั่งไคลเอ็นต์
Node.js คือสภาพแวดล้อมรันไทม์ JavaScript ฝั่งเซิร์ฟเวอร์ เซิร์ฟเวอร์ใช้ไดรเวอร์ MongoDB Node.js เพื่อเชื่อมต่อกับฐานข้อมูล รวมถึงเรียกและจัดเก็บข้อมูล

สิ่งที่คุณจะสร้าง

คุณจะเขียนแอปพลิเคชันบทบาทงานของพนักงานแบบ Full Stack ใน MongoDB, Express JS, Angular JS และ Node JS ซึ่งประกอบด้วย

แอปพลิเคชันเซิร์ฟเวอร์ใน Node JS และ Express JS ที่มีคอนเทนเนอร์
แอปพลิเคชันไคลเอ็นต์ที่สร้างใน AngularJS ซึ่งสร้างโดยใช้คอนเทนเนอร์
แอปพลิเคชันทั้ง 2 รายการได้รับการติดตั้งใช้งานใน Cloud Run
แอปเซิร์ฟเวอร์เชื่อมต่อกับอินสแตนซ์ MongoDB แบบไร้เซิร์ฟเวอร์โดยใช้ไดรเวอร์ MongoDB NodeJS
Server API จะดำเนินการโต้ตอบแบบอ่าน-เขียนกับฐานข้อมูล
แอปพลิเคชันไคลเอ็นต์คืออินเทอร์เฟซผู้ใช้สำหรับแอปพลิเคชันบทบาทงานของพนักงาน

สิ่งที่คุณจะได้เรียนรู้

วิธีสร้างอินสแตนซ์ MongoDB แบบไร้เซิร์ฟเวอร์
วิธีตั้งค่าโปรเจ็กต์ Cloud Run
วิธีติดตั้งใช้งานเว็บแอปพลิเคชันใน Google Cloud Run
วิธีสร้างและติดตั้งใช้งานแอปพลิเคชัน MEAN Stack

2. ข้อกำหนด

เบราว์เซอร์ เช่น Chrome หรือ Firefox
โปรเจ็กต์ Google Cloud Platform ที่มีอินสแตนซ์ Cloud Run และ MongoDB Atlas
ส่วนถัดไปมีรายการขั้นตอนในการสร้างแอปพลิเคชัน MEAN Stack

3. สร้างอินสแตนซ์และฐานข้อมูล MongoDB Serverless

หากต้องการเริ่มต้น ให้เริ่มใช้งาน MongoDB Atlas บน Google Cloud

เมื่อลงชื่อสมัครใช้แล้ว ให้คลิกปุ่ม "สร้างฐานข้อมูล" เพื่อสร้างอินสแตนซ์แบบไม่มีเซิร์ฟเวอร์ใหม่ เลือกการกำหนดค่าต่อไปนี้

เมื่อจัดสรรอินสแตนซ์แบบไม่มีเซิร์ฟเวอร์แล้ว คุณควรเห็นอินสแตนซ์ทำงาน

คลิกปุ่ม "เชื่อมต่อ" เพื่อเพิ่มที่อยู่ IP สำหรับการเชื่อมต่อและผู้ใช้ฐานข้อมูล
สำหรับ Codelab นี้ เราจะใช้การตั้งค่า "อนุญาตการเข้าถึงจากทุกที่" MongoDB Atlas มาพร้อมชุดฟีเจอร์ด้านความปลอดภัยและการเข้าถึง ดูข้อมูลเพิ่มเติมได้ในบทความเอกสารประกอบเกี่ยวกับฟีเจอร์ด้านการรักษาความปลอดภัย
ใช้ข้อมูลเข้าสู่ระบบที่คุณเลือกสำหรับชื่อผู้ใช้และรหัสผ่านของฐานข้อมูล เมื่อทำตามขั้นตอนเหล่านี้เสร็จแล้ว คุณควรเห็นสิ่งต่อไปนี้

ดำเนินการต่อโดยคลิกปุ่ม "เลือกวิธีการเชื่อมต่อ" แล้วเลือก "เชื่อมต่อแอปพลิเคชัน"

คัดลอกสตริงการเชื่อมต่อที่คุณเห็น แล้วแทนที่รหัสผ่านด้วยรหัสผ่านของคุณเอง เราจะใช้สตริงดังกล่าวเพื่อเชื่อมต่อกับฐานข้อมูลในส่วนต่อไปนี้

4. ตั้งค่าโปรเจ็กต์ Cloud Run

ก่อนอื่น ให้ลงชื่อเข้าใช้ Cloud Console สร้างโปรเจ็กต์ใหม่ หรือใช้โปรเจ็กต์ที่มีอยู่ซ้ำ
จดจำรหัสโปรเจ็กต์ของโปรเจ็กต์ที่คุณสร้าง
ด้านล่างคือรูปภาพที่แสดงหน้าโปรเจ็กต์ใหม่ ซึ่งคุณจะเห็นรหัสโปรเจ็กต์ขณะสร้าง

จากนั้นเปิดใช้ Cloud Run API จาก Cloud Shell โดยทำดังนี้
เปิดใช้งาน Cloud Shell จาก Cloud Console เพียงคลิก "เปิดใช้งาน Cloud Shell"
เมื่อเชื่อมต่อกับ Cloud Shell แล้ว คุณควรเห็นว่าคุณได้รับการตรวจสอบสิทธิ์แล้วและระบบได้ตั้งค่าโปรเจ็กต์เป็นรหัสโปรเจ็กต์ของคุณแล้ว หากไม่ได้ตั้งค่าโปรเจ็กต์ด้วยเหตุผลบางประการ ให้เรียกใช้คำสั่งต่อไปนี้

gcloud config set project PROJECT_ID

ใช้คำสั่งด้านล่าง

gcloud services enable run.googleapis.com

เราจะใช้ Cloud Shell และ Cloud Shell Editor สำหรับการอ้างอิงโค้ด หากต้องการเข้าถึง Cloud Shell Editor ให้คลิก "เปิดตัวแก้ไข" จากเทอร์มินัล Cloud Shell

5. โคลนโปรเจ็กต์ MEAN Stack

เราจะติดตั้งใช้งานเว็บแอปพลิเคชันการจัดการพนักงาน REST API สร้างขึ้นด้วย Express และ Node.js ส่วนอินเทอร์เฟซเว็บสร้างขึ้นด้วย Angular และระบบจะจัดเก็บข้อมูลในอินสแตนซ์ MongoDB Atlas ที่เราสร้างไว้ก่อนหน้านี้
โคลนที่เก็บโปรเจ็กต์โดยเรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัลของ Cloud Shell

git clone https://github.com/mongodb-developer/mean-stack-example.git

6. ทำให้ REST API ของ Express และ Node.js ใช้งานได้

ไฟล์การกำหนดค่า Docker

ก่อนอื่น เราจะทำให้บริการ Cloud Run สำหรับ Express REST API ใช้งานได้ ไฟล์ที่สำคัญที่สุดสำหรับการทำให้ใช้งานได้คือไฟล์การกำหนดค่า Docker มาดูตัวอย่างกัน

mean-stack-example/server/Dockerfile

# Use the official lightweight Node.js 12 image.
# https://hub.docker.com/_/node
FROM node:17-slim
 
WORKDIR /usr/app
COPY ./ /usr/app
 
# Install dependencies and build the project.
RUN npm install
RUN npm run build
 
# Run the web service on container startup.
CMD ["node", "dist/server.js"]

การกำหนดค่าจะตั้งค่า Node.js รวมถึงคัดลอกและสร้างโปรเจ็กต์ เมื่อคอนเทนเนอร์เริ่มทำงาน คำสั่งด้านล่างจะเริ่มบริการ

node dist/server.js

หากต้องการเริ่มการติดตั้งใช้งาน Cloud Run ใหม่ ให้คลิกไอคอน Cloud Run ในแถบด้านข้างซ้าย

จากนั้นคลิกไอคอน "Deploy to Cloud Run"

กรอกข้อมูลการกำหนดค่าบริการดังนี้
ชื่อบริการ: node-express-api
แพลตฟอร์มการทำให้ใช้งานได้: Cloud Run (จัดการครบวงจร)
ภูมิภาค: เลือกภูมิภาคที่อยู่ใกล้กับภูมิภาคของฐานข้อมูลเพื่อลดเวลาในการตอบสนอง
การตรวจสอบสิทธิ์: อนุญาตคำขอที่ไม่ผ่านการตรวจสอบสิทธิ์
ในการตั้งค่าการแก้ไข ให้คลิกแสดงการตั้งค่าขั้นสูงเพื่อขยายการตั้งค่า
พอร์ตคอนเทนเนอร์: 5200
ตัวแปรสภาพแวดล้อม เพิ่มคู่คีย์-ค่าต่อไปนี้ และตรวจสอบว่าคุณได้เพิ่มสตริงการเชื่อมต่อสำหรับการติดตั้งใช้งาน MongoDB Atlas ของคุณเองแล้ว

ATLAS_URI:mongodb+srv:/<username>:<password>@sandbox.pv0l7.mongodb.net/meanStackExample?retryWrites=true&w=majority

เลือก Cloud Build สำหรับสภาพแวดล้อมของบิลด์
สุดท้าย ในส่วนการตั้งค่าบิลด์ ให้เลือก
เครื่องมือสร้าง: Docker
Docker: mean-stack-example/server/Dockerfile
คลิกปุ่ม "Deploy" แล้วคลิก "Show Detailed Logs" เพื่อติดตามการติดตั้งใช้งานบริการ Cloud Run บริการแรก
หลังจากบิลด์เสร็จแล้ว คุณควรเห็น URL ของบริการที่ทำให้ใช้งานได้แล้ว

เปิด URL แล้วต่อท้ายด้วย "/employees"
คุณควรเห็นอาร์เรย์ว่างเนื่องจากปัจจุบันไม่มีเอกสารในฐานข้อมูล

มาติดตั้งใช้งานอินเทอร์เฟซผู้ใช้เพื่อให้เราเพิ่มผู้ใช้ได้กัน

7. ทำให้เว็บแอปพลิเคชัน Angular ใช้งานได้

แอปพลิเคชัน Angular ของเราอยู่ในไดเรกทอรีไคลเอ็นต์ หากต้องการทำให้ใช้งานได้ เราจะใช้เซิร์ฟเวอร์ Nginx และ Docker เพียงแค่คิดว่ายังมีตัวเลือกในการใช้ โฮสติ้งของ Firebase สำหรับการติดตั้งใช้งานแอปพลิเคชัน Angular เนื่องจากคุณสามารถแสดงเนื้อหาต่อ CDN (เครือข่ายนำส่งเนื้อหา) ได้โดยตรง

ไฟล์การกำหนดค่า

ลองดูไฟล์การกำหนดค่า

mean-stack-example/client/nginx.conf

events{}
 
http {
   include /etc/nginx/mime.types;
   server {
       listen 8080;
       server_name 0.0.0.0;
       root /usr/share/nginx/html;
       index index.html;
 
       location / {
           try_files $uri $uri/ /index.html;
       }
   }
}

ในการกำหนดค่า Nginx เราจะระบุพอร์ตเริ่มต้นคือ 8080 และไฟล์เริ่มต้นคือ index.html

mean-stack-example/client/Dockerfile

FROM node:17-slim AS build
 
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
 
# Install dependencies and copy them to the container
RUN npm install
COPY . .
 
# Build the Angular application for production
RUN npm run build --prod
 
# Configure the nginx web server
FROM nginx:1.17.1-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build /usr/src/app/dist/client /usr/share/nginx/html
 
# Run the web service on container startup.
CMD ["nginx", "-g", "daemon off;"]

ในการกำหนดค่า Docker เราจะติดตั้งทรัพยากร Dependency ของ Node.js และสร้างโปรเจ็กต์ จากนั้นเราจะคัดลอกไฟล์ที่สร้างไปยังคอนเทนเนอร์ กำหนดค่า และเริ่มบริการ Nginx
สุดท้าย เราต้องกำหนดค่า URL ไปยัง REST API เพื่อให้แอปพลิเคชันไคลเอ็นต์ส่งคำขอไปยัง URL นั้นได้ เนื่องจากเราใช้ URL ในไฟล์เดียวในโปรเจ็กต์เท่านั้น เราจึงจะฮาร์ดโค้ด URL หรือคุณจะแนบตัวแปรสภาพแวดล้อมกับออบเจ็กต์หน้าต่างและเข้าถึงจากที่นั่นก็ได้

mean-stack-example/client/src/app/employee.service.ts

...
@Injectable({
 providedIn: 'root'
})
export class EmployeeService {
 // Replace with the URL of your REST API
 private url = 'https://node-express-api-vsktparjta-uc.a.run.app'; 
...

เราพร้อมที่จะทำให้ใช้งานได้กับ Cloud Run แล้ว เริ่มการติดตั้งใช้งานใหม่ด้วยการตั้งค่าการกำหนดค่าต่อไปนี้
```
  - Service Settings: Create a service
```
ชื่อบริการ: angular-web-app
แพลตฟอร์มการทำให้ใช้งานได้: Cloud Run (จัดการครบวงจร)
การตรวจสอบสิทธิ์: อนุญาตคำขอที่ไม่ผ่านการตรวจสอบสิทธิ์
เลือก Cloud Build สำหรับสภาพแวดล้อมของบิลด์
สุดท้าย ในส่วนการตั้งค่าบิลด์ ให้เลือก
เครื่องมือสร้าง: Docker
Docker: mean-stack-example/client/Dockerfile
คลิกปุ่ม "Deploy" อีกครั้งและดูบันทึกขณะที่ระบบส่งแอปไปยังระบบคลาวด์ เมื่อการติดตั้งใช้งานเสร็จสมบูรณ์ คุณควรเห็น URL สำหรับแอปไคลเอ็นต์

เปิด URL แล้วลองใช้แอปพลิเคชันของคุณ

8. ล้างข้อมูล

โปรดทำตามขั้นตอนต่อไปนี้เพื่อเลี่ยงไม่ให้เกิดการเรียกเก็บเงินกับบัญชี Google Cloud สำหรับทรัพยากรที่ใช้ในโพสต์นี้

สิ้นสุดอินสแตนซ์ MongoDB

ไปที่คลัสเตอร์ MongoDB Instance
เลือกคลัสเตอร์และอินสแตนซ์ที่คุณสร้าง
คลิกจุดไข่ปลาข้างชื่อคลัสเตอร์ แล้วเลือก "สิ้นสุด" จากรายการ

ลบการทำให้ใช้งานได้ของ Cloud Run

ไปที่หน้า Cloud Run ในคอนโซล Google Cloud
เลือกบริการ Cloud Run ที่ต้องการลบ
คลิกไอคอนลบที่ด้านบนของคอนโซล

9. ขอแสดงความยินดี

ขอแสดงความยินดี คุณสร้างเว็บแอปพลิเคชัน MEAN Stack ใน Cloud Run สำเร็จแล้ว