كيفية إنشاء تطبيق ويب بدون خادم على أمازون AWS

أصبح إنشاء تطبيق ويب بدون خادم أحد أكثر الممارسات المعتمدة في مجال الهندسة السحابية، لكونها تزيد المرونة وقابلية التوسع والكفاءة للتطبيقات التي تواجه العملاء وغيرها من أعباء العمل. إذ يقوم الموفر السحابي بما في ذلك: AWS، بإنشاء وإدارة الخوادم بأنفسهم، مما يسمح بالتركيز على الكود البرمجي. نستعرض أدناه خطوات إنشاء تطبيق ويب.

خطوات إنشاء تطبيق ويب بدون خادم تكوين استضافة

تستطيع إنشاء تطبيق ويب بدون خادم باستخدام خدمات AWS مع بعضها، إذ تتم إدارة كل خدمة افتراضياً بشكل كامل. إذ ترسل البيانات وتستقبلها من واجهة برمجة التطبيقات العامة في الخلفية المصمّمة باستخدام Lambda وAPI Gateway. 

يدار محتوى الويب الثابت بشكل كامل بما يتضمن: HTML وCSS وJavaScript والصور والملفات بواسطة وحدة تحكم AWS Amplify. بحيث يستطيع المستخدمون النهائيون بعدها الوصول إلى موقعك باستخدام عنوان URL العام لموقع الويب الذي تعرضه وحدة تحكم AWS Amplify.

لا تحتاج تشغيل خوادم ويب أو استخدام خدمات أخرى لإتاحة موقعك. تستطيع استخدام نطاق مخصص لاستضافة موقعك باتباع الخطوات التالية:

1. تحديد المنطقة

يمكن نشر تطبيق الويب في أي منطقة AWS تدعم الخدمات المستخدمة فيه بما يتضمن: AWS Amplify وAWS CodeCommit وAmazon Cognito وAWS Lambda وAmazon API Gateway وAmazon DynamoDB. 

اختر المنطقة من القائمة المنسدلة:

• شرق الولايات المتحدة (شمال فرجينيا).
• شرق الولايات المتحدة (أوهايو).
• غرب الولايات المتحدة (أوريغون).
• الاتحاد الأوروبي (فرانكفورت).
• الاتحاد الأوروبي (أيرلندا).
• الاتحاد الأوروبي (لندن).
• آسيا والمحيط الهادئ (طوكيو).
• آسيا والمحيط الهادئ (سيول).
• آسيا والمحيط الهادئ (سيدني).
• آسيا والمحيط الهادئ (مومباي).

2. إنشاء مستودع Git

يوجد خياران لإدارة التعليمات البرمجية المصدر: AWS CodeCommit المضمن في طبقة AWS المجانية أو GitHub. إذا لم تكون AWS CLI على جهازك المحلي، ثم اتبع الخطوات التالية: 

• افتح نافذة طرفية لتثبيت AWS CLI.
• افتح وحدة تحكم AWS CodeCommit.
• اختر إنشاء مستودع.
• أدخل Wildrydes-site للحصول على اسم المستودع.
• اختر إنشاء.
• أعدد مستخدم IAM باستخدام بيانات اعتماد Git في وحدة تحكم IAM.
• أعد الخطوات من 1 حتى 3 في صفحة الإعداد لمستخدمي HTTPS باستخدام صفحة بيانات اعتماد Git في دليل مستخدم AWS CodeCommit.
• فعند إعداد المستخدم في وحدة تحكم IAM، تحتاج إعداد مجموعتين من بيانات الاعتماد وحفظهما للرجوع إليهما: أولاً، عليك إنشاء مفاتيح الوصول في تبويبة IAM > بيانات اعتماد الأمان.
• ثم نزّل معرفات مفتاح الوصول ومفتاح الوصول السري أو انسخها واحفظها في مكان آمن.
• أنشئ بيانات اعتماد HTTPS Git لـ AWS CodeCommit. نزّل أو احفظ بيانات الاعتماد التي أنشئتها.
• في النّافذة الطرفية التي استخدمتها لتثبيت AWS CLI، أدخل الأمر: awsconfig
• أدخل معرف مفتاح وصول AWS ومفتاح الوصول السري الذي أنشئته سابقاً، أدخل المنطقة التي حددتها لإنشاء مستودع CodeCommit. اترك تنسيق الإخراج الافتراضي فارغًا، ثم اضغط على زر الإدخال.
• أعدد مساعد بيانات اعتماد git config في النافذة الطرفية.
• انتقل إلى وحدة تحكم AWS CodeCommit ثانية وحدد مستودع موقع Wildrydes.
• حدد Clone HTTPS من القائمة المنسدلة Clone URL لنسخ عنوان URL HTTPS.
• من Terminal شغل git clone وألصق عنوان URL HTTPS للمستودع.

