دليل النشر — CyberShield AI

🐙
إنشاء مستودع GitHub

لماذا GitHub؟ Render.com يقرأ كودك مباشرة من GitHub ويُشغّل Backend تلقائياً عند كل تحديث.

1

أنشئ حساباً على GitHub

إذا لم يكن لديك حساب، اذهب إلى github.com وسجّل (مجاني).

2

أنشئ مستودعاً جديداً

بعد الدخول: New → Repository name: cybershield-ai → Private → Create repository

اختر Private لأن الكود يحتوي على معلومات حساسة.

3

تأكد من وجود ملف .gitignore

تحقق أن ملف .gitignore من الجزء 1 موجود في C:\Projects\cybershield\

4

ارفع الكود إلى GitHub

افتح PowerShell في C:\Projects\cybershield\ وشغّل:

git init git add . git commit -m "CyberShield AI - initial deployment" git branch -M main git remote add origin https://github.com/USERNAME/cybershield-ai.git git push -u origin main

استبدل USERNAME باسم حسابك على GitHub

5

تحقق من الرفع

اذهب إلى github.com/USERNAME/cybershield-ai — يجب أن ترى ملفات المشروع.

🗄️
تفعيل MySQL عن بُعد في cPanel

هذه الخطوة ضرورية حتى يتمكن Render.com (الخادم الخارجي) من الاتصال بقاعدة بياناتك على storismo.com

1

افتح cPanel → Remote MySQL

في لوحة cPanel اذهب إلى قسم Databases ثم اضغط Remote MySQL

2

أضف "%" كهوست مسموح له

في حقل Host اكتب: % ثم اضغط Add Host

الرمز % يعني "السماح لأي IP" — مناسب لـ Render لأن IP يتغيّر. يمكن تضييقه لاحقاً.

3

ابحث عن اسم الخادم (MySQL Host)

في cPanel اذهب إلى MySQL Databases أو Email Accounts أو راجع بريد الترحيب من الاستضافة. ابحث عن شيء مثل:

server123.storismo.com
أو
mysql.storismo.com
أو
localhost (إذا كان Backend على نفس الاستضافة)

احفظ هذا الاسم — ستحتاجه في الخطوة التالية

4

جهّز رابط قاعدة البيانات الكامل

استبدل REMPLACER_PAR_HOST باسم الخادم الذي وجدته:

mysql+pymysql://storism1_user_rahim:%3Df0hRYXc65GGq%2B1K@REMPLACER_PAR_HOST:3306/storism1_rahim?charset=utf8mb4

⚠️ لا تغيّر كلمة المرور المشفّرة!
كلمة مرورك الأصلية: =f0hRYXc65GGq+1K
في الرابط مشفّرة إلى: %3Df0hRYXc65GGq%2B1K (= → %3D، + → %2B)

5

احفظ الرابط الكامل

ستنسخه لاحقاً إلى Render.com كـ Environment Variable.

⚡
نشر Backend على Render.com

Render.com مجاني ولا يحتاج SSH من طرفك — يقرأ الكود من GitHub مباشرة.

1

إنشاء حساب Render

اذهب إلى render.com واضغط Get Started for Free
اختر Sign in with GitHub (الأسهل — يربط الحسابين مباشرة)

2

إنشاء Web Service جديد

بعد الدخول: New → Web Service

3

ربط مستودع GitHub

اختر Connect account ← اختر مستودع cybershield-ai
إذا لم يظهر: Configure account → اختر الـ repo

4

إعداد الخدمة

الحقل	القيمة
Name	`cybershield-backend`
Region	Frankfurt (EU) — الأقرب للجزائر
Branch	main
Runtime	Docker
Dockerfile Path	./backend/Dockerfile
Docker Context	./backend
Plan	Free

5

إضافة Environment Variables

اضغط Advanced → Add Environment Variable وأضف هذه المتغيرات:

Key	Value
DATABASE_URL	الرابط الذي جهّزته في الخطوة السابقة
SECRET_KEY	اضغط "Generate" — Render يولّدها
DEBUG	false
ALLOWED_ORIGINS	["https://netsecure.storismo.com"]
FIRST_SUPERUSER_EMAIL	admin@cybershield.io
FIRST_SUPERUSER_PASSWORD	ChangeMe123!
ACCESS_TOKEN_EXPIRE_MINUTES	60

6

اضغط "Create Web Service"

Render يبدأ البناء تلقائياً — انتظر 3-5 دقائق حتى تظهر:

==> Build successful 🎉 ==> Starting service with 'uvicorn app.main:app...' INFO: Application startup complete.

