بناء تطبيق React متكامل باستخدام AWS Amplify

ملخص المسار

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

المتطلبات الأساسية وتثبيت الأدوات (محليًا)

العناصر الضرورية على جهاز التطوير:

• نود.جي اس (>=14) و npm أو yarn
• جيت
• واجهة سطر الأوامر Amplify

أمثلة على أوامر تثبيت Amplify CLI:

npm install -g @aws-amplify/cli
# or
yarn global add @aws-amplify/cli

للإعداد الأولي:

amplify configure

إنشاء تطبيق React

لبدء مشروع React، يمكنك استخدام Create React App أو Vite. مثال باستخدام Create React App:

npx create-react-app my-amplify-app
cd my-amplify-app
git init
git add .
git commit -m "initial commit"

تثبيت مكتبات Amplify في المشروع:

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

إضافة الواجهة الخلفية باستخدام Amplify

في مجلد المشروع، قم أولاً بتهيئة Amplify:

amplify init

المعايير المهمة في تضخيم التهيئة يتضمن اسم البيئة (على سبيل المثال) dev), المحرر، الإطار (جافا سكريبت، رياكت)، مسارات المصدر والبناء، وأوامر البناء/البدء.

1) المصادقة (Auth)

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

amplify add auth

الإمكانيات: التكوين الافتراضي (اسم المستخدم)، والتكوين اليدوي لموفري الخدمات الاجتماعية (جوجل، فيسبوك) أو الاتحاد مع مجموعة هوية Cognito.

2) واجهة برمجة التطبيقات (GraphQL أو REST)

بالنسبة لـ GraphQL:

amplify add api

اختيار GraphQL ومخطط نموذجي:

type Todo @model {
  id: ID!
  title: String!
  completed: Boolean!
}

بالنسبة لـ REST (بوابة API + Lambda):

amplify add api
# choose REST
# then add function for endpoint

3) دوال لامدا

للمعالجة الثقيلة أو Webhooks:

amplify add function

اللغة: Node.js أو Python. النوع: دالة Lambda (CRUD، معالج).

4) تخزين الملفات (التخزين)

لإضافة خدمة S3 لتحميل الملفات:

amplify add storage

النوع: محتوى (صور، ملفات).

بعد إضافة الخدمات المطلوبة، قم بتطبيق التغييرات:

amplify push

يقوم هذا الأمر بإنشاء موارد سحابية مثل Cognito و AppSync و Lambda و S3 وحفظ ملف التكوين في src/aws-exports.js إنه يضع.

ربط الواجهة الأمامية بالواجهة الخلفية

في الملف src/index.js أو App.js أضف إعدادات Amplify:

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

مثال على استخدام المصادقة:

import { Auth } from "aws-amplify";
// Sign up
await Auth.signUp({ username, password, attributes: { email } });
// Sign in
await Auth.signIn(username, password);

مثال على استخدام GraphQL:

import { API, graphqlOperation } from "aws-amplify";
import { listTodos } from "./graphql/queries";
const result = await API.graphql(graphqlOperation(listTodos));

نصائح أمنية وأفضل الممارسات

نصائح أمنية أساسية:

• مبدأ أقل الامتيازات راقب؛ امنح الأذونات الضرورية فقط لأدوار إدارة الهوية والوصول (IAM).
• استخدام مدير أسرار AWS أو مدير الأنظمة - مخزن المعلمات للحفاظ على الأسرار.
• قم بتمكين المصادقة متعددة العوامل لمستخدمي إدارة الهوية والوصول (IAM) الذين لديهم صلاحيات وصول حساسة.
• قم بتمكين HTTPS و HSTS، واستخدم جدار حماية تطبيقات الويب (WAF) وتحديد معدل الطلبات للحماية من هجمات الطبقة 7.
• التشفير أثناء التخزين وأثناء النقل للخدمات.
• تطبيق قيود CORS وسياسة أمان المحتوى في تطبيق React.

النشر والتكامل المستمر/التسليم المستمر

هناك طريقتان رئيسيتان للنشر:

الطريقة الأولى: وحدة تحكم Amplify

أسهل طريقة: أنشئ تطبيقًا جديدًا في وحدة تحكم Amplify وقم بربط مستودع GitHub/GitLab/Bitbucket الخاص بك. سيقوم Amplify تلقائيًا بإنشاء مسار عمل للبناء -> الاختبار -> النشر.

ملف عينة ملف amplify.yml لمشروع CRA:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

قم بتعيين متغيرات البيئة والأسرار في قسم إعدادات البناء.

الطريقة الثانية: التكامل المستمر/التسليم المستمر الخارجي + واجهة برمجة تطبيقات استضافة Amplify