3. تهيئة مستودع git

عند استخدام AWS CodeCommit أو GitHub.com لإنشاء مستودع git واستنساخه محليًا، عليك نسخ محتوى موقع الويب من حاوية S3 موجودة، ثم اتبع الخطوات التالية:

• غير الدليل إلى المستودع وانسخ الملفات الثابتة من S3.
• تمكين استضافة الويب باستخدام وحدة تحكم AWS Amplify
• في صفحة البدء مع Amplify Hosting، حدد AWS CodeCommit ثم اختر متابعة.
• في خطوة إضافة فرع مستودع، حدّد موقع Wildrydes من القائمة المنسدلة تحديد مستودع.
• إذا كنت تستخدم GitHub، ستحتاج ترخيص AWS Amplify لحساب GitHub.
• في القائمة المنسدلة “branch”، حدد خيار “الرئيسي” واختر “التالي”.
• اترك جميع الإعدادات الافتراضية، وحدد خيار السماح لـ AWS Amplify بنشر جميع الملفات المستضافة في الدليل الجذر لمشروعك تلقائيًا، ثم اضغط على التالي.
• حدد خيار حفظ ونشر من صفحة المراجعة.
• انتظر قليلاً حتى تنشيء Amplify Console الموارد اللازمة ونشر التعليمات البرمجية.
• حدّد صورة الموقع، أو الرابط الموجود أسفل الصورة المصغرة لبدء تشغيل موقع Wild Rydes. فلو حددت الرابط الرئيسي، سترى تفاصيل الإنشاء والنشر المتعلقة بفرعك.

4. تعديل موقعك

• تعيد وحدة التحكم AWS Amplify بناء التطبيق ونشره عندما تكتشف تغييرات في المستودع المتصل، أجر تغيير على الصفحة الرئيسية لاختبار تلك العملية.
• على جهازك المحلي، انتقل إلى المجلد Wildrydes-site وافتح الملف Index.html في محرر النصوص الذي تختاره.
• عدّل سطر العنوان بالنص التالي: <title>Wild Rydes – Rydes of the Future!</title>
• في Terminal أضف التغيير ثم ادفعه إلى مستودع git ثانية. فتبدأ Amplify Console بإنشاء الموقع ثانية بعد وقت قصير من ملاحظة التحديث في المستودع. 
• بعد انتهاء Amplify من إعادة النشر، أعد فتح موقع Wild Rydes ولاحظ تغيير عنوان التبويبة.

إنشاء تطبيق ويب بدون خادم: مصادقة المستخدمين

يوفر Amazon Cognito طريقتين لمصادقة المستخدمين، بحيث تستطيع استخدام مجموعات مستخدمي Cognito لإضافة وظائف الاشتراك وتسجيل الدخول إلى التطبيق أو استخدام مجموعات هوية Cognito لمصادقة المستخدمين من خلال موفري الهوية الاجتماعية ك Facebook أو Twitter أو Amazon، مع حلول هوية SAML، أو عبر حلول الهوية.

في وحدة تحكم Amazon Cognito، اختر إنشاء مجموعة مستخدمين، ثم اتبع الخطوات التالية:

