= استضافة تطبيق React الخاص بك مع AWS في 30 دقيقة =
هذا البرنامج التعليمي ثقيل جدًا بالصور ويستهدف المبتدئين تمامًا. يشرح كيف يمكنك استضافة تطبيق React الخاص بك على موقع ويب بنظام ترخيص كامل. يستدعي قوة AWS MobileHub من خلال Mobilehub CLI (واجهة سطر الأوامر). لا يتطلب البرنامج التعليمي أي مهارات مع خدمات AWS وسيوضح لك أيضًا إعداد تطبيق React المعياري.
إذا كان لديك بالفعل تطبيق React ،
** يمكنك التخطي إلى القسم 2 حيث نقوم بتثبيت awsmobile-cli وإضافته إلى تطبيقنا
= قبل أن نبدأ ، نحتاج إلى إعداد بعض الأشياء على جهاز الكمبيوتر الخاص بك =
** تم تثبيت بيئة Node 8.x على جهاز الكمبيوتر الخاص بك **
- هذه هي بيئة وقت التشغيل لخوادم تطبيق Javascript. يتبع ذلك مع مدير حزمة العقدة (NPM).
- يتم استخدام NPM لتثبيت حزم العقدة مثل React و AWS Amplify وحزمة موصل AWS-JS وهذا أساسًا هو.
- httpsnodejs.org/en/download/
** حساب AWS Free Tier
- تحصل على وصول مجاني إلى خدمات AWS من خلال الطبقة المجانية. بالنسبة لهذا البرنامج التعليمي ، يجب أن يكون هذا أكثر من كافٍ. ومع ذلك ، ضع في اعتبارك أن لكل خدمة حدًا للاستخدام كل شهر وقد يكلفك ذلك أموالًا حقيقية.
- httpsaws.amazon.com/free/
** قم بتثبيت AWS CLI (واجهة سطر الأوامر) للاتصال بخدمات AWS مباشرةً من وحدة التحكم الخاصة بك ** ** بالنسبة لهذه الدورة التدريبية ، سنستخدم النموذج المعياري الذي تم الحفاظ عليه من Facebook ، ومنشئو React ** محرر من اختيارك
- أقترح البدء باستخدام Visual Studio Code ، وهو محرر خفيف الوزن قابل للتعديل بدرجة كبيرة ويمكنه تشغيل معظم لغات وأطر البرمجة.
نصيحة احترافية: في عملية تثبيت VS Code ، تأكد من تحديد المربع الذي يضيفه إلى أسماء مسار البيئة الخاصة بك. يمنحك هذا الوصول إلى رمز VS المفتوح من الجهاز عن طريق كتابة à  ¢ à  à  code filename.jsà  ¢ à  à  أو à  ¢ à   code .à  ¢ à  à  للمشروع بأكمله الذي  ¢ à  à  re فيه.  مرتاح في
- يجب أن يكون لدى معظم المطورين Git مثبتة على أجهزة الكمبيوتر الخاصة بهم. يمنحك هذا الوصول إلى Git Bash وهي محطة يذهب إليها العديد من المطورين.
هيا نبدأ!
** 1. أنشئ تطبيق React وأدخل مجلد المشروع من خلال المحطة **
أدخل المحطة وحدد موقع المجلد الخاص بك حيث تخزن التطبيقات. أقترح مجلد باسم à  ¢ à  à  devà  ¢ à  à Â.
اسم مشروع إنشاء تطبيق npx&& اسم مشروع القرص المضغوط
أو
npm -g install create-reaction-app create-reaction-app project-name
هنا نقوم بإنشاء تطبيق React بناءً على النموذج المعياري. هي أداة عقدة تستخدم خادم npm للاتصال على الحزم البعيدة. يقوم مقتطف الكود الثاني بتثبيت تطبيق create-reaction-app محليًا باستخدام
* npm -g install create-react-app * ** ثم يقوم بإنشاء التطبيق. أقترح استخدام npx لتكون دائمًا على اطلاع دائم باستخدام create-reaction-app ثم إنشاء التطبيق. أقترح استخدام npx لتكون دائمًا على اطلاع دائم باستخدام تطبيق create-react-app. ** 2. قم بتثبيت awsmobile CLI على جهاز الكمبيوتر الخاص بك وتشغيله في المشروع **
من هذه النقطة ، يجب الانتباه إلى تطبيق React الخاص بك في محرر التعليمات البرمجية الخاص بك. ستكون هناك مجلدات مضافة مثل / awsmobile وبعض الإضافات إلى ملف package.json.
في نافذة طرفية ، اكتب
npm تثبيت g awsmobile- cli
لتثبيت awsmobile-cli عالميًا. سنستخدم هذا بعد القيام ببعض الأعمال في وحدة تحكم AWS Mobile Hub.
تأكد من أنك داخل مشروعك واكتب
الحرف الأول awsmobile
تتم مطالبتك بمجموعة من الأسئلة ، حيث تكون الإعدادات الافتراضية جيدة ، لذا اضغط على إدخال من خلال كل إعداد حتى يفتح تلقائيًا AWS في متصفحك الافتراضي. قم بتسجيل الدخول بحساب Free Tier الخاص بك إذا لم تقم بذلك بالفعل.
! [] (httpsmiro.medium.com/max/1360/1*fqDYITZ3T-JAVMf0TwH7-A.png)
هذا يؤكد لـ awsmobile-cli أننا Â Â ¢ Ã Â Ã Â متصلين بحساب AWS الصحيح. ارجع إلى جهازك الطرفي واضغط على Enter للمتابعة.
تحتاج AWS إلى إعداد مستخدم للتحكم في التطبيق. سيتم القيام بذلك تلقائيًا بواسطة awsmobile-cli عندما تستمر في الضغط على Enter.
! [] (httpsmiro.medium.com/max/1122/1*mUD3gl1bsrU03MKg4CZj9Q.png)
بعد الانتهاء من ذلك ، سيتم نقلك Â ¢ Ã Â Ã Â سوف يتم نقلك إلى AWS IAM حيث ستكون Â ¢ Ã Â Ã Â ¢ Ã Â Ã Â التاليÃ Â ¢ Ã Â Ã طريقك إلى الاكتمال! في الخطوة الثانية ، يجب أن تتحقق تلقائيًا من Ã Â ¢ Ã Â Ã Â وصول المسؤول Â ¢ Ã Â Ã الذي يمنح المستخدم الوصول إلى جميع ميزات AWS التي نحتاجها.
! [] (httpsmiro.medium.com/max/1400/1*clWJ77BP4-1LcgqmBVnVdQ.png)
عند الانتهاء ، من المهم جدًا أن تقوم بتنزيل ملف .csv ببيانات اعتمادك السرية حيث سيتم عرضها مرة واحدة فقط في AWS. سيتم استخدام هذه المفاتيح في الخطوات التالية من نافذة جهازك.
! [] (httpsmiro.medium.com/max/1400/1*eduJiN7QBTezz8y3vVrjkg.png)
! [] (httpsmiro.medium.com/max/1004/1*-gK1PXA0XNjFmWoOer8xgw.png)
يؤدي هذا إلى إنشاء تطبيق AWS MobileHub الخاص بك بنجاح وتثبيت aws-amplify تلقائيًا& aws-amplify-response في مشروع React المحلي الخاص بك
! [] (httpsmiro.medium.com/max/1224/1*z8xlOVoTSYNKvtOiPsyb1w.png)
عند الانتهاء من هذه العملية (حوالي دقيقة واحدة) ، يمكنك الكتابة
وحدة التحكم awsmobile
لرؤية تطبيق Mobile Hub في متصفحك الافتراضي. يمكنك أيضًا كتابة à  ¢ à  à  awsmobileà  ¢ à  à  لمشاهدة قائمة بالإجراءات المختلفة. من هنا ، سنضيف Cognito Login مع المتصفح ، ولكن يمكنك القيام بذلك من CLI المذهل.
** 3. إضافة Cognito Sign-in and Hosting **
بالنسبة للخطوة الأخيرة ، سنضيف AWS Cognito إلى مشروعنا من خلال AWS MobileHub Console. يمكنك أيضًا التحقق من الاستضافة التي تم تمكينها بالفعل افتراضيًا.
! [] (httpsmiro.medium.com/max/1400/1*qs_KoX4Qn4QXJfXqMCZ7tA.png)
لاختبار الاستضافة ، انقر فوق الميزة في وحدة التحكم الخاصة بك وانقر فوق عنوان URL الذي تم توفيره لك. المحتوى هنا عبارة عن قالب من AWS ، لكنك ستكتبه باستخدام تطبيق React قريبًا.
** لإضافة تسجيل دخول مستخدم Cognito ، قم بالتمرير لأسفل للعثور على à  ¢ à  à  تسجيل دخول المستخدم  ¢ à  à  وانقر فوقه. ** يتيح هذا لمستخدمي Cognito نظام مصادقة. استخدم à  ¢ à  à  Emailà  ¢ à  à  من عنوان البريد الإلكتروني أو رقم الهاتف لفرض البريد الإلكتروني كاسم مستخدم في تسجيل الدخول الخاص بك. أو يمكنك استخدام اسم المستخدم وتمكين à  ¢ à  à  Emailà  ¢ à  à  + à  ¢ à  à  اسم المستخدم  ¢ à  à  للسماح للمستخدم بالاختيار. سوف تتلقى رمز التأكيد عبر البريد الإلكتروني في كلتا الحالتين.
نحن نقبل البريد الإلكتروني لأن AWS لا تفرض رسومًا على إرسال رموز تأكيد التسجيل إلى البريد الإلكتروني ، في حين أن إرسال الرسائل القصيرة يكلف نقودًا حقيقية.
! [] (httpsmiro.medium.com/max/1322/1*4ozbhL2UjGXfwcXk9t-mmg.png)
مما يؤدي إلى:
! [] (httpsmiro.medium.com/max/1304/1*CCPIwYcPoehI2Bzzwj7BKA.png)
إذا نقرت على إجراء>تحرير في Cognito ، فستشاهد وحدة التحكم في Cognito لإدارة المستخدمين وميزات الأمان المتقدمة. بعض الإعدادات التي قمت بها في هذه الخطوة غير قابلة للعكس ولكن يمكنك دائمًا حذف مجموعة المستخدمين وإنشاء مجموعة جديدة.
هذا يكمل تكوين AWS Cognito داخل MobileHub. حان الوقت لإضافة التعليمات البرمجية. كم ثمن؟ 5 خطوط! و 3 منهم فقط واردات في React.
= إضافة إعداداتك إلى مشروع React والنشر على موقع الويب الخاص بك =
في جهازك الطرفي ، يمكنك في أي وقت استخدام السحب أو الدفع awsmobile لسحب التغييرات على التوالي من AWS MobileHub Console عبر الإنترنت إلى التطبيق الخاص بك ، أو دفع التغييرات المحلية التي تم إجراؤها من خلال CLI awsmobile في الجهاز.
بالنسبة لحالة الاستخدام هذه ، نريد إحضار التغييرات التي أجريناها. ارجع إلى جهازك واكتب
! [] (httpsmiro.medium.com/max/1394/1*zxtajVqajk5MtgNNHea7bg.png)
بالعودة إلى VS Code ، سترى أن مشروعك قد تم تعديله الآن. يمكنك التحقق من التكوينات المحلية الخاصة بك في ./awsmobile/backend/mobile-hub-project.yml
أيضًا ، في ./package.json ، ستجد المكتبتين المميزتين اللتين تمت إضافتهما بواسطة awsmobile init الذي قمنا به سابقًا.
! [] (httpsmiro.medium.com/max/928/1*0j1ZYd5Qgx3GIUEQ3QA80A.png)
سنستخدمها الآن لإغلاق تطبيقنا في نافذة تسجيل الدخول إلى Cognito. افتح ./src/index.js وعدّل هذا:
! [] (httpsmiro.medium.com/max/1244/1*fnbXXDHYud2OC411jcja_w.png)
الى هذا:
استيراد رد فعل من "رد فعل"؛
استيراد ReactDOM من "رد فعل دوم"؛
استيراد index.css '؛
استيراد التطبيق من التطبيق ؛
استيراد RegisterServiceWorker من registerServiceWorker '؛
استيراد awsMobile من aws-export '؛
استيراد تضخيم من "aws-amplify"؛
استيراد {withAuthenticator} من "aws-amplify-react"Amplify.configure (awsMobile) ؛
const AppWithAuth = withAuthenticator (التطبيق) ReactDOM.render (
('root
registerServiceWorker
And youâÃÂÃÂre done! Try to run your application from your terminal with
npm start
and see it be loaded into the browser with a sleek GUI created by AWS:
From here you can register, login or reset users, and as an admin you can see the users who are registering.
**To add hosting simply go to your terminal and type
awsmobile publish
If you get this warning, abort the publish, run awsmobile pull and run awsmobile publish again:
When this process is done, your hosted website automatically opens in your default browser:
**There, youâÃÂÃÂre done
= Pitfalls in the process =
If the application says âÃÂÃÂNo user poolsâÃÂÃÂ, make sure your MobileHub console has Sign-In activated, and that youâÃÂÃÂve called awsmobile pull from your terminal. This updates the aws-exports.js file which is then added to Amplify.configure() in React. Also, remember to import that file!
**Further challenges** **Use the ** **aws-amplify authentication documentation ** **to add a signout button to your application
Hint: YouâÃÂÃÂll need to import Auth and call its signOut function.
import { Auth } from aws-amplify-react
**Add your custom domain name to the hosted website**This is done through CloudFront, which you can access in MobileHub âÃÂÃÂHosting and StreamingâÃÂÃÂ. Read the docs provided if you want assitance:
== Using Custom URLs for Files by Adding Alternate Domain Names (CNAMEs) - Amazon CloudFront ==
Describes how to add an alternate domain name, known as a CNAME, to use your own domain name instead of the defaultâÃÂæ
docs.aws.amazon.com
**Add Google Login**Delete your Cognito User Pool and add one with Facebook/Google providers. This can be a bit tricky as you need to get e.g. Google Web App Client ID from the google terminal to make this work. **Hope you enjoyed this very detailed introduction to AWS MobileHub. ItâÃÂÃÂs a lot of fun once you get the hang of it, and creating a Serverless backend for your frontend project has never been as easy