7

احفظ رابط Backend

Render سيعطيك رابطاً مثل:

https://cybershield-backend.onrender.com

احتفظ بهذا الرابط — ستحتاجه للخطوة التالية

8

حدّث .env.production في Frontend

افتح C:\Projects\cybershield\frontend\.env.production وعدّل:

VITE_API_URL=https://cybershield-backend.onrender.com

استبدل بالرابط الفعلي الذي حصلت عليه من Render

9

أعد بناء Frontend

cd C:\Projects\cybershield\frontend npm run build

📁
رفع Frontend على storismo.com

ملفات dist/ هي ملفات ثابتة (HTML/CSS/JS) — تعمل على أي استضافة بدون أي إعداد إضافي.

1

افتح cPanel → File Manager

في لوحة cPanel اضغط File Manager

2

اذهب إلى مجلد النطاق الفرعي

ابحث عن المجلد المرتبط بـ netsecure.storismo.com — عادةً يكون:

public_html/netsecure
أو
public_html/netsecure.storismo.com

إذا لم يكن النطاق الفرعي موجوداً بعد:
cPanel → Subdomains → أنشئ netsecure.storismo.com → Document Root: public_html/netsecure

3

احذف المحتوى القديم (إن وُجد)

إذا كان المجلد يحتوي على ملفات قديمة — احذفها كلها أولاً.

4

ارفع محتوى مجلد dist/

في File Manager اضغط Upload ثم ارفع محتوى المجلد (وليس المجلد نفسه):

C:\Projects\cybershield\frontend\dist\

⚠️ مهم: ارفع محتوى dist/ (الملفات الداخلية) وليس مجلد dist/ نفسه.
يجب أن يكون index.html مباشرةً داخل مجلد netsecure.

البنية الصحيحة بعد الرفع:

public_html/netsecure/ ├── index.html ✅ ├── .htaccess ✅ ├── _redirects ✅ └── assets/ ├── index-xxx.js └── index-xxx.css

5

طريقة بديلة — ZIP ثم استخراج

إذا كانت الملفات كثيرة، يمكنك ضغطها ثم رفعها:

cd C:\Projects\cybershield\frontend\dist # ضغط المحتوى (PowerShell) Compress-Archive -Path .\* -DestinationPath frontend_dist.zip

ارفع frontend_dist.zip إلى المجلد في File Manager ثم اضغط Extract

✅
الاختبار والتحقق النهائي

1

اختبار Backend

افتح في المتصفح:

https://cybershield-backend.onrender.com/api/v1/health

يجب أن ترى:

{"status": "healthy", "app": "CyberShield AI"}

2

اختبار Frontend

افتح:

https://netsecure.storismo.com

يجب أن تظهر صفحة تسجيل الدخول لـ CyberShield AI

3

الحقل	القيمة
Email	admin@cybershield.io
Password	ChangeMe123!

اختبار Swagger API

https://cybershield-backend.onrender.com/docs

يجب أن تظهر صفحة توثيق API الكاملة.

🔧 حل المشاكل الشائعة

المشكلة	الحل
صفحة 404 عند تحديث المتصفح	تأكد أن `.htaccess` مرفوع في نفس مجلد `index.html`
CORS error في Console	تأكد أن `ALLOWED_ORIGINS` في Render يحتوي على رابط موقعك بالضبط
Backend لا يتصل بـ MySQL	تأكد من تفعيل Remote MySQL في cPanel وصحة رابط DATABASE_URL
Render يعطي خطأ Build	تحقق من Logs في Render Dashboard للسطر الذي يحتوي على ERROR
الموقع بطيء عند أول طلب	طبيعي — الخطة المجانية تُوقف البيئة بعد 15 دقيقة من عدم الاستخدام

✅ قائمة التحقق النهائية

✓
كود المشروع مرفوع على GitHub
✓
Remote MySQL مفعّل في cPanel
✓
DATABASE_URL محدّث بـ Host الصحيح
✓
Backend مُنشر على Render ويعطي "startup complete"
✓
VITE_API_URL محدّث برابط Render في .env.production
✓
npm run build نجح وأنشأ مجلد dist/
✓
ملفات dist/ مرفوعة على netsecure.storismo.com
✓
ملف .htaccess موجود مع ملفات dist/
✓
تسجيل الدخول يعمل على https://netsecure.storismo.com

🎉 مبروك! CyberShield AI أصبح متاحاً على الإنترنت!
netsecure.storismo.com

🛡️ CyberShield AI — دليل النشر الكامل

🐙 إنشاء مستودع GitHub