• من صفحة تكوين تجربة تسجيل الدخول، قسم خيارات تسجيل الدخول إلى مجمع مستخدمي Cognito، حدد اسم المستخدم.
• احتفظ بالإعدادات الافتراضية للإعدادات الأخرى كأنواع الموفرين، ولا تحدد أي تحديدات لمتطلبات اسم المستخدم، ثم اضغط على التالي.
• في صفحة تكوين متطلبات الأمان، احتفظ بوضع سياسة كلمة المرور كإعدادات Cognito الافتراضية.
• هنا تستطيع اختيار تكوين المصادقة متعددة العوامل (MFA) أو اختيار عدم وجود MFA والاحتفاظ بالتكوينات الأخرى كإعداد افتراضي، ثم اضغط على التالي.
• في صفحة تكوين تجربة الاشتراك، احتفظ بكل شيء كإعداد افتراضي، ثم اضغط التالي.
• بعد ذلك، من صفحة تكوين تسليم الرسائل، بالنسبة لموفر البريد الإلكتروني، تأكد من تحديد إرسال بريد إلكتروني باستخدام Amazon SES – موصى به.
• في حقل عنوان البريد الإلكتروني، حدد العنوان الذي تحققت منه باستخدام Amazon SES، ثم اتبع تعليمات التحقق من هوية عنوان البريد الإلكتروني في دليل مطور Amazon Simple Email Service.
• من صفحة دمج تطبيقك، سمي مجموعة المستخدمين: WildRydes. ضمن عميل التطبيق الأولي، سمي عميل التطبيق: WildRydesWebApp واحتفظ بالإعدادات الأخرى كإعداد افتراضي.
• من صفحة المراجعة والإنشاء، اختر إنشاء مجمع مستخدمين.
• الآن من صفحة مجمعات المستخدمين، حدد اسم مجمع المستخدمين لعرض معلومات تفصيلية حول مجمع المستخدمين الذي أنشأته.
• انسخ معرف مجمع المستخدمين في قسم نظرة عامة على مجمع المستخدمين واحفظه في مكان آمن على جهازك المحلي.
• حدد تبويبة تكامل التطبيق وانسخ واحفظ معرف العميل في قسم عملاء التطبيق والتحليلات في مجموعة المستخدمين التي حديثًا.

1. تحديث الملف

يحتوي الملف js/config.js على إعدادات معرف مجمع المستخدمين ومعرف عميل التطبيق والمنطقة. حدّث هذا الملف بالإعدادات من مجمع المستخدمين والتطبيق الذي أنشئته وحمّل الملف إلى مجموعتك ثانية. ثم اتبع الخطوات التالية:

• من جهازك المحلي، افتح الملف wildryde-site/js/config.js في محرر النصوص الذي تختاره.
• حدّث القسم المتخفي من الملف بالقيم الصحيحة لمعرف مجمع المستخدمين ومعرف عميل التطبيق. يعد userPoolID هو معرف مجمع المستخدمين من قسم النظرة العامة على مجمع المستخدمين، وuserPoolClientID هو معرف عميل التطبيق من قسم تكامل التطبيقات وعملاء التطبيق والتحليلات في Amazon Cognito.
• إذ يجب أن تكون قيمة المنطقة هي رمز منطقة AWS حيث قمت بإنشاء مجمع المستخدمين الخاص بك.
• على سبيل المثال، us-east-1 لمنطقة شمال فيرجينيا، أو us-west-2 لمنطقة أوريغون.  إذا لم تكن متأكدًا من الرمز الذي تريد استخدامه، فيمكنك الاطلاع على قيمة Pool ARN في نظرة عامة على مجمع المستخدمين.  رمز المنطقة هو جزء من ARN مباشرة بعد arn:aws:cognito-idp ويجب أن يبدو ملف config.js المحدث كالرمز:

2. تأكيد الملف

