ری ایکٹ ایپلیکیشن کو تعینات کرنے کے لیے AWS Amplify کا استعمال کیسے کریں

= AWS Amplify استعمال کرنے کا طریقہ ایک React ایپلیکیشن کو تعینات کرنے کے لیے = == AWS Amplify کے ساتھ React ایپلی کیشنز کو تعینات کرنے کے لیے ایک گائیڈ == ![ ](httpsmiro.medium.com/max/1400/1*pKiBeVwoxaHc_QlhIpVgSA.gif) چونکہ میں نے ایک سافٹ ویئر انجینئر کے طور پر مشاورت شروع کی ہے، میں نے ایک پورٹ فولیو ویب سائٹ کو اکٹھا کرنا چاہا جو ذاتی اور پیشہ ورانہ منصوبوں پر میں نے کام کیا ہے۔ موسم سرما کے اس وقفے میں، میں نے اپنی پورٹ فولیو سائٹ کو ڈیزائن کرنے، تیار کرنے اور اسے تعینات کرنے میں وقت گزارا، اور اس مضمون میں، میں آپ کو بتاؤں گا کہ میں نے اسے AWS Amplify کے ساتھ کیسے لگایا۔ آپ dan-murphy.com پر ویب سائٹ اور GitHub پر کوڈ دیکھ سکتے ہیں۔ = ایک مختصر پس منظر = میرے زیادہ تر پیشہ ورانہ کام میں ڈیٹا سے چلنے والی ایپلی کیشنز کی تعمیر اور ڈیٹا پائپ لائنوں کو ہموار کرنا شامل ہے۔ ان کاموں کو پورا کرنے کے لیے، میں باقاعدگی سے Python اور Ruby کا استعمال کرتا ہوں اور کسی بھی فرنٹ اینڈ کام کے لیے JavaScript کو شامل کرتا ہوں۔ React کے ساتھ زیادہ آرام دہ بننے کی کوشش میں، میں نے اپنی پورٹ فولیو ویب سائٹ بنانے کے لیے فریم ورک استعمال کرنے کا فیصلہ کیا۔ = ایپلیکیشن ترتیب دینا = پہلا قدم جو میں نے اٹھایا وہ یہ فیصلہ کر رہا تھا کہ درخواست کی ساخت کیسے بنائی جائے۔ میں نے استعمال کیا۔ create-react-app کو میری ڈائرکٹریز کے لیے بنیادی ٹیمپلیٹ کے طور پر استعمال کریں، اور پھر چند اضافی فولڈرز کے ساتھ ایپلیکیشن کو دوبارہ تشکیل دیں۔ حتمی سیٹ اپ اس طرح لگتا ہے: src اجزاء آرکائیوز ایکسٹرا ڈیٹا ÃÂ¢ÃÂÃÂimgs صفحات مشمولات ڈیٹا طرزیں ٹیسٹ فکسچر کچھ قابل ذکر تبدیلیاں یہ ہیں۔ **اجزاء** ، اور **صفحات** ڈائریکٹریز **انداز** ، : یہ وہ جگہ ہے جہاں میں ایپلی کیشن کے تمام اجزاء کو محفوظ کرتا ہوں۔ اجزاء کو ایک مرکزی فولڈر میں ذخیرہ کرنے سے، میرے کوڈ کو دوبارہ استعمال کرنا اور ریفیکٹر کرنا آسان ہے اور دوسروں کو سمجھنے کے لیے زیادہ بدیہی ہے۔ میرے پورٹ فولیو کی ویب سائٹ بنانے والے کچھ اجزاء یہ ہیں۔ اجزاء ہیڈر، فوٹر، اور پروجیکٹ سائڈبار۔ : یہ وہ جگہ ہے جہاں میں درخواست کے لیے الگ الگ صفحات بناتا ہوں۔ میں سے مطلوبہ اجزاء درآمد کرتا ہوں۔ صفحات فولڈر اور پھر صفحہ کو ڈیزائن کرنے کے لیے ان کو جمع کریں۔ یہاں ایک مثال ہے کہ میں نے اس کے لئے یہ کیسے کیا۔ اجزاء ہوم پیج: : یہ وہ جگہ ہے جہاں میں ایپلیکیشن کے لیے عالمی CSS اسٹائلز کی وضاحت کرتا ہوں۔ مجھے استعمال کرنا پسند ہے۔ طرزیں انفرادی اجزاء کے لیے اسٹائلڈ اجزاء، لیکن میں نے عالمی طرز کی تعمیر کے لیے بھی مفید پایا ہے جو ہر صفحے پر دستیاب ہیں۔ آخر میں، درست صفحات پر درخواستوں کا نقشہ بنانے کے لیے، ہم استعمال کرتے ہیں۔ react-router-dom. راستوں کی وضاحت میں ہے۔ App.js فائل جیسا کہ ذیل میں دکھایا گیا ہے: یہ نقشہ بنائے گا۔ ہوم پیج، /منصوبوں کی درخواستیں پروجیکٹس پیج، / کی درخواستوں کے بارے میں AboutPage، اور /کتابوں کی الماری سے درخواست کرتا ہے۔ کتاب کا صفحہ۔ اب جبکہ ایپلیکیشن کی ڈیولپمنٹ مکمل ہو چکی ہے، ہمیں اسے تعینات کرنے کی ضرورت ہے تاکہ دوسرے اسے استعمال کر سکیں! /سے درخواست کرتا ہے۔ = AWS Amplify = کے ساتھ تعینات کرنا == جائزہ == React ویب سائٹ کو تعینات کرنے کے کئی طریقے ہیں، لیکن میں نے پایا ہے کہ سب سے آسان میں سے ایک استعمال کرنا ہے۔ **AWS Amplify Amplify کو موبائل اور ویب ایپس بنانے کا تیز ترین اور آسان طریقہ کے طور پر بیان کیا گیا ہے جو اسکیل کرتے ہیں۔ اس کو پورا کرنے کے لیے، AWS سرور کو ترتیب دینے، انحصار کو انسٹال کرنے، اور آپ کی ویب سائٹ کی پروڈکشن بلڈ بنانے کی تمام پیچیدگیوں کو بڑھاتا ہے، جس سے آپ کو صرف ایک بدیہی UX بنانے پر توجہ مرکوز کرنے کی اجازت ملتی ہے۔ اس بارے میں مزید جاننے کے لیے کہ AWS Amplify ڈیٹا سے چلنے والی ایپلی کیشنز کے لیے کیا پیشکش کرتا ہے (خاص طور پر، **فرنٹ اینڈ** اور ** بیک اینڈ والی ویب سائٹس ان کے دستاویزات کو چیک کریں۔ == اپنے ذخیرے کو جوڑنا == AWS Amplify پر اپنی ویب ایپ کی میزبانی کرنے کے لیے، آپ کو پہلے اپنے سورس کوڈ پر مشتمل ریپوزٹری کو جوڑنے کی ضرورت ہے۔ ایسا کرنے کے لیے، آپ نیویگیٹ کر سکتے ہیں۔ *AWS Amplify* *شروع کرنا* **مائی ویب ایپ کی میزبانی کریں اور **کنیکٹ ایپ ریپو *صفحہ پر کلک کریں، *صفحہ تک سکرول کریں، اسکرول کریں![ ](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: حکم: - این پی ایم انسٹال بلڈ: حکم: - این پی ایم رن بلڈ نمونے: baseDirectory: تعمیر فائلوں: - کیش: راستے: - node_modules اس کے علاوہ، کے تحت **جدید ترتیبات** ٹوگل کریں، آپ ماحولیاتی متغیرات اور ایک حسب ضرورت تعمیر کنٹینر سیٹ کر سکتے ہیں۔ آخر میں، اپنی درخواست کی ترتیبات کا جائزہ لینے کے بعد، کلک کریں۔ **محفوظ کریں اور تعینات کریں **اور **AWS آپ کی درخواست کی تشکیل اور تعیناتی شروع کردے گا۔ جب AWS کی تعیناتی مکمل ہو جاتی ہے، تو آپ Amplify ہوم پیج پر جا سکتے ہیں اور دیکھ سکتے ہیں کہ آپ کی نئی تعینات کردہ ایپلیکیشنAWS آپ کی ایپلیکیشن کی تشکیل اور تعیناتی شروع کر دے گی۔ AWS کی تعیناتی مکمل ہونے پر، آپ Amplify ہوم پیج پر جا سکتے ہیں اور اپنی نئی تعینات کردہ ایپلیکیشن دیکھ سکتے ہیں۔ اب، آئیے یو آر ایل کو استعمال کرکے اپنی مرضی کے مطابق بنائیں **AWS ایمپلیفائی ڈومین مینجمنٹ == ایک حسب ضرورت ڈومین شامل کرنا == حسب ضرورت ڈومین شامل کرنا شروع کرنے کے لیے، بائیں سائڈبار پر جائیں اور منتخب کریں۔ **ڈومین مینجمنٹ![ ](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 آپ کو a **توثیق کا سرٹیفکیٹ آپ اس سرٹیفکیٹ کو AWS سرٹیفکیٹ مینیجر کنسول میں بھی دیکھ سکتے ہیں۔ == CNAME ریکارڈ شامل کرنا == آپ کے حسب ضرورت ڈومین کو ترتیب دینے کا آخری مرحلہ ایک CNAME ریکارڈ شامل کرنا ہے۔ مندرجہ ذیل مثال میں میں Google Domains استعمال کرتا ہوں، لیکن بنیادی تصورات مختلف ڈومین رجسٹراروں میں ایک جیسے رہتے ہیں۔ سب سے پہلے، نیچے تک سکرول کریں۔ **گوگل ڈومینز میں حسب ضرورت وسائل کے ریکارڈ**۔ ایک *CNAME *ریکارڈ بنائیں جو تمام ذیلی ڈومینز کو AWS Amplify ڈومین کی طرف اشارہ کرے: نام: ذیلی ڈومین کا نام درج کریں۔ اگر ذیلی ڈومین www.domain.com ہے تو درج کریں۔ اگر یہ www app.domain.com ہے تو ایپ درج کریں۔ ڈیٹا: ڈومین مینجمنٹ پیج پر، ایکشن پر کلک کریں اور پھر ڈی این ایس ریکارڈز دیکھیں کو منتخب کریں۔ پھر، کنفیگر DNS فراہم کنندہ کے تحت دستیاب AWS Amplify ڈومین درج کریں۔ ![ ](httpsmiro.medium.com/max/1400/1*SSRoAAkYjf5dT2rD-kmEQw.png) **ڈومینز مینجمنٹ** صفحہ، منتخب کریں **کارروائیاں **ڈی این ایس ریکارڈز دیکھیں** مجموعی طور پر، حسب ضرورت وسائل کا ریکارڈ درج ذیل کی طرح نظر آئے گا: ![ ](httpsmiro.medium.com/max/1400/1*bZh8t77JswwonKCFyp7tog.png) اگلا، ایک اور شامل کریں۔ *CNAME* ریکارڈ جو AWS سرٹیفکیٹ مینیجر کی توثیق کے سرور کی طرف اشارہ کرتا ہے۔ توثیق شدہ AWS سرٹیفکیٹ مینیجر آپ کی درخواست کے لیے TLS کو ہینڈل کرتا ہے: نام: توثیق سرور کا ذیلی ڈومین درج کریں۔ اگر آپ کے ڈومین کی ملکیت کی تصدیق کا DNS ریکارڈ _1234.example.com ہے تو صرف _1234 درج کریں۔ ڈیٹا: ACM توثیق کا سرٹیفکیٹ درج کریں۔ اگر توثیق کا سرور _1234.abcdefg.acm-validations.aws. ہے، تو _1234.abcdefg.acm-validations.aws درج کریں۔ آپ کے توثیق کے سرٹیفکیٹس کی تمام معلومات AWS سرٹیفکیٹ مینیجر کنسول میں پائی جاتی ہیں۔ دوسری کے بعد *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]*۔ پڑھنے کا شکریہ!