تطبيق شامل متعدد الطبقات والميزات مبني باستخدام Nuxt 4، يحتوي على ميزات الاتصال الفوري (websocket)، التحقق من المستخدم (auth)، ويدعم العديد من المنصات. لمزيد من المعلومات التفصيلية، راجع وثائق Nuxt.
- المتطلبات الأساسية
- الشروع في العمل
- التطوير
- تكوين البيئة
- إعداد Docker
- البناء للإنتاج
- تطبيق الجوال
- تطبيق Electron (تطبيقات الحاسوب)
- تطبيق Electrobun (تطبيقات الحاسوب الحديثة)
- تشغيل الموقع النهائي
- خادم البريد
- تأمين الموقع
- استكشاف الأخطاء وإصلاحها
قبل الشروع في هذا المشروع، تأكد من أن لديك الأدوات التالية مثبتة على نظامك:
- Docker و Docker Compose
- pnpm مدير الحزم (موصى به)
- Bun بيئة تشغيل JavaScript (بديل)
- Git نظام التحكم في الإصدار
تثبيت Docker:
# تنزيل وتشغيل البرنامج النصي الرسمي لتثبيت Docker
curl -fsSL https://get.docker.com -o get-docker.sh
sh get-docker.sh
# إضافة المستخدم الحالي إلى مجموعة docker (Linux فقط)
sudo usermod -aG docker $USERImportant
بعد تثبيت Docker، يُوصى باتباع خطوات ما بعد التثبيت لـ Docker لتعزيز الأمان والأداء، بما في ذلك تشغيل Docker كمستخدم غير جذر وتكوين خيارات الأمان الإضافية.
تثبيت pnpm (موصى به):
# باستخدام npm
npm install -g pnpm
# أو باستخدام نص التثبيت الرسمي
curl -fsSL https://get.pnpm.io/install.sh | sh -تثبيت Bun:
# باستخدام المثبت الرسمي لـ Bun
curl -fsSL https://bun.sh/install | bash
# أو باستخدام npm
npm install -g bunتثبيت Git:
# لـ Ubuntu/Debian
sudo apt install git
# لـ macOS
xcode-select --install
# لـ Windows، قم بتنزيله من https://git-scm.com/Important
بعد تشغيل usermod -aG docker $USER، يجب عليك تسجيل الخروج ثم تسجيل الدخول مرة أخرى أو إعادة التشغيل لتطبيق تغييرات مجموعة Docker. لمزيد من التكوينات بعد التثبيت، راجع خطوات ما بعد التثبيت لـ Docker.
git clone https://github.com/Bader-Idris/nuxt4-fullstack-portfolio.git ./portfolio
# يُوصى بإعادة تسمية دليل المشروع إلى 'portfolio' إذا لم تستخدم الأمر السابق
sudo mv nuxt4-fullstack-portfolio portfolio
cd portfolioImportant
يُوصى بشدة باستخدام pnpm لتثبيت التبعيات وبناء المشروع، حيث أنه أكثر استقراراً ومختبر بشكل جيد لهذه الكود.
pnpm install
# pnpm config list && pnpm install --no-frozen-lockfile # recommended for locking and better at riskies of nuxt unstabilty
# bun installImportant
ترحيل قاعدة البيانات حيوي للبناء الأول! تم فصله بشكل قصدي عن عملية البناء الرئيسية لمنح السيطرة.
قبل تشغيل التطبيق، تأكد من أن مخطط قاعدة بياناتك محدث بتشغيل ترحيلات Prisma:
pnpm dlx prisma migrate deploy
pnpm dlx prisma generate
# bunx prisma migrate deployلبدء خادم التطوير، انتقل إلى http://localhost:3000:
pnpm dev
# bun run devTip
للحصول على تجربة التطوير الكاملة مع جميع خدمات الخلفية، استخدم إعداد Docker كما هو موضح أدناه.
أنشئ تكوين بيئة من ملف المثال:
cp .env.example .envCaution
عدل القيم في ملف .env لتحصل على خدماتك الخاصة.
Caution
إذا كنت تستخدم Windows، تأكد من تثبيت Git واستخدام Git Bash لتجربة تطوير محسنة.
يتضمن المشروع تكوين بيئة لأنظمة مختلفة:
.env.example- متغيرات بيئة التطبيق الرئيسي.env.electron.example- متغيرات بيئة تطبيق Electron.env.capacitor.example- متغيرات بيئة تطبيق الجوال
# للوصول إلى CLI:
docker exec -it mongo mongosh "mongodb://<Mongo_user>:<Mongo_password>@localhost:27017/portfolio?authSource=admin"show dbs
// اسم قاعدة البيانات الخاصة بك MONGO_DB_NAME
use MONGO_DB_NAME
show collections
// على سبيل المثال مجموعة المستخدمين
db.getCollection("users").find()
// للبحث في المجموعات:
db.users.find({ field: "value" }) // مثل
db.users.find({ "email": "contact@baderidris.com" })
// لتعديل الصلاحية بناءً على البريد الإلكتروني:
db.users.updateOne(
{ "email": "contact@baderidris.com" },
{ $set: { "role": "admin" } }
)
// للحذف:
db.users.deleteOne({ "email": "contact@baderidris.com" })# بعد تنفيذ أمر النسخ الاحتياطي مع:
docker exec mongo sh -c 'mongodump --archive --gzip -u <Mongo_user> -p <Mongo_password> --authenticationDatabase admin' > /path/to/your/backup-4.4.gz
# بعض البيانات ستُفقد، لقد لاحظت أن المحادثات فُقدت! لكن ليس رسائل المشرفين!
# ثم نفذ هذا الأمر لاستعادة البيانات: (أفضل نهج هو الترحيل التسلسلي للإصدارات مثل 4 -> 5 -> 6 إلخ...)
docker exec -i mongo mongorestore \
--archive --gzip \
-u <Mongo_user> \
-p <Mongo_password> \
--authenticationDatabase admin \
< /path/to/your/backup-4.4.gz
# وللتوافق نفذ هذا:
docker exec -it mongo mongosh -u <Mongo_user> -p <Mongo_password> --authenticationDatabase admin --eval '
db.adminCommand({ setFeatureCompatibilityVersion: "8.2", confirm: true });
db.adminCommand({ getParameter: 1, featureCompatibilityVersion: 1 });
'
# 1. إنشاء نسخة احتياطية من بياناتك
docker exec psql pg_dump -U postgres articles > articles_backup.sql
# 2. الحفاظ على البيانات القديمة (اختياري ولكن موصى به)
docker volume create portfolio_psql-data-v16
docker run --rm -v portfolio_psql-data:/from -v portfolio_psql-data-v16:/to alpine ash -c "cd /from ; cp -av . /to"
# 3. تحديث ملف Docker Compose الخاص بك
# تغيير الصورة إلى postgres:18-alpine
# تغيير نقطة الربط من /var/lib/postgresql/data إلى /var/lib/postgresql
# 4. بدء تشغيل الحاوية الجديدة واستعادة البيانات
cat articles_backup.sql | docker exec -i psql psql -U postgres -d articlesيتضمن المشروع الآن خدمة نسخ احتياطي مخصصة باستخدام nfrastack/container-db-backup تقوم تلقائيًا بنسخ كل من PostgreSQL و MongoDB احتياطيًا كل 24 ساعة.
- التدوير (Rotation): يحتفظ بـ 7 أيام من النسخ الاحتياطية افتراضيًا (قابل للتكوين عبر
DEFAULT_CLEANUP_TIME). - التخزين: يتم تخزين النسخ الاحتياطية في وحدة تخزين
backup-data. - دعم S3: لتمكين النسخ الاحتياطي عن بُعد، قم بإلغاء التعليق وملء متغيرات بيئة S3 في
compose.prod.test.yamlأوcompose.ssl.yaml.
لعرض حالة النسخ الاحتياطي:
docker logs db-backupلسرد النسخ الاحتياطية:
docker exec db-backup ls -lh /backupيستخدم المشروع Docker Compose لبيئة تطوير كاملة تتضمن جميع خدمات الخلفية الضرورية.
-
تكوين متغيرات البيئة
cp .env.example .env # حرّر .env من نسخة المثال -
بدء خدمات Docker
docker compose -f b.dev.yml up -d --build
-
الوصول إلى التطبيق
- الواجهة الأمامية:
http://localhost:3000 - سيتم تكوين خدمات الخلفية تلقائيًا
- الواجهة الأمامية:
Warning
يستخدم التطبيق خدمات خلفية مكثفة ويؤدي أفضل أداء مع Docker لتجربة متسقة.
Important
تأكد من تثبيت Docker على جهاز الإنتاج.
لنشر في الإنتاج مع شهادات SSL:
docker compose -f ./a.prod-certbot.yml up -d --buildImportant
حاسم: يجب أن يُسمى مجلد المشروع portfolio للنشر الإنتاجي. تم تضمين تكوين Nginx لبحث الحاويات في دليل portfolio. إذا قمت باستنساخ المجلد باسم مختلف، يجب عليك إما إعادة تسمية المجلد إلى portfolio أو تحديث ملفات تكوين Nginx وفقًا لذلك.
لبناء التطبيق للإنتاج:
# حول ملف داكر إلى نسختك الخاصة
cp ./compose.prod.test.yaml.example ./compose.prod.test.yaml
# ومن ثم أوقف نسخة التطوير وابدأ في بناء المشروع
docker compose -f b.dev.yml down; docker compose -f compose.prod.test.yaml up -d redis postgres mongo ; docker compose -f compose.prod.test.yaml build --progress=plain app; docker compose -f compose.prod.test.yaml up -dCaution
بناء التطبيق على خادم بموارد محدودة يُعتبر ممارسة سيئة. لأداء وموثوقية مثلى، نوصي بشدة باستخدام صورة Docker المبنية مسبقًا المتوفرة في Docker Hub بدلاً من البناء من المصدر على الخادم. إذا كان لا بد من البناء على خادم ضعيف، يرجى اتباع التعليمات في ملف weak_servers.md لضمان عملية بناء ناجحة.
لمعاينة البناء الإنتاجي محليًا:
pnpm previewTip
توجد صورة Docker مبنية مسبقًا في Docker Hub. يمكنك العثور على تعليمات حول كيفية سحب الصورة وتشغيلها مع Docker Compose في وثائق المستودع.
لإضافة دعم Android وiOS:
pnpm dlx cap add android iosأنشئ ملف بيئة الجوال:
cp .env.capacitor.example .env.capacitor
# قم بتكوين متغيرات البيئةلتخصيص أيقونات تطبيقك، عدّل الأيقونات في مجلد /assets حسب الرغبة، ثم شغّل:
bunx capacitor-assets generate --assetPath "./app/assets" --ios --androidيمكنك مراجعة متطلبات التكوين في ملف
assets/requirements.md.
Warning
مطلوب لمنع تعطل التطبيق مع إشعارات الدفع.
لتشغيله بشكل صحيح ومنع تعطل تطبيق الجوال، يجب أن يكون لديك الملف android/app/google-services.json. راجع وثائق Capacitor ووثائق Firebase.
لبناء تطبيق Android، تأكد من أنك قد ثبت Android Studio وعيّن متغيرات البيئة التالية:
ANDROID_HOMECAPACITOR_ANDROID_STUDIO_PATH
Caution
أعد تشغيل جلسة shell بعد إضافة متغيرات البيئة.
Caution
لتوافق Android 15+، بعد إنشاء مشروع Android، تحتاج إلى إضافة السطر التالي إلى كل قسم نمط مع Theme.AppCompat.* في الملف android/app/src/main/res/values/styles.xml لإصلاح خطأ overlay=true في Capacitor:
<item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>هذا يضمن سلوك العرض المناسب على أجهزة Android 15+ عند استخدام Capacitor مع إعدادات overlay=true.
يمكنك الاطلاع على المشكلة هنا
لإنشاء بناء إنتاج لـ Electron:
-
أنشئ ملف بيئة Electron:
cp .env.electron.example .env.electron # قم بتكوين متغيرات البيئة -
استخدم الأوامر التالية لبناء تطبيق Electron:
pnpm build:electron: بناء للمنصة الحاليةpnpm build:electron:all: بناء لـ Windows وmacOS وLinuxpnpm build:electron:win: بناء لـ Windows فقطpnpm build:electron:mac: بناء لـ macOS فقطpnpm build:electron:linux: بناء لـ Linux فقطpnpm build:electron:dir: بناء في دليل غير مضغوط للاختبار
بالنسبة لتوزيعات Linux، يتم دعم التنسيقات التالية:
- DEB: الأفضل لـ Ubuntu/Debian. تثبيت سلس عبر الواجهة الرسومية أو الطرفية (Terminal) باستخدام
sudo dpkg -i <file>.deb. - AppImage: محمول ويعمل على معظم التوزيعات. تأكد من منحه صلاحيات التنفيذ:
chmod +x portfolio.AppImage ./portfolio.AppImage
- Snap: محدود بشكل صارم وآمن. نظرًا لأن البناء المحلي غير موقع، يجب عليك التثبيت باستخدام الطرفية (Terminal):
sudo snap install --dangerous nuxt4-fullstack-portfolio_3.4.0_linux_amd64.snap
بديل حديث وخفيف لـ Electron يستخدم Bun وعارض الويب الخاص بالنظام (system webviews).
-
استخدم ملف بيئة Electron الحالي أو أنشئ ملفاً مخصصاً إذا لزم الأمر.
-
استخدم الأوامر التالية لبناء أو تطوير تطبيق Electrobun:
bun run dev:electrobun: تشغيل وضع التطوير مع HMR ونافذة أصلية.bun run build:electrobun: بناء للمنصة الحالية.bun run build:electrobun:all: بناء لـ Windows وmacOS وLinux بالتتابع.bun run build:electrobun:win: بناء لـ Windows فقط.bun run build:electrobun:mac: بناء لـ macOS فقط.bun run build:electrobun:linux: بناء لـ Linux فقط.
سيتم تنظيم الإصدارات وتأريخها في ./release/electrobun/${version}_${timestamp}/.
تأكد من تحديث اسم النطاق baderidris.com في الملف b.dev.yml وفي ملفات التكوين المرتبطة باسم النطاق الخاص بك.
Important
compose.ssl.yaml هو القالب الآمن للإنتاج مع SSL.
إنه نسخة مفلترة من b.comp.prod.yaml حيث تم استبدال كل سر مُضمَّن بمرجع متغير بيئي. لا تشغّله أبدًا قبل ملء ملف البيئة الخاص بك.
قبل البدء، انسخ ملف البيئة النموذجي واملأ بياناتك:
cp .env.ssl.example .env.production
# ثم عدّل .env.production وأدخل جميع القيم المطلوبة| المتغير | الوصف |
|---|---|
DOMAIN |
النطاق الرئيسي (مثل baderidris.com) |
MAIL_HOSTNAME |
الاسم الكامل لخادم البريد (مثل mail.baderidris.com) |
CERTBOT_EMAIL |
البريد الإلكتروني المستخدم لإشعارات Let's Encrypt |
MONGO_INITDB_ROOT_USERNAME / MONGO_INITDB_ROOT_PASSWORD |
بيانات اعتماد MongoDB الجذرية |
REDIS_PASSWORD |
كلمة مرور مصادقة Redis |
POSTGRES_USER / POSTGRES_PASSWORD / POSTGRES_DB |
بيانات اعتماد PostgreSQL |
SESSION_SECRET / JWT_SECRET |
أسرار توقيع الجلسة و JWT |
GOOGLE_CLIENT_ID / GOOGLE_CLIENT_SECRET |
بيانات اعتماد OAuth لـ Google |
FACEBOOK_APP_ID / FACEBOOK_APP_SECRET |
بيانات اعتماد OAuth لـ Facebook |
SENDGRID_API_KEY |
مفتاح API لـ SendGrid لإرسال الرسائل |
MAIL_USER / MAIL_PASS |
بيانات اعتماد حساب البريد SMTP |
ثم شغّل الخدمات بـ:
docker compose -f compose.ssl.yaml --env-file .env.production up -dTip
لفهم شامل لنهج النسخ الاحتياطي "Robusten" الخاص بنا، وكيفية استعادة البيانات في حالات الطوارئ، وتكامل S3، راجع خطة النسخ الاحتياطي الرئيسية Robusten.
لأتمتة تجديد الشهادات، أنشئ مهمة cron عن طريق تعديل المسارات في الملف /server/config/nginx/ssl_renew.sh، ثم أضف هذا إلى crontab:
# لتحرير crontab، شغّل:
crontab -e
# أضف السطر التالي لجدولة نص البرمجة للتجديد:
0 12 * * * /home/bader/portfolio/server/config/nginx/ssl_renew.sh >> /var/log/cron.log 2>&1Tip
راجع ملف ssl_renew.sh لمزيد من النصائح والمكونات المفيدة.
بعد النشر الأولي، ستحتاج إلى إجبار Certbot على تجديد الشهادات لإزالة علامة --staging. يُوصى بإنشاء ملف compose منفصل لهذا الغرض وللتجديدات المستقبلية.
يتضمن المشروع إعدادًا كاملاً لخادم بريد يعمل على mail.baderidris.com. تم بناؤه باستخدام Docker Mailserver ويدعم تقنيات DKIM و SPF و DMARC و MTA-STS.
للحصول على تعليمات مفصلة حول كيفية تكوين وإدارة خادم البريد، بما في ذلك سجلات DNS وإدارة المستخدمين، يرجى مراجعة نص إعداد خادم البريد و الوثائق التفصيلية.
لتعزيز أمن تطبيقك ومنع الهجمات الشائعة مثل DDoS، تم تنفيذ Fail2Ban.
الملفات التالية مدرجة في تكوين الأمان:
ls server/config/fail2ban/
# يحتوي على:
# - دليل filter.d
# - ملف my_custom_jail.localتم إنشاء سجون ومرشحات مخصصة تسمح للمستخدمين بإضافة تكويناتهم بعد تثبيت الأداة. توفر هذه المرونة مساعدتك في تخصيص إعدادات الأمان وفقًا لاحتياجاتك المحددة.
- استقرار pnpm: راجع دليل استقرار pnpm للحصول على تعليمات حول قفل إصدارات التبعيات وإصلاح فشل بناء Docker.
- Builds الخوادم الضعيفة: راجع weak_servers.md للحصول على إرشادات حول تحسين البناء للموارد المحدودة
- مشكلات Docker: تأكد من تثبيت Docker وDocker Compose وتشغيلهما بشكل صحيح
- متغيرات البيئة: تأكد من تكوين جميع متغيرات البيئة المطلوبة بشكل صحيح
انضم إلى مناقشات مجتمعنا! لا تتردد في التواصل مع المشرف والأعضاء الآخرين في المجتمع على مناقشات GitHub.
شكرًا لاستخدام تطبيق المحفظة متعدد الطبقات! إذا كانت لديك أسئلة أو تحتاج إلى مساعدة إضافية، فلا تتردد في التواصل.عة
- استقرار pnpm: راجع دليل استقرار pnpm للحصول على تعليمات حول قفل إصدارات التبعيات وإصلاح فشل بناء Docker.
- Builds الخوادم الضعيفة: راجع weak_servers.md للحصول على إرشادات حول تحسين البناء للموارد المحدودة
- مشكلات Docker: تأكد من تثبيت Docker وDocker Compose وتشغيلهما بشكل صحيح
- متغيرات البيئة: تأكد من تكوين جميع متغيرات البيئة المطلوبة بشكل صحيح
انضم إلى مناقشات مجتمعنا! لا تتردد في التواصل مع المشرف والأعضاء الآخرين في المجتمع على مناقشات GitHub.
شكرًا لاستخدام تطبيق المحفظة متعدد الطبقات! إذا كانت لديك أسئلة أو تحتاج إلى مساعدة إضافية، فلا تتردد في التواصل.