تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

1. مقدمة

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

ما المقصود بـ Cloud Run؟

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

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

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

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

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

حزمة MEAN

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

MongoDB هو المسؤول عن تخزين البيانات.
Express.js هو إطار عمل لتطبيق الويب Node.js لإنشاء واجهات برمجة التطبيقات.
Angular هو نظام أساسي للغة JavaScript من جهة العميل.
Node.js هي بيئة وقت تشغيل JavaScript من جهة الخادم. يستخدم الخادم برنامج تشغيل MongoDB Node.js للاتصال بقاعدة البيانات واسترداد البيانات وتخزينها.

ما الذي ستقوم ببنائه

ستكتب تطبيق Employee-Job Role المكدّس بشكل كامل في MongoDB و Express JS وAngular JS وNode JS. ويشتمل على ما يلي:

تطبيق خادم في Node JS و Express JS، مرفق
إصدار تطبيق عميل في AngularJS، في حاوية
تم نشر كلا التطبيقين في Cloud Run
يتصل تطبيق الخادم بمثيل MongoDB بدون خادم باستخدام برنامج تشغيل MongoDB NodeJS
واجهة برمجة تطبيقات الخادم تنفّذ تفاعلات القراءة والكتابة مع قاعدة البيانات
تطبيق العميل هو واجهة المستخدم لتطبيق الدور الوظيفي/الموظف

ما ستتعرَّف عليه

كيفية إنشاء مثيلات 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 للاتصال ومستخدم قاعدة البيانات
في هذا الدرس التطبيقي حول الترميز، سنستخدم إذن "السماح بالوصول من أي مكان". الإعداد. يأتي 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 لمراجع الرموز البرمجية. للوصول إلى محرِّر Cloud Shell، انقر على Open Editor (فتح المحرر) من Cloud Shell Terminal:

5- مشروع Clone MEAN Stack

سوف ننشر تطبيق ويب لإدارة الموظفين. وقد تم إنشاء واجهة برمجة التطبيقات REST باستخدام Express وNode.js. واجهة الويب باستخدام Angular وسيتم تخزين البيانات في مثيل MongoDB Atlas الذي أنشأناه سابقًا
استنسِخ مستودع المشروع من خلال تنفيذ الأمر التالي في Cloud Shell Terminal:

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

6- نشر واجهة برمجة تطبيقات Express وNode.js REST

ملف إعداد 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 في الشريط الجانبي الأيمن:

ثم انقر على أيقونة "النشر إلى تشغيل السحابة":

املأ إعدادات الخدمة على النحو التالي:
اسم الخدمة: Node-express-api
منصة النشر: تشغيل السحابة الإلكترونية (مُدارة بالكامل)
المنطقة: اختَر منطقة قريبة من منطقة قاعدة البيانات لتقليل وقت الاستجابة.
المصادقة: السماح بالاستدعاءات التي لم تتم مصادقتها
ضمن "إعدادات المراجعة"، انقر على "عرض الإعدادات المتقدمة" لتوسيعها:
منفذ الحاوية: 5200
متغيرات البيئة. أضف زوج المفتاح/القيمة التالي وتأكد من إضافة سلسلة الاتصال لنشر MongoDB Atlas:

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

بالنسبة إلى بيئة Build، اختَر Cloud Build.
أخيرًا، في قسم Build Settings، حدد:
البنّاء: Docker
Docker: mean-stack-example/server/Dockerfile
انقر على الزر "نشر" ثم على "عرض السجلات التفصيلية" لمتابعة عملية نشر أول خدمة تشغيل في السحابة الإلكترونية.
بعد اكتمال عملية الإنشاء، من المفترض أن يظهر لك عنوان URL للخدمة المنشورة:

افتح عنوان URL وألحق " /employees" (/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
منصة النشر: تشغيل السحابة الإلكترونية (مُدارة بالكامل)
المصادقة: السماح بالاستدعاءات التي لم تتم مصادقتها
بالنسبة إلى بيئة Build، اختَر Cloud Build.
أخيرًا، في قسم Build Settings، حدد:
البنّاء: Docker
Docker: mean-stack-example/client/Dockerfile
انقر على زر "النشر" مرة أخرى وشاهد السجلات بينما يتم شحن تطبيقك إلى السحابة. عند اكتمال النشر، من المفترض أن يظهر لك عنوان URL لتطبيق العميل.

افتح عنوان URL وابدأ تشغيل التطبيق.

8. تَنظيم

لتجنُّب تحصيل رسوم من حسابك على Google Cloud مقابل الموارد المستخدَمة في هذه المشاركة، يُرجى اتّباع الخطوات التالية.

إنهاء مثيلات MongoDB

الانتقال إلى مجموعات MongoDB Instance
اختَر المجموعة المثيلة التي أنشأتها
انقر على علامات الحذف بجانب اسم المجموعة واختَر "إنهاء" من القائمة.

حذف عمليات نشر السحابة الإلكترونية

انتقِل إلى صفحة تشغيل السحابة الإلكترونية في Google Cloud Console
اختيار خدمة Cloud Run التي تريد حذفها
انقر فوق أيقونة الحذف أعلى وحدة التحكم

9. تهانينا

تهانينا، لقد أنشأت بنجاح تطبيق MEAN Stack Web على Cloud Run.