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

بناء واجهات برمجة تطبيقات (APIs) عالية الأداء بدون خوادم باستخدام React و AWS Lambda

Majd Muhtaseb27‏/11‏/20258 دقيقة

مقدمة

تُحدث البنى بدون خوادم ثورة في طريقة بناء ونشر التطبيقات. يتيح لنا الجمع بين نهج React القائم على المكونات وقوة الحوسبة عند الطلب في AWS Lambda إنشاء واجهات برمجة تطبيقات (APIs) عالية الأداء وقابلة للتطوير دون الحاجة إلى إدارة الخوادم. تحدد هذه المقالة إعدادًا أساسيًا لواجهة React الأمامية التي تستهلك البيانات من وظيفة AWS Lambda التي تعمل كواجهة برمجة تطبيقات (API) بدون خادم.

إعداد وظيفة AWS Lambda

أولاً، لنقم بإنشاء وظيفة Lambda بسيطة في Node.js تُرجع استجابة JSON.

// index.js (دالة Lambda)
exports.handler = async (event) => {
  const response = {
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Origin": "*", // مطلوب لدعم CORS للعمل
      "Access-Control-Allow-Credentials": true, // مطلوب لملفات تعريف الارتباط وعناوين التفويض مع HTTPS
    },
    body: JSON.stringify({
      message: "مرحبا من Lambda!",
      data: [
        { id: 1, name: "العنصر 1" },
        { id: 2, name: "العنصر 2" },
      ],
    }),
  };
  return response;
};

اعتبارات مهمة:

• CORS: تأكد من أن وظيفة Lambda الخاصة بك تُرجع رؤوس CORS المناسبة (Access-Control-Allow-Origin) للسماح لتطبيق React الخاص بك بإجراء الطلبات. قم بتقييد الأصل في بيئة الإنتاج.
• النشر: انشر هذا الرمز كوظيفة Lambda في حساب AWS الخاص بك. لاحظ ARN لوظيفة Lambda.

إنشاء الواجهة الأمامية React

بعد ذلك، لنقم بإنشاء تطبيق React بسيط لجلب البيانات من وظيفة Lambda.

// App.js (مكون React)
import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(
        'YOUR_LAMBDA_FUNCTION_INVOKE_URL' // استبدل بعنوان URL الخاص باستدعاء وظيفة Lambda الخاصة بك
      );
      const jsonData = await response.json();
      setData(jsonData.data);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>البيانات من Lambda:</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

شرح:

• fetch(): يتم استخدام واجهة برمجة تطبيقات fetch لتقديم طلب GET إلى عنوان URL الخاص باستدعاء وظيفة Lambda الخاصة بك. يتم الحصول على عنوان URL هذا بعد نشر وظيفة Lambda الخاصة بك.
• useState و useEffect: يدير الخطاف useState حالة البيانات المستلمة من واجهة برمجة التطبيقات (API). تضمن useEffect جلب البيانات مرة واحدة فقط عند تحميل المكون.
• عرض البيانات: يتم بعد ذلك تعيين البيانات التي تم جلبها لعرض قائمة بالعناصر.

تأمين واجهة برمجة التطبيقات (API) الخاصة بك

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

• API Gateway: ضع API Gateway أمام وظيفة Lambda الخاصة بك لإدارة المصادقة والترخيص وتحديد المعدل ومخاوف أمنية أخرى.
• المصادقة: قم بتنفيذ آليات المصادقة مثل مفاتيح API أو رموز JWT أو AWS Cognito للتحقق من هوية العملاء الذين يصلون إلى واجهة برمجة التطبيقات (API) الخاصة بك.
• الترخيص: قم بتنفيذ الترخيص لتقييد الوصول إلى موارد معينة بناءً على أدوار المستخدم أو الأذونات.

خاتمة

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