إذا كنت تقوم ببناء ونشر تطبيق واجهة كاملة — مثلاً باستخدام NestJS للخلفية و Next.js للواجهة — فمن المحتمل أن تسمع عن Nginx.

في هذا الدليل، سنجيب على هذه الأسئلة بشكل واضح وعملي. لا تحتاج إلى خلفية DevOps — فقط خبرة أساسية في تطوير الويب.

🌐 ما هو Nginx؟

Nginx (تُنطق "إنجن-إكس") هو خادم ويب عالي الأداء ووكيل عكسي يُستخدم من قبل ملايين المواقع.

في جوهره، يقوم بعدة مهام أساسية لتطبيقات الواجهة الكاملة:

1. خادم ملفات ثابتة — يمكنه تقديم محتوى ثابت مثل HTML و CSS و JS والصور مباشرة للمتصفح.
2. وكيل عكسي — يعيد توجيه طلبات العملاء إلى خدمات الخلفية أو الواجهة التي تعمل على منافذ داخلية.
3. إنهاء SSL — يتعامل مع تشفير HTTPS باستخدام شهادات SSL.
4. موزع تحميل — يمكنه توزيع حركة المرور على عدة خوادم خلفية.
5. بوابة أمان — يمكنه تصفية أو تقييد أو حجب حركة المرور للحد من الهجمات.

مثال: طلب إلى https://yourdomain.com/api/users يتم توجيهه بواسطة Nginx إلى http://backend:5000/api/users

🔍 لماذا تستخدم Nginx في نشر التطبيقات الكاملة؟

✅ 1. نقطة دخول واحدة

بدلاً من فتح عدة منافذ (5000 للخلفية، 3000 للواجهة، 5432 لقاعدة البيانات)، يسمح لك Nginx باستقبال جميع الطلبات من خلال منفذ واحد فقط (80 أو 443) وتوجيهها حسب الحاجة.

هذا يُبسط إعدادات DNS وعناوين المتصفح والأمان.

✅ 2. دعم HTTPS وإنهاء SSL

المتصفحات تتوقع وجود HTTPS. ومعظم مقدمي الاستضافة يرفضون التطبيقات التي تعمل على HTTP فقط. يسمح لك Nginx بتهيئة شهادات SSL (باستخدام Certbot) ويُدير التشفير لكل الترافيك.

✅ 3. الأداء وتوزيع التحميل

Nginx غير متزامن ويعمل على أحداث، على عكس الخوادم التقليدية. يمكنه تقديم الملفات الثابتة بسرعة وتوزيع الطلبات على عدة خوادم.

✅ 4. أمان متعدد الطبقات

يمكنك:

• إخفاء عناوين IP الداخلية للحاويات
• حظر عناوين IP أو دول معينة
• تحديد معدلات الطلب أو حجم البيانات
• إضافة رؤوس أمان (مثل CORS، CSP، X-Frame-Options)

كل ذلك من خلال Nginx — قبل أن يتعامل تطبيقك مع أي شيء.

✅ 5. فصل المهام بوضوح

دع الواجهة والخلفية تقوم بما تُجيده — ودع Nginx يُدير كيفية وصول العالم إليهما.

🛠️ Nginx كوكيل عكسي: شرح كامل

لنفترض أن لديك:

• واجهة (Next.js) تعمل على http://localhost:3000
• خلفية (NestJS) تعمل على http://localhost:5000

وتريد:

• أن تعرض https://yourdomain.com الواجهة
• وأن يتم توجيه https://yourdomain.com/api/ إلى الخلفية

إليك كيفية تنفيذ ذلك:

📁 الخطوة 1: ملف إعدادات Nginx

أنشئ هذا الملف في nginx/default.conf:

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    location /api/ {
        proxy_pass http://backend:5000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location / {
        proxy_pass http://frontend:3000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

🔍 لماذا هذا الإعداد؟

• يقوم proxy_pass بتوجيه الطلبات إلى الحاويات المناسبة.
• يضمن proxy_set_header تمرير عنوان IP الحقيقي.
• يضمن مسار /api/ أن الواجهة لا تصل إلى النقاط المحمية مباشرة.

📦 الخطوة 2: إضافة Nginx إلى Docker Compose

  nginx:
    image: nginx:alpine
    container_name: nginx_proxy
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - frontend
      - backend

💡 لست معتاداً على Docker Compose؟ راجع هذا الدليل: Dockerize NestJS – Dockerfile & Compose

✅ الخطوة 3: تشغيل كل شيء

docker compose up -d --build

الآن عند زيارة http://yourdomain.com، سيُعرض الموقع من الواجهة. وأي مسار مثل http://yourdomain.com/api/users سيتم توجيهه إلى الخلفية.

لقد أنشأت وكيل عكسي بجودة الإنتاج. 🎉

📌 أسئلة شائعة واستخدامات متقدمة

🔐 ماذا عن HTTPS؟

سنقوم بإعداد HTTPS باستخدام Certbot و Let’s Encrypt في الجزء التالي من هذه السلسلة. سنشرح أيضاً كيفية تنفيذ ذلك داخل Docker وتجديده تلقائياً.

🧪 هل يمكنني استخدام Nginx محلياً؟

نعم — يمكنك تعديل ملف hosts ليشير yourdomain.com إلى 127.0.0.1 وسيعمل كل شيء محلياً.

⚙️ ماذا لو كانت الخلفية تدعم Websockets؟

أضف هذه الأسطر إلى كتلة /api/:

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';

يسمح هذا لـ Nginx بدعم WebSocket أو SSE.

📁 ماذا عن تقديم ملفات ثابتة؟

يمكنك تقديم مجلدات build/ مباشرة دون المرور بالخلفية:

location /static/ {
    root /usr/share/nginx/html;
}

🧠 الخلاصة

Nginx أداة قوية تمنحك تحكماً كاملاً في كيفية تقديم تطبيقك للعالم. يضمن الأمان، الأداء، وقابلية التوسع.

في هذا المقال تعلمت:

• ما هو Nginx وما هي وظيفته
• لماذا تحتاج تطبيقات الواجهة الكاملة إلى وكيل عكسي
• كيفية إعداد وتهيئة Nginx باستخدام Docker

في المقال القادم، سنُظهر لك كيفية تفعيل HTTPS باستخدام شهادات SSL عبر Certbot — وكل ذلك باستخدام Docker.

📘 هل تحتاج لمراجعة Docker؟ ابدأ هنا: Dockerize NestJS – Dockerfile & Compose

👉 جاهز للجزء الثاني؟ لنقم بتأمين موقعك.

هل تحتاج إلى مساعدة؟ تواصل عبر kaisalhusrom.com أو أرسل لي رسالة على LinkedIn.