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

من الصفر إلى بلا خادم: بناء تطبيق React باستخدام AWS Amplify

Majd Muhtaseb16‏/05‏/202512 دقيقة

مقدمة

قد يكون نشر تطبيقات 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 عملية التطوير والنشر ، مما يسمح لك بالتركيز على بناء تطبيقك بدلاً من إدارة البنية التحتية.