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

بناء تطبيق رياكت بدون خادم باستخدام AWS Amplify

Majd Muhtaseb15‏/10‏/202512 دقيقة

مقدمة

AWS Amplify هو إطار عمل ومنصة قوية تبسط بناء ونشر تطبيقات الويب والجوال المدعومة بالسحابة. في هذا البرنامج التعليمي، سنستعرض إنشاء تطبيق رياكت بسيط ونشره بدون خادم باستخدام Amplify.

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

• حساب AWS
• تثبيت Node.js و npm
• تثبيت وتكوين Amplify CLI: npm install -g @aws-amplify/cli و amplify configure

إنشاء تطبيق رياكت

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

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

تهيئة Amplify

الآن، قم بتهيئة Amplify داخل مشروعك:

amplify init

اتبع المطالبات في CLI لتكوين مشروعك. اختر الإعدادات الافتراضية المنطقية لاسم مشروعك وبيئتك ومحررك. عند مطالبتك باختيار طريقة مصادقة، حدد "ملف تعريف AWS" إذا قمت بتكوين AWS CLI الخاص بك.

إضافة المصادقة

لنضف المصادقة إلى تطبيقنا باستخدام Amazon Cognito:

amplify add auth

اختر التكوين الافتراضي لإعداد سهل. بعد التكوين، ادفع التغييرات إلى AWS:

amplify push

سيؤدي ذلك إلى توفير الموارد الضرورية في حساب AWS الخاص بك.

دمج المصادقة في رياكت

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

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

استورد الوحدات النمطية الضرورية في ملف src/App.js الخاص بك:

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

import awsExports from './aws-exports';
Amplify.configure(awsExports);


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

export default withAuthenticator(App);

قم بتكوين Amplify مع صادرات AWS الخاصة بمشروعك. توجد هذه في src/aws-exports.js. يعالج المكون ذو الترتيب الأعلى withAuthenticator تدفق المصادقة، ويعرض نموذج تسجيل/تسجيل الدخول إذا لم يكن المستخدم مصادقًا.

نشر التطبيق

انشر تطبيقك على AWS Amplify Hosting:

amplify add hosting

اختر خيار "الاستضافة مع Amplify Console"، ثم حدد الإعدادات الافتراضية للمطالبات المتبقية. أخيرًا ، انشر:

amplify push

amplify publish

سيقوم Amplify ببناء ونشر تطبيقك على عنوان URL فريد. سترى عنوان URL في إخراج وحدة التحكم.

خاتمة

في هذا البرنامج التعليمي، تعلمنا كيفية إنشاء تطبيق رياكت بسيط ونشره بدون خادم باستخدام AWS Amplify. يبسط Amplify عملية التطوير والنشر بشكل كبير، مما يسمح لك بالتركيز على بناء ميزات تطبيقك. يمكنك توسيع هذا إلى أبعد من ذلك عن طريق إضافة واجهات برمجة تطبيقات وقواعد بيانات والمزيد ، وكل ذلك تديره Amplify.