العودة للمقالات

بناء تطبيق React بلا خادم باستخدام AWS Amplify في أقل من ساعة

Majd Muhtaseb21‏/07‏/202515 دقيقة

مقدمة

AWS Amplify يبسّط عملية بناء ونشر تطبيقات الويب والهواتف المحمولة المدعومة بالخدمات السحابية. هذا الدليل يرشدك خلال إنشاء تطبيق React أساسي ونشره كتطبيق بلا خادم باستخدام Amplify - كل ذلك في أقل من ساعة!

المتطلبات الأساسية

• حساب AWS
• تثبيت Node.js و npm
• معرفة أساسية بـ React

الخطوة 1: إنشاء تطبيق React

أولاً، قم بإنشاء تطبيق React جديد باستخدام Create React App:

npx create-react-app my-amplify-app
cd my-amplify-app

الخطوة 2: تهيئة Amplify

قم بتثبيت Amplify CLI:

npm install -g @aws-amplify/cli

قم بتهيئة Amplify عن طريق تشغيل:

amplify configure

سيقودك هذا خلال إعداد ملف تعريف AWS بأذونات مناسبة.

قم بتهيئة Amplify في مشروعك:

amplify init

اتبع التعليمات لتكوين مشروعك. اختر المحرر المفضل لديك و JavaScript و React واقبل القيم الافتراضية لمعظم الخيارات.

الخطوة 3: إضافة المصادقة

أضف المصادقة إلى تطبيقك:

amplify add auth

اختر التكوين الافتراضي مع تسجيل الدخول عبر البريد الإلكتروني.

ادفع التغييرات إلى AWS:

amplify push

سيؤدي هذا إلى إنشاء موارد AWS الضرورية (مجموعة مستخدمي Cognito) للمصادقة.

الخطوة 4: دمج المصادقة في تطبيق React الخاص بك

قم بتثبيت مكتبات Amplify:

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

قم بتكوين Amplify في src/index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
Amplify.configure(awsExports);


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

قم بإنشاء أو تعديل src/App.js لتضمين مكونات المصادقة:

import React, { useState, useEffect } from 'react';
import { withAuthenticator, Button, Heading } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

function App({ signOut, user }) {
  return (
    <div className="App">
      <Heading level={1}>مرحباً {user.username}</Heading>
      <Button onClick={signOut}>تسجيل الخروج</Button>
    </div>
  );
}

export default withAuthenticator(App);

الخطوة 5: نشر التطبيق

انشر تطبيقك باستخدام:

amplify publish

سيقوم Amplify ببناء تطبيقك ونشره في حاوية AWS S3 مع CloudFront CDN للتوزيع.

خاتمة

لقد نجحت في إنشاء ونشر تطبيق React بلا خادم مع المصادقة باستخدام AWS Amplify في وقت قصير. تقدم Amplify العديد من الميزات الأخرى مثل واجهات برمجة تطبيقات GraphQL والتخزين والوظائف. استكشفها لبناء تطبيقات أقوى!