كيفية استخدام AWS Amplify لنشر رد فعل التطبيق

= كيفية استخدام AWS Amplify لنشر تطبيق React = == دليل لنشر تطبيقات React مع AWS Amplify == ! [] (httpsmiro.medium.com/max/1400/1*pKiBeVwoxaHc_QlhIpVgSA.gif) منذ أن بدأت في الاستشارات كمهندس برمجيات ، أردت أن أجمع موقع ويب للمحفظة يعرض المشاريع الشخصية والمهنية التي عملت عليها. في عطلة الشتاء هذه ، قضيت وقتًا في تصميم موقع محفظتي وتطويره ونشره ، وفي هذه المقالة ، سوف أطلعك على كيفية نشره باستخدام AWS Amplify. يمكنك عرض موقع الويب على dan-murphy.com والكود على GitHub. = خلفية موجزة = يستلزم معظم عملي الاحترافي إنشاء تطبيقات تعتمد على البيانات وتبسيط خطوط أنابيب البيانات. لإنجاز هذه المهام ، أستخدم Python و Ruby بانتظام وأدمج JavaScript في أي عمل للواجهة الأمامية. في محاولة لأكون أكثر راحة مع React ، قررت استخدام إطار العمل لبناء موقع الويب الخاص بمحفظة. = إعداد التطبيق = كانت الخطوة الأولى التي اتخذتها هي تحديد كيفية تنظيم التطبيق. لقد استخدمت إنشاء-تفاعل-التطبيق كقالب أساسي لأدلتي ، ثم إعادة هيكلة التطبيق ببضعة مجلدات إضافية. يبدو الإعداد النهائي كما يلي: src عناصر المحفوظات Ã Â ¢ Ã Â Ã Â Ã Â ¢ Ã Â Ã Â إضافات Ã Â ¢ Ã Â Ã Â البيانات Â ¢ Ã Â Ã Â imgs الصفحات محتويات Ã Â ¢ Ã Â Ã Â Ã Â ¢ Ã Â Ã Â البيانات الأنماط الاختبارات تركيبات بعض التغييرات الملحوظة هي **عناصر** ، و ** صفحات ** الدلائل. ** الأنماط ** و : هذا هو المكان الذي أخزن فيه جميع مكونات التطبيق. من خلال تخزين المكونات في مجلد مركزي ، يكون من الأسهل إعادة استخدام التعليمات البرمجية الخاصة بي وإعادة تشكيلها ، كما يسهل على الآخرين فهمها. بعض المكونات التي يتكون منها موقع محفظتي هي عناصر رأس ، تذييل و المشروع : هذا هو المكان الذي أقوم فيه ببناء صفحات مميزة للتطبيق. أقوم باستيراد المكونات المطلوبة من الصفحات مجلد ثم تجميعها لتصميم الصفحة. فيما يلي مثال على كيفية القيام بذلك من أجل الصفحة الرئيسية للمكونات: : هذا هو المكان الذي أحدد فيه أنماط CSS العامة للتطبيق. أنا أحب الاستخدام الأنماط عناصر نمطية للمكونات الفردية ، لكنني وجدت أيضًا أنه من المفيد إنشاء أنماط عامة متاحة لكل صفحة. أخيرًا ، لتعيين الطلبات إلى الصفحات الصحيحة ، نستخدم رد فعل جهاز التوجيه دوم. يتم تحديد الطرق في ملف ملف App.js كما هو موضح أدناه: هذا سوف الخريطة الصفحة الرئيسية، / طلبات المشاريع إلى الصفحة ، / حول طلبات حول الصفحة و / طلبات رف الكتب إلى صفحة كتاب. الآن وقد اكتمل تطوير التطبيق ، نحتاج إلى نشره حتى يتمكن الآخرون من استخدامه! / طلبات إلى = النشر باستخدام AWS Amplify = == نظرة عامة == هناك عدة طرق لنشر موقع ويب React ، لكنني وجدت أن أحد أبسطها هو استخدام ** يوصف AWS Amplify Amplify بأنه طريقة Ã Â ¢ Ã Â Ã Â أسرع وأسهل لبناء تطبيقات للهاتف المحمول والويب تتوسع. تقوم AWS باستقراء جميع التعقيدات المتعلقة بإعداد خادم ، وتثبيت التبعيات ، وإنشاء بنية إنتاجية لموقعك على الويب ، مما يسمح لك بالتركيز فقط على بناء تجربة مستخدم سهلة الاستخدام. لمعرفة المزيد حول ما تقدمه AWS Amplify للتطبيقات التي تعتمد على البيانات (على وجه التحديد ، مواقع الويب ذات الواجهة الأمامية ** و ** الخلفية ، تحقق من وثائقها. == توصيل المستودع الخاص بك == لاستضافة تطبيق الويب الخاص بك على AWS Amplify ، تحتاج أولاً إلى توصيل المستودع الذي يحتوي على كود المصدر الخاص بك. للقيام بذلك ، يمكنك الانتقال إلى ملف * AWS Amplify * * البدء * ** استضف تطبيق My Web وانقر على صفحة ** Connect app repo * ، مرر إلى * الصفحة ، مرر إلى! [] (httpsmiro.medium.com/max/1400/1*2OLIf9dDvf2ZDqjhXUXuGw.png ) بعد ذلك ، سيتم إعادة توجيهك إلى صفحة منفصلة حيث يمكنك توصيل المستودع الذي يحتوي على شفرة المصدر الخاصة بك. في هذا المثال ، سأختار GitHub ، لكن AWS Amplify يدعم أيضًا BitBucket و GitLab و AWS CodeCommit وحتى النشر بدون مزود Git. ! [] (httpsmiro.medium.com/max/1400/1*Dq8nN8mntiNegYIXarbtAw.png) بعد التفويض الناجح ، يمكنك تحديد المستودع الذي تريد نشره وتحديد الفرع الذي يجب أن تستخدمه AWS Amplify لبناءات الإنتاج. ! [] (httpsmiro.medium.com/max/1400/1*OOlYA6q2eCplw4hW2IQP8Q.png) بعد ذلك ، انقر فوق ** التالي ** وسيطلب منك AWS تكوين إعدادات * الإنشاء * و * الاختبار *. يتم عرض القالب الأساسي الذي توفره AWS أدناه. النسخة 1 نهاية المقدمة: المراحل: preBuild: الأوامر: - بناء تثبيت npm: الأوامر: - npm تشغيل البناء الآثار: دليل القاعدة: بناء الملفات: - مخبأ: مسارات: - العقدة بالإضافة إلى ذلك ، تحت ** الإعدادات المتقدمة ** للتبديل ، يمكنك تعيين متغيرات البيئة وحاوية بناء مخصصة. أخيرًا ، بعد مراجعة إعدادات التطبيق الخاص بك ، انقر فوق ** Save and Deploy ** وستبدأ ** AWS في تكوين تطبيقك ونشره. عند انتهاء AWS من النشر ، يمكنك الانتقال إلى الصفحة الرئيسية Amplify والاطلاع على التطبيق الذي تم نشره حديثًا سيبدأ AWS في تكوين تطبيقك ونشره. عند انتهاء AWS من النشر ، يمكنك الانتقال إلى الصفحة الرئيسية Amplify والاطلاع على التطبيق الذي تم نشره حديثًا. الآن ، دعونا نقوم بتخصيص عنوان URL باستخدام ** AWS Amplify إدارة المجال == إضافة مجال مخصص == للبدء في إضافة مجال مخصص ، انتقل إلى الشريط الجانبي الأيسر وحدد ** إدارة المجال! [] (httpsmiro.medium.com/max/1400/1*fo8ZsKK7c3QvAwpjzMXcWg.png) ** إعداد إدارة المجال **. ثم حدد ** أضف المجال ** تكوين المجال ** أدخل اسم المجال الخاص بك (كما هو موضح أدناه) ، وانقر فوق ** أدخل اسم المجال الخاص بك (كما هو موضح أدناه) ، وانقر! [] (httpsmiro.medium.com/max/1400/ 1 * e57WryLPTPC7Ro-_d5XAgQ.png) بعد ذلك ، يمكنك إعداد أي عمليات إعادة توجيه ضرورية لنطاقك. على سبيل المثال ، في المثال التالي ، قمت بإنشاء إعادة توجيه من httpsdan-murphy.com إلى httpswww.dan-murphy.com. ! [] (httpsmiro.medium.com/max/1400/1*yvEwLJmVK41H7ZPqDLB9Tg.png) أخيرًا ، بعد تكوين مجالك المخصص بشكل صحيح ، ستزودك AWS بملف ** شهادة التحقق من الصحة يمكنك أيضًا عرض هذه الشهادة في وحدة تحكم AWS Certificate Manager. == إضافة سجل CNAME == الخطوة الأخيرة في تكوين مجالك الخاص هي إضافة سجل CNAME. في المثال التالي ، أستخدم Google Domains ، لكن المفاهيم الأساسية تظل كما هي عبر مختلف مسجلي النطاقات. أولاً ، قم بالتمرير لأسفل إلى ** سجلات الموارد المخصصة ** في Google Domains. قم بإنشاء سجل * CNAME * يوجه جميع المجالات الفرعية إلى مجال AWS Amplify: الاسم: أدخل اسم المجال الفرعي. إذا كان النطاق الفرعي هو www.domain.com ، فأدخل. إذا كان www app.domain.com ، فأدخل التطبيق. البيانات: في صفحة إدارة المجال ، انقر فوق إجراءاتثم حدد عرض سجلات DNS. بعد ذلك ، أدخل مجال AWS Amplify المتاح ضمن تكوين مزود DNS. ! [] (httpsmiro.medium.com/max/1400/1*SSRoAAkYjf5dT2rD-kmEQw.png) صفحة ** إدارة المجالات ** ، حدد ** الإجراءات ** عرض سجلات DNS ** إجمالاً ، سيبدو سجل المورد المخصص كما يلي: ! [] (httpsmiro.medium.com/max/1400/1*bZh8t77JswwonKCFyp7tog.png) بعد ذلك ، أضف واحدًا آخر * سجل CNAME * الذي يشير إلى خادم التحقق من صحة AWS Certificate Manager. يتعامل AWS Certificate Manager الذي تم التحقق منه مع TLS لتطبيقك: الاسم: أدخل المجال الفرعي لخادم التحقق ¢ Ã Â Â Ã. إذا كان سجل نظام أسماء النطاقات للتحقق من ملكية نطاقك هو _1234.example.com ، فأدخل _1234 فقط. البيانات: أدخل شهادة التحقق من صحة ACM. إذا كان خادم التحقق هو _1234.abcdefg.acm-validations.aws. ، فأدخل _1234.abcdefg.acm-validations.aws. تم العثور على جميع المعلومات الخاصة بشهادات التحقق من الصحة في وحدة تحكم AWS Certificate Manager. بعد الثانية تمت إضافة * CNAME * ، يجب أن تبدو سجلاتك المخصصة على النحو التالي:! [] (httpsmiro.medium.com/max/1400/1*79yex2fObLiK0Q0f0X4zeA.png) أخيرًا ، دعنا نضيف a ** سجل اصطناعي ** لإعداد إعادة توجيه نطاق فرعي: النطاق الفرعي: أدخل عنوان URL للمجال: www. ! [] (httpsmiro.medium.com/max/1400/1*xi6ivE7Vsfz9AheFAHxPZQ.png) = التفاف = بشكل عام ، تعلمنا في هذه المقالة كيفية هيكلة تطبيقات React ونشرها باستخدام AWS Amplify. أولاً ، ناقشنا كيفية تحويل تطبيق التفاعل إلى نمط معياري * مكونات * * صفحات * مجلدات. بعد ذلك ، تعرفنا على ** AWS Amplify ** وكيفية نشر التطبيقات الثابتة والقائمة على البيانات باستخدامه. أخيرًا ، تعلمنا استخدام ** AWS Amplify Domain Management ** و ** Google Domains ** لتخصيص مجال تطبيقنا. **و و إذا كانت لديك أي أسئلة أو مخاوف أو تعليقات على هذه المقالة أو موقع أعمالي ، فلا تتردد في التعليق أو مراسلتي عبر البريد الإلكتروني *[email protected]*. شكرا للقراءة!