• من نافذة Finder أو Windows File Explorer، انتقل إلى مجلد موقع Wildrydes الذي نسخته إلى جهازك المحلي.
• افتح /register.html، أو اختر Giddy Up!  على (صفحة index.html) لموقعك.
• أكمل نموذج التسجيل واختر Let’s Ryde.  تستطيع استخدام البريد الإلكتروني أو إدخال بريد إلكتروني وهمي. تأكد من اختيار كلمة مرور تحتوي حرف كبير واحد ورقم وحرف خاص على الأقل.
• أكّد المستخدم الجديد باستخدام إحدى الطريقتين التاليتين:
• إذا استخدمت عنوان بريد إلكتروني تتحكم فيه، تستطيع إكمال عملية التحقق من الحساب بزيارة /verify.html ضمن نطاق موقع الويب وإدخال رمز التحقق الذي أرسلَ إليك عبر البريد الإلكتروني. بالنسبة لعمليات النشر الحقيقية، نوصي بتكوين مجمع المستخدمين الخاص بك لاستخدام Amazon Simple Email Service لإرسال رسائل البريد الإلكتروني من نطاق تملكه.
• أما إذا استخدمت عنوان وهميًا، عليك تأكيد المستخدم يدويًا عبر وحدة تحكم Cognito. في وحدة تحكم Amazon Cognito، حدد مجموعة مستخدمي WildRydes. ثمّ من تبويبة “المستخدمون”، ترى مستخدمًا يتوافق مع عنوان البريد الإلكتروني الذي أرسلته عبر صفحة التسجيل. اختر اسم المستخدم هذا لعرض صفحة تفاصيل المستخدم.
• من القائمة المنسدلة “الإجراءات”، حدد خيار “تأكيد الحساب” لإنهاء عملية إنشاء الحساب.
• ثم من النافذة المنبثقة تأكيد الحساب للمستخدم، اختر تأكيد.
• بعد تأكيد المستخدم الجديد باستخدام إما صفحة /verify.html أو وحدة تحكم Cognito، تفضل بزيارة /signin.html وتسجيل الدخول باستخدام عنوان البريد الإلكتروني وكلمة المرور اللذين أدخلتهما أثناء خطوة التسجيل.
• فلو نجحت، سيعاد توجيهك إلى /ride.html، فترى إشعارًا بأن واجهة برمجة التطبيقات (API) لم يتم تكوينها.

إنشاء الواجهة الخلفية للخدمة بدون خادم

 تستخدم AWS Lambda وAmazon DynamoDB لإنشاء عملية خلفية للتعامل مع طلبات تطبيق الويب. لتلبية ذلك يلزمك جافا سكريبت الذي يعمل في المتصفح لاستدعاء خدمة تعمل في السحابة.

إذ تنفذ وظيفة Lambda التي يتم استدعاؤها، لتقوم الوظيفة باختيار المستخدم وتسجيل الطلب في جدول DynamoDB، ثم الرد على تطبيق الواجهة الأمامية بتفاصيل حول الذي يتم إرساله.

تستدعى الوظيفة من المتصفح باستخدام Amazon API Gateway، لينفذ الاتصال باختبار وظيفتك بشكل منفصل، يمكنكم التعرف كذلك على طرق إنشاء تطبيق ويب للمحادثات.

1. إنشاء جدول Amazon DynamoDB

تستطيع استخدام وحدة تحكم Amazon DynamoDB لإنشاء جدول جديد باتباع الخطوات التالية:

• من وحدة تحكم Amazon DynamoDB، اضغط على خيار إنشاء جدول.
• بالنسبة لاسم الجدول، أدخل الرحلات فهو حساس لحالة الأحرف. أما بالنسبة لمفتاح القسم، أدخل RideId واختر String لنوع المفتاح.
• ثم من قسم إعدادات الجدول، تأكد من تحديد الإعدادات الافتراضية، ثم اضغط على خيار “إنشاء جدول”.
• من صفحة الجداول، انتظر حتى يكتمل إنشاء الجدول، فتظهر الحالة “نشط”، ثمّ حدد اسم الجدول.
• الآن من تبويبة نظرة عامة، قسم المعلومات العامة في جدولك الجديد، اختر معلومات إضافية.
• انسخ ملف ARN.

2. إنشاء دور IAM لوظيفة Lambda

تحتوي كل وظيفة Lambda على دور IAM، يحدد خدمات AWS الأخرى التي يُسمح للوظيفة بالتفاعل معها. هنا تحتاج إنشاء دور IAM يمنح وظيفة Lambda الإذن بكتابة السجلات إلى Amazon CloudWatch Logs والوصول لكتابة العناصر إلى جدول DynamoDB. لفعل ذلك اتبع الخطوات التالية:

