میزبانی یک رابط کاربری سفارشی ورود و ثبت نام با AWS Amplify و AWS Cognito

Summarize this content to 400 words in Persian Lang
ما مراحل اتخاذ یک رابط کاربری (UI) برای ورود و ثبت نام سفارشی با استفاده از AWS Amplify و AWS Cognito را طی خواهیم کرد. AWS Amplify ابزار قدرتمندی است که چارچوب ساده‌سازی شده‌ای را برای توسعه و اجرای برنامه‌های مبتنی بر ابر ارائه می‌کند، در حالی که AWS Cognito احراز هویت ایمن را با مدیریت کاربر فراهم می‌کند. در پایان این راهنما، یک رابط کاربری برای ورود و ثبت نام سفارشی خواهید داشت که برای احراز هویت کاربر به AWS Cognito متصل شده است.

راهنمای گام به گام

با نصب AWS Amplify CLI به صورت سراسری بر روی سیستم خود شروع کنید. این به شما امکان می دهد از طریق خط فرمان با سرویس های Amplify تعامل داشته باشید.

npm install -g @aws-amplify/cli

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

AWS Amplify را پیکربندی کنید

Amplify CLI را با اعتبارنامه AWS خود تنظیم کنید. دستورات را دنبال کنید تا حساب AWS خود را پیکربندی کنید.

amplify configure

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Amplify را در پروژه خود راه اندازی کنید

یک پروژه Amplify را در برنامه React خود راه اندازی کنید.

amplify init

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

احراز هویت را با AWS Cognito اضافه کنید

با استفاده از AWS Cognito احراز هویت را به پروژه Amplify خود اضافه کنید.

amplify add auth

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

استقرار تغییرات

تغییرات خود را به ابر فشار دهید. این AWS Cognito و سایر منابع باطن را پیکربندی می کند.

amplify push

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بسته های مورد نیاز را نصب کنید

اجزای AWS Amplify و Amplify UI را برای React نصب کنید.

npm install aws-amplify @aws-amplify/ui-react

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

React Application خود را شروع کنید

برنامه React خود را به صورت محلی اجرا کنید.

npm start

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

یک مخزن Git را راه اندازی کنید

یک مخزن Git را راه اندازی کنید.

git init

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تغییرات خود را متعهد شوید

با یک پیام commit اولیه تغییرات خود را مرحله بندی و انجام دهید.

git add .
git commit -m “Initial commit”

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Git Branch را راه اندازی کنید

git branch -M main

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

به Remote Repository متصل شوید

یک URL مخزن راه دور به پیکربندی Git خود اضافه کنید.

git remote add origin

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تغییرات را به Remote Repository فشار دهید

تعهدات خود را به مخزن راه دور فشار دهید.

git push -u origin main

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

به AWS Amplify Console دسترسی پیدا کنید

وارد کنسول مدیریت AWS شوید.
به کنسول AWS Amplify بروید.

مخزن خود را وصل کنید

در کنسول Amplify، بر روی “شروع به کار” در بخش “استقرار” کلیک کنید.
ارائه دهنده مخزن خود را انتخاب کنید (به عنوان مثال، GitHub، GitLab، Bitbucket، AWS CodeCommit).
احراز هویت و مجوز AWS Amplify برای دسترسی به مخزن شما.

تنظیمات ساخت را پیکربندی کنید

مخزن مورد نظر برای اتصال را انتخاب کنید.
شاخه ای را که می خواهید مستقر کنید (معمولاً مستر) انتخاب کنید.

ذخیره و استقرار

روی “ذخیره و استقرار” کلیک کنید. AWS Amplify فرآیند استقرار، ساخت و استقرار برنامه شما را بر اساس پیکربندی ارائه شده آغاز می کند.

نتیجه گیری

با ادغام AWS Amplify با خط لوله CI/CD خود، فرآیند ساخت، آزمایش و استقرار برنامه React خود را خودکار می کنید. این راه‌اندازی گردش کار توسعه شما را ساده می‌کند و تضمین می‌کند که تغییرات سریع و قابل اعتماد در محیط زنده شما منعکس می‌شوند.

اگر به سفارشی سازی بیشتر نیاز دارید یا نیازهای خاصی دارید، برای اطلاعات دقیق تر در مورد تنظیمات پیشرفته CI/CD و بهترین شیوه ها، به مستندات AWS Amplify مراجعه کنید.

نموداری که گردش کار CI/CD را نشان می دهد.

npm install -g @aws-amplify/cli

amplify configure

amplify init

amplify add auth

amplify push

npm install aws-amplify @aws-amplify/ui-react

npm start

git init

git add .
git commit -m "Initial commit"

git branch -M main

git remote add origin 

git push -u origin main