אפליקציית מקבץ 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), פריסת מסד נתונים חדשה ומנוהלת לחלוטין ב-Atlas. עם מופעים ללא שרתים, לא צריך לחשוב על תשתית – פשוט פורסים את מסד הנתונים והוא יתרחב אנכית או יצטמצם בצורה חלקה בהתאם לביקוש – בלי צורך בניהול מעשי. והכי חשוב, אתם תחויבו רק על הפעולות שתפעילו. כדי שהארכיטקטורה שלנו תהיה באמת serverless, נשלב בין היכולות של Cloud Run ו-MongoDB Atlas.

MEAN Stack

‫ MEAN stack הוא סטאק תוכנות לבניית אפליקציות אינטרנט פול סטאק, באמצעות JavaScript ו-JSON בלבד. חבילת MEAN מורכבת מארבעה רכיבים עיקריים: 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, עם קונטיינר
שתי האפליקציות נפרסות ב-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

אחרי שנרשמים, לוחצים על הלחצן Build a Database (יצירת מסד נתונים) כדי ליצור מופע חדש ללא שרת. בוחרים את ההגדרה הבאה:

אחרי שהמופע ללא שרת יוקצה, הוא אמור להיות פעיל

לוחצים על הלחצן 'חיבור' כדי להוסיף כתובת IP לחיבור ומשתמש במסד הנתונים.
ב-codelab הזה נשתמש בהגדרה 'מתן גישה מכל מקום'. ‫MongoDB Atlas כולל קבוצה של תכונות אבטחה וגישה. מידע נוסף על התכונות האלה זמין במאמר בנושא תיעוד של תכונות אבטחה
משתמשים בפרטי הכניסה הרצויים לשם המשתמש והסיסמה של מסד הנתונים. אחרי שמבצעים את השלבים האלה, אמור להופיע המסך הבא:

לוחצים על הלחצן 'בחירת שיטת חיבור' ואז על 'חיבור האפליקציה'.

מעתיקים את מחרוזת החיבור שמוצגת ומחליפים את הסיסמה בסיסמה שלכם. נשתמש במחרוזת הזו כדי להתחבר למסד הנתונים שלנו בקטעים הבאים

4. הגדרת פרויקט Cloud Run

קודם נכנסים ל-Cloud Console, יוצרים פרויקט חדש או משתמשים בפרויקט קיים.
זוכרים את מזהה הפרויקט של הפרויקט שיצרתם
בתמונה שלמטה מוצג דף הפרויקט החדש, שבו אפשר לראות את מזהה הפרויקט בזמן שיוצרים אותו

לאחר מכן, מפעילים את Cloud Run API מ-Cloud Shell:
מפעילים את Cloud Shell מ-Cloud Console. פשוט לוחצים על Activate Cloud Shell (הפעלת Cloud Shell)
אחרי שמתחברים ל-Cloud Shell, אמור להופיע אימות שכבר בוצע ושהפרויקט כבר הוגדר לפי מזהה הפרויקט. אם מסיבה כלשהי הפרויקט לא מוגדר, פשוט מריצים את הפקודה הבאה:

gcloud config set project PROJECT_ID

משתמשים בפקודה הבאה:

gcloud services enable run.googleapis.com

נשתמש ב-Cloud Shell וב-Cloud Shell Editor להפניות לקוד. כדי לגשת ל-Cloud Shell Editor, לוחצים על Open Editor (פתיחת העורך) בטרמינל של Cloud Shell:

5. שכפול פרויקט MEAN Stack

נפרוס אפליקציית אינטרנט לניהול עובדים. ה-API בארכיטקטורת REST מבוסס על Express ו-Node.js, ממשק האינטרנט מבוסס על Angular והנתונים מאוחסנים במופע MongoDB Atlas שיצרנו קודם.
משכפלים את מאגר הפרויקט על ידי הפעלת הפקודה הבאה בטרמינל של Cloud Shell:

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

6. פריסת ה-API בארכיטקטורת REST של Express ו-Node.js

קובץ תצורה של Docker

קודם נפרס שירות Cloud Run עבור Express API בארכיטקטורת REST. הקובץ הכי חשוב לפריסה שלנו הוא קובץ התצורה של 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

בקטע Build environment (סביבת Build), בוחרים באפשרות Cloud Build.
לבסוף, בקטע Build Settings (הגדרות בנייה), בוחרים באפשרויות הבאות:
Builder: Docker
‫Docker: mean-stack-example/server/Dockerfile
לוחצים על הלחצן Deploy (פריסה) ואז על Show Detailed Logs (הצגת יומנים מפורטים) כדי לעקוב אחרי הפריסה של שירות Cloud Run הראשון.
אחרי שה-build יסתיים, כתובת ה-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 של ה-API בארכיטקטורת REST כדי שאפליקציית הלקוח תוכל לשלוח אליו בקשות. מכיוון שאנחנו משתמשים בכתובת ה-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 (מנוהלת במלואה)
אימות: אפשר להשתמש בגישה לא מאומתת
בקטע Build environment (סביבת Build), בוחרים באפשרות Cloud Build.
לבסוף, בקטע Build Settings (הגדרות בנייה), בוחרים באפשרויות הבאות:
Builder: Docker
‫Docker: mean-stack-example/client/Dockerfile
לוחצים שוב על לחצן הפריסה וצופים ביומנים בזמן שהאפליקציה נשלחת לענן. אחרי שהפריסה תסתיים, כתובת ה-URL של אפליקציית הלקוח תוצג.

פותחים את כתובת ה-URL ומשחקים עם האפליקציה.

8. הסרת המשאבים

כדי לא לצבור חיובים לחשבון Google Cloud על המשאבים שבהם השתמשתם במאמר הזה, אתם צריכים לפעול לפי השלבים הבאים.

סיום של מופעי MongoDB

עוברים אל אשכולות MongoDB Instance
בוחרים את האשכול או את המופע שיצרתם.
לוחצים על סמל האפשרויות הנוספות לצד שם האשכול ובוחרים באפשרות 'סיום' מהרשימה.

מחיקת הפריסות של Cloud Run

נכנסים אל הדף Cloud Run במסוף Google Cloud.
בוחרים את שירות Cloud Run שרוצים למחוק.
לוחצים על סמל המחיקה בחלק העליון של המסוף.

9. מזל טוב

סיימתם ליצור אפליקציית אינטרנט MEAN Stack ב-Cloud Run.

אפליקציית מקבץ MEAN ללא שרת (serverless) ב-MongoDB Atlas ו-Cloud Run קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.