หน้านี้ได้รับการแปลโดย Cloud Translation API

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

1. บทนำ

ในโพสต์นี้ เราจะมาดูกันว่า Cloud Run และ MongoDB ทำงานร่วมกันเพื่อมอบประสบการณ์การพัฒนาแอปพลิเคชัน MEAN แบบ 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

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

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

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

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

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

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

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

2. ข้อกำหนด

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

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

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

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

เมื่อจัดสรรอินสแตนซ์แบบ Serverless แล้ว คุณควรเห็นว่าอินสแตนซ์พร้อมใช้งาน

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

ดำเนินการต่อโดยคลิก "เลือกวิธีการเชื่อมต่อ" แล้วเลือก "Connect your application"

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

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

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

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

gcloud config set project PROJECT_ID

ใช้คำสั่งต่อไปนี้

gcloud services enable run.googleapis.com

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

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

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

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

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

ไฟล์การกำหนดค่า 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 บนแถบด้านซ้าย ดังนี้

จากนั้น คลิกไอคอน "ทำให้ใช้งานได้กับ 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
คลิกปุ่ม "ทำให้ใช้งานได้" จากนั้นเลือก "แสดงบันทึกโดยละเอียด" เพื่อติดตามการทำให้บริการ 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 เราจะติดตั้งการอ้างอิง 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
คลิกปุ่ม "ทำให้ใช้งานได้" อีกครั้ง และดูบันทึกเมื่อจัดส่งแอปไปยังระบบคลาวด์แล้ว เมื่อการทำให้ใช้งานได้เสร็จสมบูรณ์ คุณควรจะเห็น URL สำหรับแอปไคลเอ็นต์

เปิด URL และเล่นเกมกับแอปพลิเคชันของคุณ!

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

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

ยุติอินสแตนซ์ MongoDB

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

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

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

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

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