একটি প্রতিক্রিয়া অ্যাপ্লিকেশন স্থাপন করতে AWS Amplify কীভাবে ব্যবহার করবেন

= কিভাবে AWS Amplify ব্যবহার করবেন একটি প্রতিক্রিয়া অ্যাপ্লিকেশন স্থাপন করতে = == AWS Amplify == এর সাথে প্রতিক্রিয়া অ্যাপ্লিকেশন স্থাপন করার জন্য একটি নির্দেশিকা ![ ](httpsmiro.medium.com/max/1400/1*pKiBeVwoxaHc_QlhIpVgSA.gif) যেহেতু আমি একজন সফ্টওয়্যার ইঞ্জিনিয়ার হিসাবে পরামর্শ শুরু করেছি, তাই আমি একটি পোর্টফোলিও ওয়েবসাইট একসাথে রাখতে চেয়েছিলাম যা প্রদর্শন করে ব্যক্তিগত এবং পেশাদার প্রকল্পগুলিতে আমি কাজ করেছি৷ এই শীতকালীন বিরতিতে, আমি আমার পোর্টফোলিও সাইট ডিজাইন, বিকাশ এবং স্থাপনে সময় কাটিয়েছি এবং এই নিবন্ধে, আমি আপনাকে AWS Amplify-এর সাথে কীভাবে এটি স্থাপন করেছি তা নিয়ে আলোচনা করব। আপনি dan-murphy.com-এ ওয়েবসাইট এবং GitHub-এ কোড দেখতে পারেন। = একটি সংক্ষিপ্ত পটভূমি = আমার বেশিরভাগ পেশাগত কাজের জন্য ডেটা-চালিত অ্যাপ্লিকেশন তৈরি করা এবং ডেটা পাইপলাইনগুলিকে স্ট্রিমলাইন করা। এই কাজগুলি সম্পন্ন করার জন্য, আমি নিয়মিত পাইথন এবং রুবি ব্যবহার করি এবং যেকোনো ফ্রন্টএন্ড কাজের জন্য জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করি। প্রতিক্রিয়ার সাথে আরও আরামদায়ক হওয়ার প্রয়াসে, আমি আমার পোর্টফোলিও ওয়েবসাইট তৈরি করতে ফ্রেমওয়ার্ক ব্যবহার করার সিদ্ধান্ত নিয়েছি। = অ্যাপ্লিকেশন সেট আপ করা = আমি যে প্রথম পদক্ষেপটি নিয়েছিলাম তা হল অ্যাপ্লিকেশনটিকে কীভাবে গঠন করা যায় তা নির্ধারণ করা। আমি কাজে লাগিয়েছি আমার ডিরেক্টরিগুলির জন্য একটি বেস টেমপ্লেট হিসাবে তৈরি-প্রতিক্রিয়া-অ্যাপ, এবং তারপরে কয়েকটি অতিরিক্ত ফোল্ডারের সাথে অ্যাপ্লিকেশনটিকে পুনর্গঠন করুন। চূড়ান্ত সেটআপ এই মত দেখায়: src উপাদান আর্কাইভ অতিরিক্ত ÃÂ¢ÃÂÃÂ ডেটা ÃÂ¢ÃÂÃÂimgs পৃষ্ঠাগুলি ÃÂ¢ÃÂÃÂ সামগ্রী ÃÂ¢ÃÂÃÂ ডেটা শৈলী পরীক্ষা ফিক্সচার উল্লেখযোগ্য কিছু পরিবর্তন হল **উপাদান** , এবং **পৃষ্ঠা** ডিরেক্টরি **শৈলী** , : এখানে আমি অ্যাপ্লিকেশনের জন্য সমস্ত উপাদান সংরক্ষণ করি। একটি কেন্দ্রীভূত ফোল্ডারে উপাদানগুলি সংরক্ষণ করার মাধ্যমে, আমার কোডটি পুনরায় ব্যবহার করা এবং রিফ্যাক্টর করা সহজ এবং অন্যদের বোঝার জন্য আরও স্বজ্ঞাত। কিছু উপাদান যা আমার পোর্টফোলিও ওয়েবসাইট তৈরি করে উপাদান হেডার, ফুটার, এবং প্রজেক্ট সাইডবার। : এখানেই আমি অ্যাপ্লিকেশনের জন্য স্বতন্ত্র পৃষ্ঠাগুলি তৈরি করি। আমি থেকে প্রয়োজনীয় উপাদান আমদানি করি পৃষ্ঠাগুলি ফোল্ডার এবং তারপর পৃষ্ঠা ডিজাইন করতে তাদের একত্রিত করুন। আমি এর জন্য এটি কীভাবে করেছি তার একটি উদাহরণ এখানে উপাদান হোম পেজ: : এখানেই আমি অ্যাপ্লিকেশনের জন্য বিশ্বব্যাপী CSS শৈলী সংজ্ঞায়িত করি। আমি ব্যবহার করতে ভালোবাসি শৈলী স্টাইলড-কম্পোনেন্টস-এর জন্য পৃথক উপাদান, কিন্তু আমি এটিকে প্রতিটি পৃষ্ঠায় উপলব্ধ গ্লোবাল স্টাইল তৈরি করার জন্য দরকারী বলেও খুঁজে পেয়েছি। অবশেষে, সঠিক পৃষ্ঠাগুলিতে অনুরোধগুলি ম্যাপ করতে, আমরা ব্যবহার করি প্রতিক্রিয়া-রাউটার-ডোম রুট সংজ্ঞায়িত করা হয় নীচে দেখানো হিসাবে App.js ফাইল: এই মানচিত্র হবে হোমপেজ, /প্রকল্প অনুরোধ করে প্রকল্প পাতা, / অনুরোধ সম্পর্কে About পৃষ্ঠা, এবং /বুকশেলফ অনুরোধ করে বুকপেজ। এখন অ্যাপ্লিকেশনটির বিকাশ সম্পূর্ণ হয়েছে, আমাদের এটি স্থাপন করতে হবে যাতে অন্যরা এটি ব্যবহার করতে পারে! / অনুরোধ করে = AWS Amplify দিয়ে স্থাপন করা হচ্ছে = == সংক্ষিপ্ত বিবরণ == একটি প্রতিক্রিয়া ওয়েবসাইট স্থাপন করার বিভিন্ন উপায় রয়েছে, কিন্তু আমি খুঁজে পেয়েছি যে সবচেয়ে সহজ একটি ব্যবহার করা **AWS Amplify Amplify কে মোবাইল এবং ওয়েব অ্যাপ তৈরি করার সবচেয়ে দ্রুত এবং সহজ উপায় হিসাবে বর্ণনা করা হয়েছে যা স্কেল করে। AWS একটি সার্ভার সেট আপ করা, নির্ভরতা ইনস্টল করা এবং আপনার ওয়েবসাইটের একটি প্রোডাকশন বিল্ড তৈরি করার সমস্ত জটিলতাকে এক্সট্রাপোলেট করে, যা আপনাকে শুধুমাত্র একটি স্বজ্ঞাত UX তৈরিতে ফোকাস করতে দেয়। AWS Amplify ডেটা-চালিত অ্যাপ্লিকেশনগুলির জন্য কী অফার করে সে সম্পর্কে আরও জানতে (বিশেষত, **ফ্রন্টেন্ড** এবং **ব্যাকএন্ড সহ ওয়েবসাইটগুলি তাদের ডকুমেন্টেশন পরীক্ষা করে দেখুন৷ == আপনার সংগ্রহস্থল সংযুক্ত করা হচ্ছে == AWS Amplify-এ আপনার ওয়েব অ্যাপ হোস্ট করতে, আপনাকে প্রথমে আপনার সোর্স কোড ধারণকারী রিপোজিটরি সংযোগ করতে হবে। এটি করতে, আপনি নেভিগেট করতে পারেন *AWS অ্যামপ্লিফাই* *শুরু করা* **আমার ওয়েব অ্যাপ হোস্ট করুন এবং **কানেক্ট অ্যাপ রেপো *পৃষ্ঠাতে ক্লিক করুন, স্ক্রোল করুন*পেজে, স্ক্রোল করুন![ ](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 ইনস্টল বিল্ড: আদেশ: - এনপিএম রান বিল্ড নিদর্শন: baseDirectory: বিল্ড নথি পত্র: - ক্যাশে: পথ: - নোড_মডিউল উপরন্তু, অধীনে **উন্নত সেটিংস** টগল, আপনি পরিবেশ ভেরিয়েবল এবং একটি কাস্টম বিল্ড কন্টেইনার সেট করতে পারেন। অবশেষে, আপনার আবেদনের সেটিংস পর্যালোচনা করার পরে, ক্লিক করুন **সংরক্ষণ করুন এবং স্থাপন করুন **এবং **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 আপনাকে একটি প্রদান করবে **ভ্যালিডেশন সার্টিফিকেট আপনি AWS সার্টিফিকেট ম্যানেজার কনসোলে এই শংসাপত্রটি দেখতে পারেন। == একটি CNAME রেকর্ড যোগ করা হচ্ছে == আপনার কাস্টম ডোমেন কনফিগার করার শেষ ধাপ হল একটি CNAME রেকর্ড যোগ করা। নিম্নলিখিত উদাহরণে আমি Google Domains ব্যবহার করি, কিন্তু মৌলিক ধারণাগুলি বিভিন্ন ডোমেন নিবন্ধকদের মধ্যে একই থাকে। প্রথমে নিচে স্ক্রোল করুন 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) সবশেষে, একটি যোগ করা যাক **সিন্থেটিক রেকর্ড** একটি সাবডোমেন ফরোয়ার্ড সেট আপ করতে: সাবডোমেন: ডোমেন URL লিখুন: www। ![ ](httpsmiro.medium.com/max/1400/1*xi6ivE7Vsfz9AheFAHxPZQ.png) = মোড়ানো আপ = সামগ্রিকভাবে, এই নিবন্ধে, আমরা শিখেছি কীভাবে প্রতিক্রিয়া অ্যাপ্লিকেশনগুলিকে গঠন করতে হয় এবং সেগুলিকে AWS Amplify দিয়ে স্থাপন করতে হয়। প্রথমত, আমরা আলোচনা করেছি কীভাবে একটি প্রতিক্রিয়া অ্যাপ্লিকেশনকে মডুলারাইজ করতে হয় *উপাদান* *পৃষ্ঠা* ফোল্ডার। তারপর, আমরা **AWS Amplify** সম্পর্কে শিখেছি এবং কীভাবে এটির সাথে স্ট্যাটিক এবং ডেটা-চালিত অ্যাপ্লিকেশন স্থাপন করতে হয়। অবশেষে, আমরা আমাদের অ্যাপ্লিকেশনের ডোমেন কাস্টমাইজ করতে **AWS Amplify ডোমেন ম্যানেজমেন্ট** এবং **Google Domains** ব্যবহার করার বিষয়ে শিখেছি। **এবং**এবং এই নিবন্ধটি বা আমার পোর্টফোলিও সাইটে আপনার যদি কোন প্রশ্ন, উদ্বেগ বা প্রতিক্রিয়া থাকে তবে নির্দ্বিধায় মন্তব্য করুন বা আমাকে ইমেল করুন *[email protected]*। পড়ার জন্য ধন্যবাদ!