أهلاً بيك في أول بوست على Hakim!

لما قررت أبني المنصة دي، كان هدفي بسيط: مش عايز مجرد موقع شخصي . أنا عايز أبني نظام بيئي تقني على مستوى الإنتاج، قابل للتوسع بشكل كبير، ويعكس معايير الهندسية اللي بطبقها في شغلي المهني.

لكن قبل ما نتعمق في الكود، خلينا نوقف شوية ونشوف الصورة الكبيرة. الإنترنت كيان معقد. لما تكتب abdullahhakim.me في المتصفح وتدوس Enter، بيحصل شغل كتير في أجزاء من الثانية قبل ما الشاشة تظهر.

تعالى نتبع الرحلة الكاملة للطلب—من المتصفح لحد السيرفر ورجوعه—ونشوف البنية التحتية اللي بتخلي الكلام ده يحصل.

المرحلة الأولى: دليل الإنترنت (DNS)

الإنترنت مش بيفهم إنجليزي؛ هو بيفهم عناوين IP (زي 192.168.1.1).

لما تكتب abdullahhakim.me في المتصفح، محتاج يعرف عنوان IP بتاع السيرفر اللي بيستضيف المنصة. عشان يعمل كده، بيسأل على نظام أسماء النطاقات (DNS). فكر في DNS زي دليل تليفونات الإنترنت.

في المشروع ده، بستخدم Cloudflare لإدارة الـ DNS. Cloudflare بتشغّل شبكة عالمية ضخمة. لما تطلب abdullahhakim.me، أقرب سيرفر عند Cloudflare بيعترض الطلب ويرجّع عنوان IP بتاع السيرفر على طول. التوزيع العالمي ده بيضمن إن التحليل يحصل بسرعة، مهما كنت فين في العالم.

المرحلة الثانية: المصافحة (HTTPS & TLS)

بمجرد ما المتصفح يجيب عنوان IP، مش بيبعت البيانات على طول. الأول، بيعمل اتصال آمن.

المتصفح بيبدأ مصافحة TLS (أمان طبقة النقل) مع السيرفر. خلال المصافحة دي، بيتبادلوا المفاتيح التشفيرية ويتفقوا على بروتوكول تشفير آمن. ده اللي بيدي الموقع بادئة https://www والقفل الصغير اللي بيظهر في المتصفح.

على الرغم من إن دي مدونة شخصية، إن ضمان تشفير كل البيانات أثناء النقل هو معيار أمني مش قابل للتفاوض. أقرأ سياسة الخصوصيه

المرحلة الثالثة: مسؤول المرور (المضيف ووكيل Nginx العكسي)

دلوقتي بعد ما الاتصال الآمن اتعمل، المتصفح بيبعت طلب HTTP GET.

الطلب ده بيسافر عبر الإنترنت ويوصل لسيرفر المضيف—خادم خاص افتراضي (VPS). لكنه مش بيوصل لكود التطبيق على طول. الأول، دا بيلاقي Nginx.

Nginx بيشتغل كـ وكيل عكسي (Reverse Proxy). ممكن تفكر في Nginx زي شرطي مرور مدرب كويس عند مدخل السيرفر. بيعترض حركة المرور العامة الواردة وبيعمل شوية مهام:

1. الأمان : بيشيل payload الضارة ويضيف headers الأمان المطلوبة.

2. التوجيه: بيبص على الطلب ويقرر أي حاوية Docker داخلية المفروض تتعامل معاه (مثلاً، توجيه حركة /api للباك إند، وكل حاجة تانية للفرونت إند).

3. الكفاءة: يقدر يضغط الاستجابات ويدير تجمع الاتصالات عشان السيرفر ميقعش.

