= نشر تطبيقات React على Amazon S3 =

== دليل مدته 5 دقائق حول كيفية نشر تطبيقات React مع S3 ==

! [] (httpsmiro.medium.com/max/1400/1*h4TLlisFk7XvtREAsS7C7Q.jpeg)

لقد أكملت تطبيق React الخاص بك وأنت تتطلع إلى استضافته في مكان ما. هل تعلم أنه يمكنك استخدام Amazon AWS S3 لاستضافة تطبيقات React الخاصة بك؟ إنه سهل نسبيًا ومنخفض التكلفة وسريع النشر.

= Letà  ¢ à  à  ابدأ! =

== المتطلبات الأساسية ==

قبل أن نذهب إلى الاستضافة ، دعنا ننجز الإعداد الإداري. تأكد من إكمال ما يلي:

** لديك حساب AWS اشترك للحصول على حساب AWS هنا: httpsaws.amazon.com/resources/create-account/ ** أنشئ مستخدم AWS في وحدة تحكم AWS ، انتقل إلى علامة التبويب IAM ، وانتقل إلى Ã Â ¢ Ã Â Ã Â المستخدمون Â ¢ Ã Â Ã Â قسم على الشريط الجانبي.

انقر فوق Ã Â ¢ Ã Â Ã Â إضافة مستخدم Â ¢ Ã Â Ã Â وحدد Ã Â ¢ Ã Â Ã Â وصول برمجي Â ¢ Ã Â Ã Â.

! [] (httpsmiro.medium.com/max/1400/1*gMtvyUQ_X2YVYHwNfLeygg.png)

انقر فوق à  ¢ à  à  التالي: الأذونات  ¢ à  à  وهنا حدد à  ¢ à  à أرفق السياسات الحالية مباشرةً  ¢ à  à Â. تحقق من à  ¢ à  à  AdministratorAccessà  ¢ à  à  لغرض النشر.

! [] (httpsmiro.medium.com/max/1400/1*UfuPz5oak9QbxX0VXlNV5g.png)

انقر فوق الأزرار التالية ثم انقر في النهاية على Ã Â ¢ Ã Â Ã Â إنشاء مستخدم Â ¢ Ã Â Ã Â.

! [] (httpsmiro.medium.com/max/1400/1*aSCgwjWRAiNQHBV_bSRlvA.png)

في الخطوة الأخيرة ، نتلقى معرف مفتاح الوصول ومفتاح الوصول السري. تنزيل و

** احفظها على جهاز الكمبيوتر الخاص بك حيث ستحتاج إليها لاحقًا

== تثبيت AWS CLI ==

AWS CLI هي أداة قوية يمكن أن تساعدنا في تبسيط عملية النشر.

دعنا نثبت AWS CLI باستخدام Homebrew (لنظام macOS). قم بتثبيت Homebrew إذا لم تكن قد قمت بذلك بالفعل.

* ملاحظة: إذا كنت تستخدم Windows ، يمكنك العثور على التعليمات في المستندات الرسمية * * هنا *

افتح الجهاز الطرفي الخاص بك ، وادخل

تركيب المشروب أوسكلي.

بمجرد تثبيت أداة CLI ، يمكننا تكوين حساب AWS الخاص بنا باستخدام

تكوين AWS. هذا هو المكان الذي ستحتاج فيه إلى إدخال معلومات مفتاح الوصول التي قمت بتنزيلها مسبقًا. يجب أن يكون شيء مثل ما يلي.

بالنسبة للمنطقة ، يمكنك التحقق من عنوان URL الخاص بك على AWS Console وسيذكر منطقتك. على سبيل المثال ، لي هو Ã Â ¢ Ã Â Ã Â ap-south-1Ã Â ¢ Ã Â Ã Â.

! [] (httpsmiro.medium.com/max/1400/1*TbFgHQ9ey3SwBWtadBtqSQ.png)
= إنشاء تطبيق React =

قد يكون لديك بالفعل تطبيق React جاهزًا للنشر. ومع ذلك ، إذا كنت بحاجة إلى تطبيق نموذجي ، فيمكنك استخدام الخيارات التالية:

- إنشاء تطبيق Boilerplate React عن طريق التشغيل

npx إنشاء التطبيق الخاص بي

- قم بتنزيل نموذج تطبيق React الخاص بي (مع مثال على النموذج) من httpsgithub.com/harishv7/react-hook-form-example. تم إجراء ذلك لبرنامج تعليمي لإضافة نماذج إلى تطبيقات React. تحقق من ذلك هنا.

بمجرد الانتهاء من ذلك ، تأكد من تثبيت جميع التبعيات باستخدام

تثبيت الغزل ومنح التطبيق تشغيلًا باستخدام

بداية الغزل.

= إعداد حاوية S3 =

الآن وبعد أن أصبح لدينا نموذج التطبيق جاهزًا ، فلنقم بتهيئة حاوية S3 لاستضافة تطبيقنا.

