من الصفر إلى بلا خادم: بناء تطبيق React باستخدام AWS Amplify
مقدمة
قد يكون نشر تطبيقات React مهمة شاقة. AWS Amplify يبسط هذه العملية من خلال توفير منصة شاملة لبناء ونشر التطبيقات بلا خادم. سيرشدك هذا الدليل خلال إنشاء تطبيق React أساسي ونشره على AWS Amplify في دقائق.
المتطلبات الأساسية
- Node.js و npm مثبتان
- حساب AWS
- تكوين AWS CLI
إنشاء تطبيق React
أولاً، لنقم بإنشاء تطبيق React جديد باستخدام Create React App:
npx create-react-app amplify-react-app
cd amplify-react-app
تهيئة Amplify
الآن، قم بتهيئة Amplify في مشروعك:
amplify init
اتبع التعليمات. اختر محرر النصوص المفضل لديك، و JavaScript، و React، وقم بتكوين ملف تعريف AWS، وما إلى ذلك.
إضافة المصادقة
لنضف المصادقة باستخدام Amplify Auth:
amplify add auth
اقبل التكوين الافتراضي للتبسيط (تسجيل الدخول باسم المستخدم / كلمة المرور).
بعد التكوين، قم بنشر التغييرات:
amplify push
سيؤدي ذلك إلى توفير موارد AWS اللازمة.
دمج المصادقة في React
قم بتثبيت مكتبات Amplify الضرورية:
npm install aws-amplify @aws-amplify/ui-react
قم بتكوين Amplify في ملف src/index.js
الخاص بك:
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
قم باستيراد مكونات @aws-amplify/ui-react
وقم بتغليف مكون App
الخاص بك بـ AmplifyProvider
. ثم استخدم مكون Authenticator
لإضافة المصادقة.
import { AmplifyProvider, Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
function App() {
return (
<AmplifyProvider>
<Authenticator>
{({ signOut, user }) => (
<main>
<h1>مرحبا {user.username}</h1>
<button onClick={signOut}>تسجيل الخروج</button>
</main>
)}
</Authenticator>
</AmplifyProvider>
);
}
export default App;
النشر على Amplify Hosting
أخيرًا ، انشر تطبيقك على Amplify Hosting:
amplify add hosting
اختر Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
واقبل الإعدادات الافتراضية.
ثم انشر:
amplify publish
سيقوم Amplify ببناء ونشر تطبيقك على عنوان URL فريد.
خاتمة
أوضح هذا الدليل كيفية إنشاء ونشر تطبيق React بسرعة مع المصادقة باستخدام AWS Amplify. يبسط Amplify عملية التطوير والنشر ، مما يسمح لك بالتركيز على بناء تطبيقك بدلاً من إدارة البنية التحتية.