لما Nginx يوافق على الطلب، بيوجهه للشبكة الداخلية. ده جزء من nginx.conf الفعلي اللي بيوجه حركة المرور لفرونت إند Next.js وباك إند .NET:

    # Frontend (Next.js)
    location / {
        proxy_pass http://web:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_cache_bypass $http_upgrade;
    }

    # Backend API (.NET 10)
    location /api {
        proxy_pass http://api:5000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

المرحلة الرابعة: جوه النظام (البنية التحتية)

هنا بقى الهندسة بتبان. الطلب دلوقتي جوه السيرفر، بيتفاعل مع نظام بيئي مبني للتوسع، وقابلية الصيانة، والسرعة.

ده سبب اختياري للبنية التحتية المحددة دي:

1. الفرونت إند: Next.js و React 19

لو الطلب بتاعك لصفحة ويب، Nginx بيوجهه لحاوية الفرونت إند.
بنيت واجهة المستخدم باستخدام Next.js وReact 19، مع تصميم باستخدام Tailwind CSS 4.0.

• ليه Next.js؟ العرض من جانب الخادم (SSR). بدل ما نبعت صفحة فاضية ويطر المتصفح يبني الـ HTML بالـ JavaScript، Next.js بيعرض الـ HTML مسبقًا على السيرفر. ده بيخلي مده التحميل سريعة جدًا وتحسين محركات بحث —حاجة مهمه للمدونة.

ده شكل طلب وعرض بوست المدونة في Next.js page.tsx على السيرفر:

export async function generateMetadata({ params }): Promise<Metadata> {
  const { slug, locale } = await params
  const post = await getPostBySlug(locale, slug)

  if (!post) return {}

  return createMetadata({
    title: post.title,
    description: post.excerpt,
    locale
  })
}

async function Page({ params }) {
  const { slug, locale } = await params
  const post = await getPostBySlug(locale, slug)

  if (!post) notFound()

  return (
    <>
      <BlogHeader post={post} />
      <article dir={post.isRtl ? 'rtl' : 'ltr'}>
        <Mdx contentJson={post.contentJson} />
      </article>
      <Suspense>
        <CommentSection slug={slug} postId={post.id} />
      </Suspense>
    </>
  )
}

2. الباك إند: .NET 10 و Clean Architecture

لو الفرونت إند محتاج بيانات (زي عرض بوست المدونة ده)، بيعمل طلب API للباك إند.
المحرك الأساسي لـ Hakim هو ASP.NET Core Web API شغال على .NET 10. بنيت الباك إند باستخدام Clean Architecture ونمط CQRS (فصل الأوامر والاستعلامات) عن طريق MediatR.

• ليه Clean Architecture؟ ربط منطق الأعمال بقاعدة البيانات أو إطار عمل واجهة المستخدم هو بيزود تعقيد في البناء. Clean Architecture بتضمن فصل صارم للاهتمامات. طبقة Domain مالهاش أي تبعيات. ده بيخلي قاعدة الكود قابلة للاختبار بشكل كبير، ومرنة قدام التغيير، وسهلة الصيانة مع نمو المشروع.

على سبيل المثال، لما بنجلب بوست، الطلب بيتعامل بواسطة IRequestHandler في MediatR اللي بيتحقق من ذاكرة التخزين المؤقت Redis قبل ما يسأل PostgreSQL باستخدام استعلام Entity Framework Core مُجمَّع:

public class GetPostBySlugQueryHandler(IAppDbContext context, ICacheService cache)
                          : IRequestHandler<GetPostBySlugQuery, PostDetailDto?>
{
    // High-performance EF Core Compiled Query
    private static readonly Func<DbContext, Slug, string, Task<CompiledPostResult?>> _getPostCompiled =
        EF.CompileAsyncQuery((DbContext db, Slug slug, string culture) =>
            db.Set<Post>()
            .AsNoTracking()
            .Where(p => p.Slug == slug)
            .Select(p => new CompiledPostResult(/* Mapping */))
            .FirstOrDefault());

    public async Task<PostDetailDto?> Handle(GetPostBySlugQuery request, CancellationToken cancellationToken)
    {
        var cacheKey = $"post-{request.Slug}-{culture}";
        var cachedPost = await _cache.GetAsync<PostDetailDto>(cacheKey, cancellationToken);

        if (cachedPost is not null) return cachedPost;

        // Fallback to database using the compiled query
        var result = await _getPostCompiled((DbContext)_context, new Slug(request.Slug), culture);

        if (result is null) return null;

        // ... format postDetail ...

        await _cache.SetAsync(cacheKey, postDetail, TimeSpan.FromMinutes(10), cancellationToken);

        return postDetail;
    }
}

3. طبقة البيانات: PostgreSQL و Redis

لما API الـ .NET محتاج يجيب البوست ده، بيتكلم مع طبقة قاعدة البيانات.

• PostgreSQL: بتشتغل كقاعدة البيانات الأساسية، وبتضمن سلامة البيانات للبوستات والتعليقات والمستخدمين.

• Redis: بتُستخدم كذاكرة تخزين مؤقت عالية الأداء في التخزين. لو بوست المدونة بيتطلب بشكل متكرر، الباك إند بيجيبه من Redis في أجزاء من الثانية بدل ما يسأل قاعدة بيانات PostgreSQL، وده بيقلل زمن الاستجابة بشكل كبير.

كل المكونات دي Dockerized، يعني بتشتغل في حاويات معزولة وسهلة النشر.

رحلة ارجاع النتيجه

بمجرد ما API الـ .NET يجيب بوست المدونة من PostgreSQL (أو Redis)، بيُنسق البيانات كـ JSON ويبعتها تاني للفرونت إند Next.js. الفرونت إند بيعرض واجهة المستخدم الجميلة اللي انت شايفها دلوقتي، Nginx بيضغط الـ HTML النهائي، وبيسافر تاني من خلال ممر TLS الآمن للمتصفح.

كل ده بيحصل في جزء من الثانية.

الخلاصة

بناء المنصة دي مش كان مجرد رفع تمبليت على الإنترنت. كان تمرين في تطبيق معايير الهندسة—من CI/CD في GitHub Actions للـ micorservices وreverse proxies—على مشروع شخصي.

ده بس الجزء الأول. في البوستات الجاية في السلسلة دي، هتعمق أكتر في مكونات محددة من النظام ده:

• إزاي بنيت نمط CQRS في .NET 10.

• إزاي بنيت نظام السيرة الذاتية المدفوعة بالذكاء الاصطناعي بتشتغل.

• إزاي نشرت النظام باستخدام GitHub Actions وDocker.

ترقبوا تفاصيل اعمق في البوست الجاي!