0Pricing
React Academy · درس

استضافة React SPA على AWS S3 وCloudFront

أنشئ تطبيق React وارفعه إلى S3 واضبط توزيعة CloudFront وأبطِل التخزين المؤقت.

استضافة React SPA على AWS S3 وCloudFront درس مجاني في React Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.

نظرة عامة على الاستضافة الثابتة باستخدام S3

يمكن لـ AWS S3 تقديم الملفات الثابتة (HTML وJS وCSS والصور) كموقع ويب. وبدمجه مع CloudFront (CDN)، تحصل على توزيع عالمي وHTTPS وزمن استجابة منخفض لتطبيقات React أحادية الصفحة.

بناء تطبيق SPA

ابنِ تطبيق React إلى مجلد مخرجات ثابت.

# Vite:
npm run build  # outputs to dist/

# Create React App:
npm run build  # outputs to build/

# Next.js static export:
next build && next export  # outputs to out/

إنشاء حاوية S3 وإعدادها

أنشئ حاوية S3، وفعّل استضافة المواقع الثابتة، وحدّد مستند الفهرس ومستند الخطأ.

# Create bucket (replace with your domain name):
aws s3 mb s3://my-react-app.com

# Enable static hosting:
aws s3 website s3://my-react-app.com --index-document index.html --error-document index.html
# Error doc = index.html handles client-side routing (React Router)

رفع ملفات البناء

زامن مخرجات البناء مع S3. عيّن رؤوس ذاكرة مؤقتة طويلة للأصول التي تتضمن تجزئة، وامنع التخزين المؤقت للملف index.html.

# Upload hashed assets with long cache:
aws s3 sync dist/ s3://my-react-app.com/ \
  --exclude index.html \
  --cache-control "max-age=31536000,immutable"

# Upload index.html with no cache (always fresh):
aws s3 cp dist/index.html s3://my-react-app.com/index.html \
  --cache-control "no-cache,no-store"

إنشاء توزيع CloudFront

أنشئ توزيع CloudFront يشير إلى حاوية S3. استخدم نقطة نهاية موقع S3 (وليس نقطة نهاية REST) لدعم توجيه تطبيقات SPA.

# In AWS console or CDK:
# Origin: my-react-app.com.s3-website-us-east-1.amazonaws.com
# Default root object: index.html
# Viewer protocol: Redirect HTTP to HTTPS
# Error pages: 403 → /index.html (200) for SPA routing

إصلاح توجيه SPA

يعيد CloudFront الحالة 403 للمسارات غير المعروفة (فـ S3 لا يعرف مسارات React). اضبط استجابة خطأ مخصصة: 403 ← /index.html مع الحالة 200.

النطاق المخصص وSSL

اطلب شهادة ACM لنطاقك في us-east-1 (وهو أمر مطلوب لـ CloudFront). أرفقها بالتوزيع وأضف سجل DNS من نوع CNAME يشير إلى نطاق CloudFront.

إبطال الذاكرة المؤقتة عند النشر

بعد نشر الملفات الجديدة، أبطِل ذاكرة CloudFront المؤقتة للملف index.html (لأنه غير مخزّن مؤقتًا في S3، لكنه قد يكون مخزّنًا مؤقتًا في CloudFront).

aws cloudfront create-invalidation \
  --distribution-id EXXXXXXXXXXXXX \
  --paths "/*"

النشر باستخدام GitHub Actions

أتمت سير عمل النشر في CI: البناء ← المزامنة مع S3 ← إبطال ذاكرة CloudFront المؤقتة.

- name: Deploy to S3
  run: aws s3 sync dist/ s3://my-react-app.com/ --delete
  env:
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_KEY_ID }}
    AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET }}

- name: Invalidate CloudFront
  run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_ID }} --paths "/*"

سياسة حاوية S3

احظر الوصول العام إلى الحاوية واستخدم سياسة Origin Access Control (OAC) بحيث لا يتمكن من قراءة الحاوية سوى CloudFront — وهذا أكثر أمانًا من استضافة حاوية عامة.

تقدير التكلفة

استضافة S3 الثابتة منخفضة التكلفة جدًا: نحو 0.023 دولارًا لكل جيجابايت من التخزين، ونحو 0.0004 دولار لكل 1000 طلب. تختلف تكلفة CloudFront حسب المنطقة ونقل البيانات، لكنها مجانية لأول 1 تيرابايت شهريًا ضمن الطبقة المجانية.

تحقق سريع

لماذا ينبغي ضبط مستند الخطأ في S3 على index.html عند استضافة تطبيق React أحادي الصفحة؟

مراجعة

ابنِ تطبيق SPA، وزامن مخرجاته مع S3 باستخدام تخزين مؤقت مقسّم (تخزين طويل للأصول التي تتضمن تجزئة، ومنع التخزين المؤقت للملف index.html)، ثم قدّمه عبر CloudFront. أصلح توجيه SPA عبر تحويل أخطاء 403 إلى /index.html. وأتمت النشر باستخدام GitHub Actions وأبطِل ذاكرة CloudFront المؤقتة مع كل عملية نشر.

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

هل درس «استضافة React SPA على AWS S3 وCloudFront» مجاني؟

نعم — نص درس «استضافة React SPA على AWS S3 وCloudFront» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.

ماذا ستتعلم في «استضافة React SPA على AWS S3 وCloudFront»؟

أنشئ تطبيق React وارفعه إلى S3 واضبط توزيعة CloudFront وأبطِل التخزين المؤقت. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟

لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «استضافة React SPA على AWS S3 وCloudFront»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟

نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. النشر إلى Vercel: دون إعداد وعناوين URL للمعاينة
  2. استضافة React SPA على AWS S3 وCloudFront
  3. وضع تطبيق React/Next.js داخل Docker
  4. ‏CI/CD لـ React باستخدام GitHub Actions
← العودة إلى React Academy