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

من الصفر إلى الإنتاج: بناء تطبيق كامل باستخدام React و TypeScript ووظائف Serverless

Majd Muhtaseb06‏/05‏/202515 دقيقة

مقدمة

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

إعداد واجهة React الأمامية

سنبدأ بتطبيق React أساسي تم تهيئته باستخدام Create React App وتهيئته لـ TypeScript.

npx create-react-app my-app --template typescript
cd my-app

بعد ذلك، لنقم بإنشاء مكون بسيط لجلب البيانات من خادم serverless الخلفي الخاص بنا.

// src/components/DataDisplay.tsx
import React, { useState, useEffect } from 'react';

interface Data {
  message: string;
}

const DataDisplay: React.FC = () => {
  const [data, setData] = useState<Data | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/.netlify/functions/hello'); // استبدل بعنوان URL للدالة الخاصة بك
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
      } catch (e) {
        setError((e as Error).message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <p>جاري التحميل...</p>;
  if (error) return <p>خطأ: {error}</p>;

  return (
    <div>
      {data && <p>رسالة من الخادم: {data.message}</p>}
    </div>
  );
};

export default DataDisplay;

إنشاء خادم Serverless الخلفي (AWS Lambda)

بالنسبة للخادم الخلفي الخاص بنا، سنستخدم AWS Lambda و Serverless Framework لإنشاء دالة "Hello World" بسيطة. أولاً، تحتاج إلى حساب AWS و Serverless Framework مثبتًا.

npm install -g serverless

قم بإنشاء ملف serverless.yml في جذر مشروعك (خارج الدليل my-app):

# serverless.yml
service: my-serverless-app

provider:
  name: aws
  runtime: nodejs18.x
  region: us-east-1 # استبدل بمنطقتك المفضلة
  iamRoleStatements:
    - Effect: "Allow"
      Action:
        - "dynamodb:GetItem"
        - "dynamodb:PutItem" # مثال للإجراء. أزله إذا لم يكن مطلوبًا
      Resource: "arn:aws:dynamodb:${aws:region}:${aws:accountId}:table/YOUR_TABLE_NAME" # مثال على المورد. استبدل بـ ARN لجدول DynamoDB الخاص بك

functions:
  hello:
    handler: handler.hello
    events:
      - http:
          path: hello
          method: get
          cors: true

الآن، قم بإنشاء ملف handler.js:

// handler.js
exports.hello = async (event) => {
  return {
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Origin": "*", // مطلوب لدعم CORS للعمل
      "Access-Control-Allow-Credentials": true, // مطلوب لملفات تعريف الارتباط ورؤوس التفويض مع HTTPS
    },
    body: JSON.stringify({
      message: "مرحبا من دالة serverless الخاصة بك!",
    }),
  };
};

انشر الدالة الخاصة بك باستخدام Serverless Framework:

serverless deploy

لاحظ عنوان URL الخاص بالدالة المنشورة، وستحتاج إليه للتطوير إذا كنت لا تستخدم وكيلًا أثناء التطوير.

دمج الواجهة الأمامية والخلفية

قم بتحديث استدعاء fetch لمكون React الخاص بك للإشارة إلى نقطة نهاية API Gateway التي تم إنشاؤها بواسطة Serverless. إذا كنت تستخدم netlify dev (أو ما شابه ذلك)، فاستخدم /.netlify/functions/hello. إذا لم يكن الأمر كذلك، فاستخدم عنوان URL الذي تم إنشاؤه بواسطة AWS للتطوير.

نشر

يمكنك نشر واجهة React الأمامية باستخدام Netlify أو Vercel أو منصات مماثلة. يعالج Serverless Framework نشر الخادم الخلفي. تذكر تهيئة متغيرات البيئة لعناوين URL لنقاط نهاية API الخاصة بك.

خاتمة

توفر هذه المقالة أساسًا لبناء تطبيقات كاملة باستخدام React و TypeScript ووظائف serverless. يوفر هذا النهج قابلية التوسع وفعالية التكلفة وسير عمل تطوير مبسط. استكشف المزيد عن طريق إضافة قواعد البيانات والمصادقة ومنطق الأعمال الأكثر تعقيدًا إلى وظائف serverless الخاصة بك. تذكر تعديل دور IAM وفقًا لاحتياجاتك.