يمكنك البناء باستخدام GitLab CI/CD أو GitHub Actions ودفع ملف البناء إلى S3 + CloudFront أو استخدام Amplify Hosting API.

اتصال النطاق وشبكة توصيل المحتوى (CDN)

تتيح وحدة تحكم Amplify الاتصال بالنطاق وتكوين SSL تلقائيًا عبر مدير شهادات AWS لقد كان كذلك.

بالنسبة لنظام أسماء النطاقات (DNS)، يمكنك استخدام الطريق 53 أو استخدم خدمات خارجية مع شبكة توصيل المحتوى Anycast ومواقع طرفية متعددة. يُعد استخدام شبكة توصيل المحتوى (CloudFront أو شبكة توصيل محتوى خارجية) أمرًا ضروريًا لتقليل زمن الاستجابة وزيادة سرعة التحميل.

الاستقرار، زمن الاستجابة، واختيار الموقع

لتقليل زمن استجابة واجهة برمجة التطبيقات، اختر المنطقة المناسبة واستخدم خوادم وحدة معالجة الرسومات أو الخوادم المخصصة مع الاتصال كخلفية غير خادمية إذا كانت هناك حاجة إلى معالجة مكثفة.

بالنسبة للمتداولين أو اللاعبين، تُعدّ مدن مثل لندن وفرانكفورت ونيويورك خيارات جيدة لتقليل زمن الاستجابة. كما يُنصح باستخدام خادم مضاد لهجمات DDoS في الحالات الحساسة.

مثال: استخدام الحوسبة السحابية لوحدات معالجة الرسومات لمعالجة البيانات من جانب الخادم

إذا كان تطبيقك يتطلب استنتاج نماذج التعلم الآلي:

• بالنسبة للنماذج الخفيفة، استخدم Lambda، أما بالنسبة للنماذج الثقيلة، فاستخدم خدمة على خادم GPU.
• قم بإنشاء نقطة نهاية آمنة (HTTPS) واستدعها من React باستخدام fetch أو axios.
• إذا كنت بحاجة إلى اتصال فوري، فاستخدم WebSocket.

المراقبة والتسجيل واستكشاف الأخطاء وإصلاحها

الأدوات المقترحة:

• مقاييس وتنبيهات CloudWatch لـ Lambda و API Gateway و AppSync.
• قم بتفعيل خدمة AWS X-Ray لتتبع الطلبات.
• راجع سجلات S3 وسجلات CloudFront.
• التكامل مع خدمات الطرف الثالث مثل Sentry لتصحيح أخطاء الواجهة الأمامية.

تحسين التكاليف

توصيات لخفض التكاليف:

• استخدم موارد بدون خادم (Lambda، AppSync) لتقليل تكاليف الخمول.
• بالنسبة للأحمال المستمرة، استخدم خوادم سحابية أو خوادم افتراضية خاصة (VPS) مع التكوين المناسب.
• قم بتمكين التوسع التلقائي واستخدم النسخ المحجوزة أو خطط التوفير لتقليل التكاليف على المدى الطويل.
• استخدم شبكة توصيل المحتوى (CDN) والتخزين المؤقت لتقليل الطلبات إلى الواجهة الخلفية.

نصائح عملية لفرق DevOps ومديري الشبكات

الاستراتيجيات:

• البنية التحتية كبرنامج: استخدم CloudFormation أو Terraform أو backend-config الخاص بـ Amplify لإصدارات البنية التحتية.
• إذا كنت بحاجة إلى اتصال خاص، فقم بإعداد وظائف Lambda باستخدام VPC واستخدم بوابة عبور أو VPN.
• ضبط إعدادات قوائم التحكم بالوصول ومجموعات الأمان بدقة.
• إذا كنت بحاجة إلى استضافة GitLab أو تحكم كامل في Runners، فمن الممكن استضافة GitLab على خدمات مخصصة.

قائمة التحقق قبل بدء الإنتاج

• تم اختبار المصادقة والتفويض (Cognito، سياسات إدارة الهوية والوصول)
• تم تفعيل بروتوكول HTTPS وشهادة SSL
• التسجيل والمراقبة النشطة
• تحديد معدل نقل البيانات وتكوين جدار حماية تطبيقات الويب
• تم تكوين CORS وCSP على الواجهة الأمامية
• استراتيجية النسخ الاحتياطي والاستعادة (إصدارات S3، اللقطات)
• اختبار التحميل وتحسين الأداء

الخلاصة والملخص

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

بالنسبة للمشاريع التي تتطلب معالجة مكثفة أو زمن استجابة منخفض، يمكن أن يكون الجمع بين Amplify وخوادم السحابة أو GPU Cloud أو VPS المخصص حلاً مثالياً.

الأسئلة الشائعة