• من وحدة تحكم IAM، حدد الأدوار في جزء التنقل الأيمن، ثم اختر إنشاء دور.
• من قسم نوع الكيان الموثوق به، حدد خدمة AWS.  بالنسبة لحالة الاستخدام، حدد Lambda، ثم اختر التالي.
• أدخل AWSLambdaBasicExecutionRole في مربع نص الفلتر ثم اضغط على Enter.
• حدد مربع الاختيار بجوار اسم سياسة AWSLambdaBasicExecutionRole ثم اختر التالي.
• أدخل WildRydesLambda لاسم الدور، واحتفظ بالإعدادات الافتراضية للمعلمات الأخرى.
• اختر إنشاء دور، ومن مربع التصفية اكتب WildRydesLambda وحدد اسم الدور الذي أنشأته.
• من تبويبات الأذونات، ضمن إضافة أذونات، اختر إنشاء سياسة مضمنة.
• ثم من قسم تحديد خدمة، اكتب DynamoDB في شريط البحث، ثم حدد خيار DynamoDB.
• اختر تحديد الإجراءات، ثم اكتب PutItem في شريط البحث وحدد مربع الاختيار بجوار PutItem عندما يظهر.
• في قسم الموارد، مع تحديد الخيار محدد، اختر الرابط إضافة ARN.
• حدد تبويبة “النص”، الصق ARN الخاص بالجدول الذي أنشأته في DynamoDB، واختر إضافة ARNs، ثم التالي.
• أدخل DynamoDBWriteAccess لاسم السياسة واختر إنشاء سياسة.

3. إنشاء وظيفة Lambda لمعالجة الطلبات

تشغل AWS Lambda التعليمات البرمجية استجابة لأحداث مثل طلب HTTP، لذا يجب غنشاء الوظيفة الأساسية التي ستقوم بمعالجة طلبات (API) من تطبيق الويب لإرسال.يمكن استخدام Amazon API Gateway.

لإنشاء واجهة برمجة تطبيقات RESTful التي ستعرض نقطة نهاية HTTP التي يمكن استدعاؤها من متصفحات المستخدمين لديك. إذ تقوم بتوصيل وظيفة Lambda التي أنشئتها بواجهة برمجة التطبيقات تلك لإنشاء واجهة خلفية كاملة الوظائف لتطبيق الويب. لفعل ذلك اتبع الخطوات التالية:

• تأكد من تكوين وظيفتك لاستخدام دور WildRydesLambda IAM الذي أنشئته.
• من وحدة تحكم AWS Lambda، اختر إنشاء وظيفة.
• احتفظ بالمؤلف الافتراضي من بطاقة الصفر المحددة.
• أدخل RequestUnicorn في حقل اسم الوظيفة.
• حدد Node.js 16.x لوقت التشغيل.
• حدد استخدام دور موجود من القائمة المنسدلة تغيير دور التنفيذ الافتراضي.
• حدد WildRydesLambda من القائمة المنسدلة للدور الحالي، واضغط على إنشاء وظيفة.
• مرر نحو الأسفل إلى قسم مصدر الكود واستبدل الكود الموجود في محرر الكود Index.js بمحتويات requestUnicorn.js.  انسخ هذا الرمز وألصقه في علامة التبويب Index.js بمحرر التعليمات البرمجية.
• ثم اضغط نشر.

4. اختبار الوظيفة

لاختبار الوظيفة التي أنشأتها باستخدام وحدة تحكم AWS Lambda،  ستضيف واجهة REST API مع بوابة API بحيث تستطيع استدعاء وظيفتك من التطبيق المتصفح الذي نشرته بداية.

• في وظيفة RequestUnicorn التي أنشأتها، اختر اختبار في قسم مصدر التعليمات البرمجية، وحدد تكوين حدث اختبار من القائمة المنسدلة.
• احتفظ بالاختيار الافتراضي لإنشاء حدث جديد.
• أدخل TestRequestEvent في حقل اسم الحدث.
• انسخ الكود التالي وألصقه في قسم Event JSON:
• اختر حفظ.
• من قسم مصدر الكود في وظيفتك، اختر اختبار وحدد TestRequestEvent من القائمة المنسدلة.
• في وظيفة التنفيذ: الرسالة الناجحة التي تظهر، وسع القائمة المنسدلة.