تطبيق MEAN Stack بدون خادم على MongoDB Atlas وCloud Run

1. مقدمة

في هذه المشاركة، سنتعرّف على كيفية عمل Cloud Run وMongoDB معًا لتوفير تجربة تطوير تطبيقات MEAN stack بدون خادم تمامًا. سنتعرّف على كيفية إنشاء تطبيق MEAN بدون خادم باستخدام Cloud Run وMongoDB Atlas، وهي منصة بيانات التطبيقات المتعددة السحابات من MongoDB.

ما هي خدمة Cloud Run؟

تتيح لك خدمة Cloud Run إنشاء تطبيقات قابلة للتوسيع ومحفوظة في حاويات ومكتوبة بأي لغة (بما في ذلك Go وPython وJava وNode.js و‎.NET وRuby) ونشرها على نظام أساسي مُدار بالكامل. يتميّز Cloud Run عن غيره من خلال إتاحة ما يلي:

تضمين رمز الحزمة في حاويات متعددة بدون حالة تتوافق مع الطلبات وتستدعيها من خلال طلبات HTTP
يتم تحصيل الرسوم منك مقابل الموارد التي تستخدمها فقط
يمكنك استخدام أي لغة برمجة أو أي مكتبة لنظام التشغيل من اختيارك أو أي ملف ثنائي

يمكنك الاطّلاع على هذا الرابط لمعرفة المزيد من الميزات في السياق الكامل.

قاعدة بيانات بدون خادم باستخدام MongoDB Atlas

أطلقت MongoDB مثيلات بدون خادم، وهي عملية نشر جديدة لقاعدة بيانات مُدارة بالكامل وبدون خادم في Atlas لحلّ هذه المشكلة. باستخدام المثيلات بدون خادم، لن تحتاج إلى التفكير في البنية الأساسية، بل يمكنك ببساطة نشر قاعدة البيانات وسيتم توسيع نطاقها أو تقليله بسلاسة استنادًا إلى الطلب، بدون الحاجة إلى إدارة عملية. والأفضل من ذلك، لن يتم تحصيل رسوم منك إلا مقابل العمليات التي تنفّذها. لجعل بنيتنا الأساسية بدون خادم حقًا، سنجمع بين إمكانات Cloud Run وMongoDB Atlas.

MEAN Stack

حزمة MEAN هي حزمة تكنولوجية لإنشاء تطبيقات ويب كاملة باستخدام JavaScript وJSON فقط. تتألف حزمة MEAN من أربعة مكوّنات رئيسية: MongoDB وExpress وAngular وNode.js.

تتولّى خدمة MongoDB مسؤولية تخزين البيانات.
Express.js هو إطار عمل لتطبيقات الويب يستند إلى Node.js ويُستخدَم لإنشاء واجهات برمجة التطبيقات.
‫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

بعد الاشتراك، انقر على الزر "إنشاء قاعدة بيانات" لإنشاء مثيل جديد بدون خادم. اختَر الإعدادات التالية:

بعد توفير مثيل بلا خادم، من المفترض أن يظهر لك وهو يعمل

انقر على الزر "ربط" لإضافة عنوان IP للربط ومستخدم قاعدة بيانات
في هذا الدرس التطبيقي، سنستخدم الإعداد "السماح بالوصول من أي مكان". تتضمّن خدمة MongoDB Atlas مجموعة من ميزات الأمان والوصول. يمكنك الاطّلاع على مزيد من المعلومات عنها في مقالة مستندات ميزات الأمان
استخدِم بيانات الاعتماد التي تختارها لاسم المستخدم وكلمة المرور لقاعدة البيانات. بعد إكمال هذه الخطوات، من المفترض أن يظهر لك ما يلي:

تابِع بالنقر على الزر "اختيار طريقة ربط" ثم اختَر "ربط تطبيقك".

انسخ سلسلة الاتصال التي تظهر لك واستبدِل كلمة المرور بكلمة المرور الخاصة بك. سنستخدم هذه السلسلة للاتصال بقاعدة البيانات في الأقسام التالية

4. إعداد مشروع Cloud Run

أولاً، سجِّل الدخول إلى Cloud Console، وأنشِئ مشروعًا جديدًا أو أعِد استخدام مشروع حالي.
تذكَّر رقم تعريف المشروع الذي أنشأته
في ما يلي صورة تعرض صفحة المشروع الجديدة، حيث يمكنك الاطّلاع على رقم تعريف مشروعك أثناء إنشائه

بعد ذلك، فعِّل Cloud Run API من Cloud Shell:
فعِّل Cloud Shell من Cloud Console. ما عليك سوى النقر على "تفعيل Cloud Shell".
بعد الاتصال بـ Cloud Shell، من المفترض أن تلاحظ أنّه تم إثبات هويتك وأنّ المشروع تم ضبطه مسبقًا على PROJECT ID. إذا لم يتم ضبط المشروع لسبب ما، ما عليك سوى تنفيذ الأمر التالي:

gcloud config set project PROJECT_ID

استخدِم الأمر التالي:

gcloud services enable run.googleapis.com

سنستخدم Cloud Shell وCloud Shell Editor للإشارة إلى الرموز. للوصول إلى Cloud Shell Editor، انقر على فتح Editor من Cloud Shell Terminal:

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 المستندة إلى Express وNode.js

ملف إعداد Docker

أولاً، سننشر خدمة Cloud Run لواجهة برمجة التطبيقات Express 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

بالنسبة إلى بيئة الإنشاء، اختَر 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، نثبّت العناصر التابعة لـ Node.js وننشئ المشروع. بعد ذلك، ننسخ الملفات التي تم إنشاؤها إلى الحاوية، ونضبط إعداداتها، ونبدأ خدمة Nginx.
أخيرًا، علينا ضبط عنوان URL لواجهة REST API لكي يتمكّن تطبيق العميل من إرسال طلبات إليها. بما أنّنا نستخدم عنوان 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 Stack على Cloud Run.

تطبيق MEAN Stack بدون خادم على MongoDB Atlas وCloud Run تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.