على AWS Console ، ابحث عن Ã Â ¢ Ã Â Ã Â S3Ã Â ¢ Ã Â Ã Â وانتقل إلى S3 Dashboard. انقر فوق Ã Â ¢ Ã Â Ã Â إنشاء دلو Â ¢ ¢ Ã Â Ã Â وقم بتسمية الحاوية باسم Ã Â ¢ Ã Â Ã Â رد فعل بلدي -app-2021Ã Â ¢ Ã Â Ã Â (أو أي شيء آخر ترغب فيه).

* ملاحظة: يجب أن يكون اسم الحاوية فريدًا عبر S3 بالكامل. لذا اختر اسمًا فريدًا غير موجود ، وإلا ستحصل على خطأ! *! [] (httpsmiro.medium.com/max/1400/1*tLDgJ0HJNEUA9DwhD5XiUw.png)

قم بتشغيل الوصول العام إلى الحاوية لأننا نستضيفها مباشرة.

! [] (httpsmiro.medium.com/max/1400/1*Mqn0JUnqAvMMmimuLj7rTg.png)

اترك باقي الإعدادات كما هي وانقر فوق Ã Â ¢ Ã Â Ã Â إنشاء دلو Â Â ¢ Ã Â Ã Â. سترى إدخالًا مثل ما يلي على لوحة معلومات S3.

! [] (httpsmiro.medium.com/max/1400/1*pW6x0HIgq9WgauWy-SFIOw.png)

دعنا نضغط وانتقل إلى دلو S3 الذي تم إنشاؤه حديثًا.

! [] (httpsmiro.medium.com/max/1400/1*PNhe4x_fs02RmMKIQmGbng.png)

اسمحوا Â ¢ Ã Â Ã Ã بالضغط على Ã Â ¢ Ã Â Ã خصائصÃ Â ¢ Ã Â Ã وانتقل إلى أسفل حيث تريد انظر Ã Â ¢ Ã Â Ã Â Ã Ã Â Â.

! [] (httpsmiro.medium.com/max/1400/1*mRdXzoHrc1LHQ8Hy-2V4UQ.png)

انقر فوق à  ¢ à  à  Enableà  ¢ à  à  وأدخل à  ¢ à  à  index.htmlà  ¢ à  à  ضمن مستند الفهرس.

! [] (httpsmiro.medium.com/max/1400/1*3d4nQKZrRAh5SmgbL0-yhA.png)

اترك الحقول الأخرى كما هي وانقر على "حفظ التغييرات".

= النشر في S3 =

الآن ، نحن جاهزون لنشر تطبيقنا على S3. طريقة القيام بذلك هي استخدام أمر CLI التالي:

aws s3 sync build / s3your-bucket-name>--acl public-read
يمكننا إضافة هذا الأمر إلى ملف package.json الخاص بنا أيضًا كبرنامج نصي Ã Â ¢ Ã Â Ã Â Â ¢ Ã Â Ã Â.

! [] (httpsmiro.medium.com/max/1400/1*BY8AO0YO7WqOUMPWA_XsVQ.png)

Letà  ¢ à  à لبناء تطبيقنا باستخدام

بناء الغزل الذي يساعد على إنشاء بناء إنتاج محسن.

بعد ذلك ، دعنا نشغل أمر CLI الموضح أعلاه أو إذا قمت بإعداد نص النشر الخاص بك في package.json ، يمكننا استخدام

نشر الغزل.

! [] (httpsmiro.medium.com/max/1400/1*8ZbQ49dzPzGo_TkYh3_H1w.png)

هذا كل ما في الأمر ، تم نشر تطبيقنا الآن!

للعثور على مكان استضافة تطبيقنا (رابط موقع الويب) ، انتقل إلى وحدة تحكم AWS S3 وانقر على الحاوية التي أنشأتها.

انتقل إلى علامة التبويب à  ¢ à  à  Propertiesà  ¢ à à à  وانتقل لأسفل حتى تصل إلى موقع الويب الثابت à  ¢ à  à الاستضافة à ¢ à à  à وسيكون عنوان URL الخاص بنا هناك.

! [] (httpsmiro.medium.com/max/1400/1*SbuQahvHex1KetHvddN2rw.png)

انقر عليها وسيتم فتح التطبيق في علامة تبويب جديدة. هنا Â ¢ Ã Â Ã Â لي!

! [] (httpsmiro.medium.com/max/1400/1*LcpVXd_SeBMLbJafgOAbEA.png)

= الاستنتاج =

لقد نجحنا في نشر تطبيق React الخاص بنا على Amazon S3! يعد هذا خيارًا رائعًا لنشر نماذج React الأولية واختبارها بسرعة ومشاركتها مع الآخرين. إنه حقًا سهل وسريع النشر أيضًا.

آمل أن يكون هذا البرنامج التعليمي مفيدًا لك!

ترميز سعيد! Ã Â ° Ã Â Ã Â Ã Â »

* المزيد من المحتوى في * * simpleenglish.io *