أتمتة CI / CD

🎯 السؤال الجوهري

الكود يعمل بشكل ممتاز على جهازي المحلي، كيف أجعله متاحاً لجميع الناس في العالم؟

1. لماذا نحتاج إلى "إطلاق الخدمة"؟

تخيل أنك أعددت مائدة مليئة بالأطباق الشهية في منزلك. لكن المشكلة أن عائلتك فقط هي من يستطيع تذوقها. الجيران، الحارس، الغرباء... لا أحد يستطيع الاستمتاع بها.

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

服务上线全流程从代码到用户眼中的网页

开发阶段

Git

代码版本控制

→

CI/CD

自动化流水线

构建阶段

Test

自动化测试

→

Build

编译打包

→

Artifact

构建产物存储

部署阶段

Server

服务器环境

→

Deploy

部署应用

→

Nginx

反向代理

网络配置

HTTPS

SSL证书

→

CDN

内容分发加速

→

DNS

域名解析

运维阶段

Monitor

监控状态

→

Log

日志收集

→

Alert

告警通知

核心原则：小步快跑 → 先上线MVP → 逐步完善

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

سأقوم بتفكيك العملية بأكملها. كل مرحلة سيتم شرحها بالتفصيل. أضمن حتى للمبتدئ تماماً أن يفهم.

2. البناء: تحويل الكود إلى "حزمة قابلة للحمل"

2.1 لماذا نحتاج إلى البناء؟

المبتدئون غالباً يسألون: الكود جاهز، لماذا لا يمكن وضعه مباشرة على الخادم ليتمكن المستخدمون من الوصول إليه؟

للإجابة، يجب أولاً فهم ما هو تنسيق الكود الذي كتبته. قد تستخدم أطر عمل مثل Vue، React، Express، Koa، وغيرها. هذه الأطر لها شيء مشترك: ليست مصممة للاستخدام المباشر من قبل المتصفح أو الخادم.

على سبيل المثال، عند كتابة كود Vue، ألم تستخدم علامات مثل <template> و<script setup>؟ هذا التركيب لا يفهمه إلا Vue. المتصفح لا يفهمه إطلاقاً. المتصفح يتعرف فقط على ثلاث لغات: HTML (هيكل الصفحة)، CSS (أنماط الصفحة)، JavaScript (منطق الصفحة). تركيب مكونات Vue بالنسبة للمتصفح مثل لغة غامضة، غير مفهومة تماماً.

لذلك، قبل وضع الكود على الخادم، يجب القيام بشيء مهم: ترجمته إلى لغة يفهمها المتصفح. هذه عملية الترجمة تسمى "البناء" (Build).

2.2 ماذا يفعل البناء بالتحديد؟

البناء ليس فقط ترجمة. يقوم أيضاً بالعديد من التحسينات لجعل الموقع يعمل بشكل أسرع ويستهلك موارد أقل. لنرى بالتفصيل ما يفعله:

الخطوة 1: تحليل التبعيات

عند كتابة الكود، تستخدم مكتبات خارجية متنوعة. مثل Vue، Vue Router، Axios، Vite، وغيرها. من المستحيل أن يقوم المستخدمون بتنزيلها من npm في كل مرة. سيكون ذلك بطيئاً جداً. أداة البناء تحلل الكود، وتجد جميع التبعيات وتقوم "بتعبئتها" معاً.

الخطوة 2: التجميع والتحويل

هذه هي الخطوة الأساسية. تجميع مكونات Vue إلى HTML وJavaScript. تجميع SASS/LESS إلى CSS. تحويل بناء ES6+ الجديد إلى كود ES5 أكثر توافقاً. بعد هذه الخطوة، يتحول الكود من "تنسيق يفهمه المطورون" إلى "تنسيق تنفذه الآلة".

الخطوة 3: التصغير والتعمية

التصغير يعني حذف جميع المسافات، والأسطر الجديدة، والتعليقات. تغيير أسماء المتغيرات من كلمات إلى حروف مفردة. مثلاً userName تصبح a، وcalculateTotalPrice تصبح b. هكذا يقل حجم الملف بشكل كبير. وسرعة التنزيل تصبح أسرع. الكود المعقد يصعب على البشر قراءته. مما يوفر "حماية للكود"在一定程度上.

الخطوة 4: تقسيم الكود

قد تكون كتبت 10 صفحات. كل صفحة لها كود خاص. لكن المستخدم قد يزور صفحة واحدة فقط. لماذا يحتاج تنزيل كود 9 صفحات أخرى؟ أداة البناء تقسم الكود إلى أجزاء صغيرة متعددة. المستخدم ينزل كود الصفحة التي يزورها فقط. هذا هو "التحميل عند الحاجة". ويمكنه تحسين سرعة الوصول الأولى بشكل كبير.

الخطوة 5: توليد البصمة

هذه خطوة مهمة جداً لكن الكثيرين يتجاهلونها. بعد البناء، تأخذ أسماء الملفات شكلاً مثل app.abc123.js وvendor.def456.css. السلسلة الأبجدية الرقمية في النهاية تسمى "hash" (بصمة).

وظيفة البصمة: عندما يتغير الكود، تتغير قيمة البصمة. المتصفح يعرف أن "هذا الملف تغير، يجب إعادة تنزيله". الملفات التي لم تتغير، المتصفح يستمر في استخدام ذاكرته المؤقتة. هذا يضمن أن يرى المستخدمون أحدث كود مع الاستفادة القصوى من الذاكرة المؤقتة لتسريع الأداء.

1解析依赖

→

2编译转换

→

3打包压缩

→

4完成

2.3 كيف تنفذ البناء؟

معظم مشاريع الواجهة الأمامية الحديثة تمتلك بالفعل أداة بناء مُعدة. فقط تذكر أمراً واحداً:

bash

# إذا كنت تستخدم npm
npm run build

# إذا كنت تستخدم yarn
yarn build

# إذا كنت تستخدم pnpm
pnpm build

بعد التشغيل، اذهب إلى المجلد الجذري للمشروع وابحث عن مجلد يسمى dist (أحياناً يسمى build أو .output). بداخله جميع الملفات المبنية. هذه هي الملفات النهائية التي يجب رفعها إلى الخادم. لا تحتاج إلى أي تعديل إضافي. انسخها مباشرة إلى الخادم.

2.4 ماذا يحتوي ناتج البناء؟

عند فتح مجلد dist، سترى بشكل رئيسي ثلاثة أنواع من الملفات:

ملفات HTML: عادة index.html. هذا هو ملف الدخول. المتصفح يحمله أولاً.
ملفات JS: جميع كود JavaScript. قد يكون ملفاً واحداً أو عدة ملفات.
ملفات CSS: جميع أنماط الكود. قد تكون مدمجة في HTML أو ملفات CSS مستقلة.

إذا كان مشروع backend أكثر تعقيداً (مثل Node.js)، قد يكون ناتج البناء ملفاً تنفيذياً أو صورة Docker. لكن المبدأ هو نفسه: تحويل الكود إلى شكل يمكن للخادم تشغيله مباشرة.

3. الخادم: إيجاد "منزل" لا يغلق أبداً

3.1 ما هو الخادم بالضبط؟

الكثيرون عند سماعهم كلمة "خادم" لأول مرة يظنون أنه جهاز غامض وراقٍ. في الواقع ليس معقداً هكذا. الخادم هو حاسوب. حاسوب لا ينطفئ أبداً ومتصل بالإنترنت دائماً.

قد يسأل أحد: أليس لدي حاسوب في المنزل؟ لماذا أنفق المال على استئجار خادم؟

سؤال جيد. دعني أحلل لك:

أولاً، حاسوبك المنزلي لا يمكن أن يعمل على مدار الساعة. عليك الخروج، والنوم، وأحياناً يتوقف أو يعاد تشغيله. لكن الخادم مختلف. مصمم خصيصاً لهذا الغرض. يمكنه العمل 365 يوماً في السنة دون توقف. الموقع متاح دائماً.

ثانياً، شبكتك المنزلية غير كافية أيضاً. سرعة رفع الإنترنت المنزلي عادة بطيئة. بالإضافة إلى أن عنوان IP المنزلي متغير. اليوم عنوان، وغداً قد يكون مختلفاً. لا يصلح لاستضافة موقع. الخوادم تستخدم شبكات عالية السرعة من مراكز البيانات. IP ثابت وسرعة فائقة.

ثالثاً، حاسوبك المنزلي ليس لديه "IP عام". ما هو IP العام؟ هو عنوان فريد عالمياً. فقط بهذا العنوان يمكن للآخرين العثور على حاسوبك على الإنترنت. عنوان IP لحاسوبك المنزلي عادة يعمل فقط داخل شبكتك المحلية. الأشخاص من الخارج لا يمكنهم العثور عليك. الخوادم مختلفة. لديها IP عام ثابت. جميع الناس في العالم يمكنهم العثور عليها من خلال هذا IP.

个人博客1核 1G¥50/月

小型电商2核 4G¥300/月

中型应用4核 8G¥1000/月

3.2 كيف تختار خادماً؟

اختيار الخادم يعتمد بشكل رئيسي على ثلاثة معايير: أنوية المعالج، ذاكرة الوصول العشوائي، ومساحة القرص. كلما كانت هذه المعايير أعلى، كان أداء الخادم أفضل والسعر أعلى.

للمبتدئين، لا داعي لشراء تكوين باهظ. تذكر القاعدة البسيطة:

المشاريع الشخصية، التعلم والتدريب: نواة واحدة و2 غيغابايت RAM تكفي. حوالي عشرات اليوان شهرياً.
المشاريع التجارية الصغيرة: نواتان و4 غيغابايت RAM. يمكنها تحمل بضعة آلاف إلى عشرات الآلاف من الزيارات يومياً.
المشاريع المتوسطة: 4 أنوية و8 غيغابايت أو أعلى. تحتاج فريق عمليات محترف.

نقطة أخرى يجب مراعاتها: الموقع الجغرافي. إذا كان المستخدمون بشكل رئيسي في الصين، اشترِ خوادم محلية (Alibaba Cloud، Tencent Cloud) لسرعة وصول أفضل. إذا كان المستخدمون بشكل رئيسي في الخارج، اشترِ خوادم أجنبية (AWS، Google Cloud، DigitalOcean) أو خوادم في هونغ كونغ. سريعة ولا تحتاج إلى تسجيل ICP.

3.4 مقارنة بين مقدمي الخدمات السحابية الرئيسيين

المزود	الفئة المستهدفة	المميزات	سعر المستخدمين الجدد
Alibaba Cloud	الأعمال في الصين	الحصة السوقية الأولى، منظومة متكاملة	من عشرات إلى أكثر من مئة يوان في السنة الأولى
Tencent Cloud	التطبيقات الصغيرة، الألعاب	دعم جيد لتطوير التطبيقات السحابية	خصومات كبيرة في السنة الأولى
Huawei Cloud	المؤسسات	الخيار الأول لمشاريع الحكومة	سعر مرتفع نسبياً
DigitalOcean	المطورون	بسيط وسهل، أسعار شفافة	من $4/شهر
Vercel	مشاريع الواجهة الأمامية	بدون إعدادات، النشر التلقائي عند الدفع	الحصة المجانية كافية

للمبتدئين، أنصح بعروض الطلاب/المستخدمين الجدد من Alibaba Cloud أو Tencent Cloud. عادة فقط عشرات اليوان سنوياً. إذا كان مشروع واجهة أمامية بحتة وترتجيل الأمور بسيطة، يمكنك استخدام Vercel أو Netlify. لا تحتاج حتى لشراء خادم. ادفع الكود وسيتم النشر تلقائياً.

3.5 ماذا تفعل بعد الحصول على الخادم؟

بعد شراء الخادم، ستتلقى بريداً إلكترونياً يحتوي على معلومات مهمة:

عنوان IP: سلسلة أرقام مثل 123.45.67.89. هذا هو عنوان الخادم على الإنترنت.
اسم المستخدم لتسجيل الدخول: عادة root (حساب المسؤول).
كلمة مرور تسجيل الدخول: كلمة المرور الأولية، أو رابط لإعداد كلمة المرور.

بهذه المعلومات، يمكنك تسجيل الدخول عن بُعد إلى الخادم باستخدام SSH (Secure Shell). SSH مثل إرسال أمر تحكم عن بُعد مشفر. يتيح لك تشغيل خادم بعيد من حاسوبك.

أمر تسجيل الدخول:

bash

ssh root@123.45.67.89
# بعد الضغط على Enter سيُطلب منك إدخال كلمة المرور. أدخل كلمة المرور الصحيحة وستكون قد سجلت الدخول بنجاح.

بعد تسجيل الدخول بنجاح، ستدخل واجهة سطر الأوامر في الخادم. تبدو مشابهة لفتح نافذة طرفية على حاسوبك. يمكنك تثبيت البرامج، وإنشاء مجلدات، وتعديل الإعدادات. جميع العمليات مثل حاسوبك المحلي.

4. النشر: نقل الكود إلى "المنزل"

4.1 ما هو النشر؟

النشر هو بعد استئجار الخادم (المنزل)، نقل الكود (الأثاث والمتاع) وفتح الباب لبدء العمل.

تحديداً، يشمل النشر الخطوات التالية:

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

هذه الخطوات الأربع تبدو معقدة. لكن في الواقع ليست صعبة جداً. فيما يلي شرح مفصل لكل خطوة.

个人博客1核 1G¥50/月

小型电商2核 4G¥300/月

中型应用4核 8G¥1000/月

4.2 كيف ترفع الكود إلى الخادم؟

الطريقة 1: الرفع عبر FTP/SFTP

هذه أكثر الطرق وضوحاً. مثل استخدام التخزين السحابي. تسحب الملفات إلى الخادم. يمكنك تنزيل برنامج مجاني يسمى FileZilla. أدخل عنوان IP الخادم واسم المستخدم وكلمة المرور. ستتمكن من إدارة ملفات الخادم مثل إدارة ملفاتك المحلية.

الطريقة 2: سحب عبر Git

هذه هي الطريقة الموصى بها. أنشئ مستودع كود على GitHub أو GitLab أو Gitee. ادفع الكود إلى السحابة. ثم استخدم أمر git clone على الخادم لسحب الكود.

الميزة: لتحديث الكود لاحقاً، تحتاج فقط لتنفيذ git pull على الخادم. لا حاجة للرفع اليدوي في كل مرة. والكود آمن في السحابة. حتى لو أعدت تثبيت الخادم فلا مشكلة.

الطريقة 3: النشر التلقائي عبر CI/CD

هذه أكثر الطرق احترافية والموصى بها بشدة. من خلال تكوين CI/CD (التكامل المستمر/النشر المستمر)، تحتاج فقط لدفع الكود إلى GitHub. نظام CI/CD يكمل تلقائياً: سحب الكود → تثبيت التبعيات → البناء → النشر. لا تحتاج حتى لتسجيل الدخول إلى الخادم. كل شيء يتم تلقائياً.

4.3 خطوات النشر المحددة

لنفترض أننا نستخدم أبسط طريقة: النشر اليدوي عبر Git. نوضح العملية خطوة بخطوة:

الخطوة 1: الاتصال بالخادم

bash

ssh root@123.45.67.89

الخطوة 2: تثبيت البرامج اللازمة

إذا كان مشروع Node.js، يجب تثبيت Node.js أولاً:

bash

# مثال لنظام Ubuntu
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

الخطوة 3: سحب الكود

bash

# إنشاء مجلد للموقع
mkdir -p /var/www/my-website
cd /var/www/my-website

# استنساخ المستودع (يجب إنشاء المستودع على GitHub أولاً)
git clone https://github.com/username/repo.git .

الخطوة 4: تثبيت التبعيات والبناء

bash

# تثبيت تبعيات المشروع
npm install

# بناء المشروع (ينشئ مجلد dist)
npm run build

الخطوة 5: بدء الخدمة باستخدام PM2

لماذا تستخدم PM2؟ إنها أداة إدارة عمليات. تجعل الموقع يعمل باستمرار في الخلفية. حتى لو أُعيد تشغيل الخادم، ستبدأ تلقائياً.

bash

# تثبيت PM2 عالمياً
sudo npm install -g pm2

# بدء الموقع (بافتراض أن ملف الدخول هو index.js)
pm2 start index.js

# إعداد التشغيل التلقائي عند الإقلاع
pm2 startup
pm2 save

الخطوة 6: تكوين الوكيل العكسي Nginx

تطبيقات Node.js عادة تعمل على منفذ 3000 أو 8080. لكن المستخدمين يصلون عبر المنفذ 80 (المنفذ الافتراضي لـ HTTP). نحتاج Nginx لإعادة توجيه طلبات المنفذ 80 إلى منفذ التطبيق.

bash

# تثبيت Nginx
sudo apt install -y nginx

# إنشاء ملف تكوين Nginx
sudo nano /etc/nginx/sites-available/my-website

في المحرر الذي يفتح، اكتب التكوين التالي:

nginx

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

    # الملفات الثابتة (ناتج البناء) تُعاد مباشرة
    location / {
        root /var/www/my-website/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # طلبات API تُعاد توجيهها إلى backend Node.js
    location /api/ {
        proxy_pass http://localhost: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;
    }
}

بعد الحفظ والخروج، فعّل هذا التكوين:

bash

# تفعيل التكوين
sudo ln -s /etc/nginx/sites-available/my-website /etc/nginx/sites-enabled/

# فحص التكوين للأخطاء
sudo nginx -t

# إعادة تشغيل Nginx
sudo systemctl restart nginx

الآن عند زيارة http://example.com (تذكر تكوين DNS ليشير إلى IP هذا الخادم)، يجب أن ترى الموقع!

5. النطاق وDNS: إعطاء الموقع اسماً جميلاً

5.1 لماذا نشتري نطاقاً؟

لدينا عنوان IP للخادم، لماذا نشتري نطاقاً أيضاً؟

فكر في الأمر. أليس من الصعب تذكر سلسلة أرقام مثل 123.45.67.89؟ أليس من السهل الخطأ في كتابتها؟ لكن تذكر أسماء مثل baidu.com وtaobao.com أليس أسهل بكثير؟

النطاق هو اسم الموقع. سهل التذكر، احترافي، ويعكس صورة العلامة التجارية أيضاً. تخيل أن تخبر شخصاً "زر موقعي، عنوان IP هو 123.45.67.89" مقارنة بـ "زر مواقعي.com"، أيهما يبدو أفضل؟

💻用户输入域名

→

📋查询 DNS

→

✅返回 IP

示例：example.com → 192.168.1.1

5.2 ما هو DNS؟

حسناً. الآن اشتريت نطاقاً. مثلاً موقعي-الرائع.com. لكن المشكلة: الحواسيب تفهم عناوين IP فقط. لا تفهم اللغة البشرية مثل "موقعي-الرائع.com".

هنا يأتي دور DNS. DNS اختصار لـ "Domain Name System" (نظام أسماء النطاقات). يمكن فهمه كـ "دفتر هاتف" ضخم. متخصص في ترجمة أسماء النطاقات سهلة التذكر إلى عناوين IP تفهمها الحواسيب.

عند كتابة موقعي-الرائع.com في المتصفح والضغط على Enter، هذا ما يحدث في الخلفية:

المتصفح يسأل DNS: "مرحباً، ما هو عنوان IP لموقعي-الرائع.com؟"
DNS يبحث في "دفتر الهاتف" ويجيب المتصفح: "عنوان IP الخاص به هو 123.45.67.89"
المتصفح بناءً على عنوان IP هذا يجد الخادم ويرسل الطلب

العملية بأكملها تستغرق عادة عشرات الملي ثانية فقط. المستخدم لا يشعر بها إطلاقاً.

5.3 كيف تكوّن DNS؟

تكوين DNS يمكن القيام به عادة في مكانين:

الطريقة 1: التكوين عند مزود النطاق

حيث اشتريت النطاق، قم بتكوين سجلات DNS. نوع السجل الأكثر شيوعاً هو سجل A:

نوع السجل: A
سجل المضيف: عادة @ (يمثل النطاق نفسه) أو www (يمثل www.example.com)
قيمة السجل: عنوان IP للخادم، مثل 123.45.67.89

الطريقة 2: استخدام خدمة DNS من جهة خارجية

العديد من المحترفين لا يستخدمون DNS المدمج مع مزود النطاق. بل يستخدمون خدمات DNS متخصصة مثل Cloudflare أو Alibaba Cloud DNSPod أو Tencent Cloud DNS. هذه الخدمات عادة أكثر استقراراً وأسرع في التحليل. وتأتي مع ميزات إضافية مثل CDN وحماية DDoS.

5.4 كم يستغرق DNS ليصبح سارياً؟

هذا سؤال يهم الكثيرين. الإجابة: ليس بالضرورة. عادة من بضع دقائق إلى 24 ساعة.

بعد تعديل DNS، جميع خوادم DNS حول العالم تحتاج لمزامنة هذا التغيير. مثل رمي حجر في المحيط. الأمواج تحتاج وقتاً للوصول إلى الشاطئ البعيد. بعض خوادم DNS تتحدث بسرعة، في غضون دقائق. بعضها أبطأ، قد تحتاج الانتظار طويلاً.

يمكنك التحقق مما إذا كان DNS أصبح سارياً بالأمر:

bash

# Windows
ping your-domain

# Mac/Linux
ping your-domain

إذا نجح الـ ping وعرض عنوان IP للخادم، فهذا يعني أن DNS أصبح سارياً.

6. HTTPS: تركيب "قفل" للموقع

6.1 الفرق بين HTTP وHTTPS

ربما لاحظت. بعض عناوين المواقع تبدأ بـ http:// وبعضها بـ https://. حرف "s" هذا مهم جداً. يعني "Secure" (آمن).

HTTP (HyperText Transfer Protocol) هو بروتوكول نقل صفحات الويب. يمكن فهمه كشاحنة تنقل البيانات. لكن هذه الشاحنة شفافة. كل ما بداخلها يمكن لأي شخص رؤيته. على موقع HTTP، كلمات المرور والمعلومات الشخصية التي تدخلها يمكن لأي وسيط أثناء النقل الاطلاع عليها.

HTTPS (HTTP Secure) يضيف للشاحنة حاوية مغلقة مع قفل. فقط المرسل والمستلم لديهما المفتاح. حتى لو اعترض شخص الشحنة فلن يفهم محتواها. هذا هو النقل المشفر.

HTTP

❌ 明文传输

 HTTPS 
 ✅ 加密传输 

💡 推荐：Let's Encrypt 免费证书

6.2 لماذا HTTPS؟

السبب الأول: الأمان. بدون HTTPS، كلمات المرور التي يدخلها المستخدمون تُنصقل بنص عادي. أي شخص لديه مهارات تقنية بسيطة يمكنه اعتراضها. في هذا العصر، من يجرؤ على استخدام موقع بدون HTTPS؟

السبب الثاني: تحذير المتصفح. الآن Chrome وEdge والمتصفحات الرئيسية الأخرى تعرض تحذير "غير آمن" للمواقع بدون HTTPS. عندما يرى المستخدم أيقونة التحذير، يهرب مسرعاً. ناهيك عن التسجيل أو الدفع.

السبب الثالث: تحسين محركات البحث. Google وBaidu ومحركات البحث الأخرى تعطي أولوية للمواقع التي تستخدم HTTPS. تحسين محركات البحث سيكون أفضل.

6.3 كيف تحصل على شهادة HTTPS؟

سابقاً كانت شهادات HTTPS مكلفة. تكلفتها مئات أو حتى آلاف اليوان سنوياً. الآن تحسنت الأمور. هناك منظمة تسمى Let's Encrypt توفر شهادات SSL/TLS مجانية تماماً. والمجتمع لديه العديد من الأدوات الآلية لمساعدتك في التثبيت والتجديد.

الطريقة 1: استخدام Certbot (موصى به)

CertBot أداة تطلب وتكوّن شهادات Let's Encrypt تلقائياً. بسيطة جداً:

bash

# تثبيت Certbot
sudo apt install -y certbot python3-certbot-nginx

# طلب الشهادة وتكوين Nginx في خطوة واحدة
sudo certbot --nginx -d example.com -d www.example.com

أثناء العملية سيطرح بعض الأسئلة. مثل البريد الإلكتروني (لتذكير بتجديد الشهادة). بعد الإجابة، يتم تكوين الشهادة تلقائياً. عند زيارة الموقع سترى أيقونة قفل صغيرة في شريط العنوان.

الشهادة صالحة لمدة 90 يوماً. لكن Certbot سيقوم بإعداد مهمة مجدولة لتجديدها تلقائياً. عملياً لا تحتاج للقلق بشأنها.

الطريقة 2: استخدام Cloudflare

إذا كنت تستخدم خدمة DNS من Cloudflare، لا تحتاج لتكوين شهادة HTTPS بنفسك إطلاقاً. Cloudflare يوفر تلقائياً دعم HTTPS لنطاقك. وحتى مشكلة التجديد كل 90 يوماً يتم حلها.

6.4 ما الذي يتغير بعد تكوين HTTPS؟

بعد تكوين HTTPS، وصول المستخدمين ينتقل من http://example.com إلى https://example.com. هذا التغيير يجلب سلسلة من الضمانات الأمنية:

النقل المشفر: جميع الاتصالات بين المستخدم والخادم مشفرة.
التحقق من الهوية: الشهادة يمكنها إثبات "أنا حقاً هذا الموقع". منع مواقع التصيد.
سلامة البيانات: يمكن اكتشاف ما إذا تم العبث بالبيانات.

7. CI/CD: دع الروبوت يعمل نيابة عنك

7.1 ما هو CI/CD؟

CI/CD اختصار لمصطلحين: Continuous Integration (التكامل المستمر) وContinuous Deployment (النشر المستمر). يمكن فهمه كنظام روبوتي يعمل تلقائياً نيابة عنك.

بدون CI/CD. كل مرة تريد إصدار ميزة جديدة. كانت العملية كالتالي:

فتح الحاسوب، تسجيل الدخول إلى GitHub
سحب أحدث كود
تشغيل الاختبارات للتحقق من عدم وجود أخطاء
بناء المشروع يدوياً
تسجيل الدخول إلى الخادم
سحب أحدث كود
تثبيت التبعيات
بناء المشروع
إعادة تشغيل الخدمة

هذه الخطوات التسع. في كل إصدار يجب تنفيذها يدوياً. أليس مزعجاً؟ ومن السهل جداً نسيان خطوة ما. مثل نسيان تشغيل الاختبارات، أو نسيان إعادة تشغيل الخدمة، وغيرها.

مع CI/CD. أصبحت العملية:

دفع الكود إلى GitHub
شرب الشاي والانتظار
(الروبوت يكمل تلقائياً الخطوات التسع أعلاه)
الموقع يتحدث تلقائياً

1代码推送

→

2自动测试

→

3自动构建

→

4自动部署

手动部署

❌ 容易出错

 CI/CD 
 ✅ 快速可靠 

هذا هو سحر CI/CD: فقط ادفع الكود. وكل شيء آخر يكتمل تلقائياً.

7.2 سير عمل CI/CD

سير عمل CI/CD النموذجي:

الخطوة 1: إرسال الكود (Push)

أكملت تطوير ميزة جديدة. ادفع الكود إلى GitHub.

الخطوة 2: تفعيل CI (التكامل المستمر)

GitHub يكتشف تغييراً في الكود. يخطر نظام CI (GitHub Actions، GitLab CI، وغيرها) للبدء بالعمل.

الخطوة 3: تثبيت التبعيات والاختبار

نظام CI يبدأ حاسوباً افتراضياً. عليه:

تثبيت جميع تبعيات المشروع
تشغيل اختبارات الكود للتأكد من عدم وجود أخطاء
بناء المشروع، وإنشاء الناتج

إذا فشلت الاختبارات. CI يرسل إشعاراً بالبريد الإلكتروني. يتوقف النشر. الكود الذي به مشاكل لن يُنشر في بيئة الإنتاج.

الخطوة 4: تنفيذ CD (النشر المستمر)

بعد اجتياز جميع الاختبارات. نظام CI سيقوم بـ:

الاتصال بالخادم عبر SSH
سحب أحدث كود
تثبيت التبعيات
بناء المشروع
إعادة تشغيل الخدمة

العملية بأكملها قد تستغرق بضع دقائق فقط. كل شيء تلقائي.

7.3 كيف تكوّن GitHub Actions؟

GitHub Actions هي ميزة CI/CD المدمجة في GitHub. لا تتطلب دفعاً إضافياً (الحصة المجانية كافية للمشاريع الشخصية). الإعداد بسيط جداً أيضاً.

أنشئ ملف .github/workflows/deploy.yml في المجلد الجذري للمشروع بالمحتوى التالي:

yaml

name: Deploy to Production

# شرط التفعيل: كلما تم دفع كود إلى فرع main
on:
  push:
    branches: [main]

# قائمة المهام
jobs:
  # مهمة النشر
  deploy:
    # على أي نظام يعمل
    runs-on: ubuntu-latest

    # الخطوات المحددة
    steps:
      # 1. سحب الكود
      - name: Checkout code
        uses: actions/checkout@v3

      # 2. تثبيت بيئة Node.js
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      # 3. تثبيت التبعيات والبناء
      - name: Install and Build
        run: |
          npm ci
          npm run build

      # 4. النشر على الخادم
      - name: Deploy to Server
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          script: |
            cd /var/www/my-website
            git pull origin main
            npm install
            npm run build
            pm2 restart all

ملف التكوين هذا يخبر GitHub Actions:

يتفعل عند وجود كود جديد في فرع main
ينفذ المهام على حاسوب Ubuntu
يثبت Node.js 18 أولاً
ثم يثبت التبعيات ويبني المشروع
أخيراً يتصل بالخادم عبر SSH وينفذ سلسلة أوامر النشر

بعد التكوين. كل مرة تنفذ git push origin main. سيبدأ GitHub النشر تلقائياً. مريح جداً.

8. المراقبة والسجلات: أن تكون "الحارس الليلي" للموقع

8.1 لماذا المراقبة؟

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

بدون مراقبة. يمكنك فقط الانتظار حتى يتصل بك مستخدم ليخبرك "الموقع لا يعمل". حينها عادة يكون الأوان قد فات. ربما فقدت مستخدمين بالفعل.

مع المراقبة. يمكنك:

اكتشاف المشاكل مبكراً: استخدام CPU 90%. أضف خادماً مبكراً.
تحديد المشاكل بسرعة: الموقع بطيء. راجع المراقبة لمعرفة أين عنق الزجاجة.
الاطمئنان: كم عدد الزيارات يومياً، ومتى تكون ذروة الزيارات.

CPU 使用率45%

内存使用率62%

在线用户23

上次备份：

2024-01-15 14:30

8.2 ما هي المؤشرات التي يجب مراقبتها؟

أهم مؤشرات المراقبة هي:

المؤشر	النطاق الطبيعي	ماذا تفعل عند التجاوز
استخدام CPU	< 70%	ترقية تكوين الخادم أو تحسين الكود
استخدام الذاكرة	< 80%	التحقق من وجود تسرب في الذاكرة
استخدام القرص	< 80%	تنظيف السجلات أو الملفات غير الضرورية
توفر الموقع	100%	التحقق من أن الخدمة تعمل بشكل طبيعي
وقت الاستجابة	< 2 ثانية	تحسين استعلامات قاعدة البيانات أو إضافة ذاكرة مؤقتة
معدل الأخطاء	< 1%	عرض سجل الأخطاء لتحديد المشكلة

8.3 كيف تكوّن المراقبة؟

أبسط حل: Uptime Robot

سجل في uptimerobot.com. أضف رابط موقعك. سيتحقق تلقائياً كل 5 دقائق من أن الموقع يعمل بشكل طبيعي. إذا تعطل الموقع سيرسل لك إشعاراً بالبريد الإلكتروني. النسخة المجانية يمكنها مراقبة 50 موقعاً. كافية للمشاريع الشخصية.

حل متقدم: مراقبة Alibaba Cloud/Tencent Cloud

إذا كان الخادم من Alibaba Cloud أو Tencent Cloud، فهما يتضمنان ميزات مراقبة مدمجة. فقط قم بتكوين عتبات التنبيه.

حل احترافي: Prometheus + Grafana

هذان هما "سكين الجيب السويسري" في مجال المراقبة. ميزات قوية جداً. يمكنهما مراقبة أي مؤشر تختاره. وإنشاء رسوم بيانية جميلة. لكن الإعداد معقد نسبياً. مناسب للمطورين ذوي الخبرة.

8.4 السجلات: كيف تبحث عند وجود مشكلة؟

المراقبة تخبرك "الموقع به مشكلة". لكن ما هي المشكلة بالتحديد ولماذا حدثت. تحتاج السجلات (logs) لتحديد ذلك.

السجلات مثل "مذكرات" البرنامج أثناء التشغيل. تسجل كل ما يحدث أثناء التشغيل:

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

الاستخدام الأساسي للسجلات

عرض سجلات التطبيق على الخادم:

bash

# عرض سجلات PM2
pm2 logs

# عرض سجلات وصول Nginx
tail -f /var/log/nginx/access.log

# عرض سجلات أخطاء Nginx
tail -f /var/log/nginx/error.log

حل سجلات متقدم

إذا كان المشروع معقداً نسبياً. يُنصح باستخدام أدوات احترافية لجمع السجلات:

Loki: مجاني ومفتوح المصدر. من نفس عائلة Prometheus.
ELK (Elasticsearch + Logstash + Kibana): قوي جداً لكن الإعداد معقد.
Sentry: أداة متخصصة في جمع أخطاء التطبيقات. تجمع معلومات الأخطاء تلقائياً.

8.5 التنبيهات: كيف تعرف فوراً عند وجود مشكلة؟

المراقبة تخبرك بوجود مشكلة. لكن إذا لم تكن تراقب لوحة المراقبة، فما العمل؟ هنا تحتاج التنبيهات (alerts).

التنبيهات هي إشعارات تلقائية يرسلها نظام المراقبة عند اكتشاف شذوذ، عبر SMS أو WeChat أو DingTalk أو البريد الإلكتروني، إلخ. يمكنك إعداد مستويات تنبيه مختلفة:

طارئ (الموقع معطل تماماً): إرسال SMS + اتصال هاتفي. يجب العلم فوراً.
خطير (معدل الأخطاء يرتفع بشكل حاد): إرسال رسالة DingTalk/WeChat. المعالجة عند الرؤية.
عادي (CPU مرتفع): إرسال ملخص بالبريد الإلكتروني. مراجعة مرة واحدة يومياً.

المبدأ الأساسي لإعداد التنبيهات: تنبيهات متدرجة، لا تزعج نفسك حتى الموت. إذا كان كل شيء صغير يرسل SMS. في وقت قصير ستقوم بإيقاف التنبيهات.

9. جدول مرجعي سريع للمشاكل الشائعة

ظاهرة المشكلة	السبب المحتمل	الحل
الموقع لا يفتح	النطاق غير محلول / الخادم متوقف / Nginx لم يبدأ	`ping domain` للتحقق من الاتصال؛ `pm2 list` لعرض حالة الخدمة؛ `systemctl status nginx` لعرض Nginx
صفحة فارغة عند الفتح	مسار ناتج البناء خاطئ / الملفات الثابتة غير مكوّنة بشكل صحيح	التحقق من أن مسار root في Nginx يشير إلى مجلد dist
404 الصفحة غير موجودة	التوجيه غير مكوّن بشكل صحيح / خطأ إملائي في المسار	إضافة `try_files $uri $uri/ /index.html` في تكوين Nginx
502 Bad Gateway	خدمة backend متوقفة / المنفذ غير مفتوح	`pm2 list` لعرض ما إذا كانت العملية تعمل؛ التحقق من صحة المنفذ
403 Forbidden	الصلاحيات غير صحيحة / فهرس الدليل غير مفعّل	التحقق من صلاحيات الملفات `chmod -R 755`؛ إضافة `autoindex on` في تكوين Nginx
شهادة HTTPS منتهية	الشهادة لم تُجدد	`certbot renew` للتجديد اليدوي؛ التحقق من مهمة التجديد التلقائي
لا تظهر التغييرات بعد التحديث	ذاكرة المتصفح المؤقتة / ذاكرة CDN المؤقتة	Ctrl+Shift+R للتحديث القسري؛ الذهاب إلى وحدة تحكم CDN و"تحديث ذاكرة التخزين المؤقت"
الموقع يفتح ببطء شديد	عرض النطاق غير كافٍ / بدون ذاكرة مؤقتة / بدون CDN	ترقية عرض النطاق للخادم؛ تكوين Redis cache؛ ربط CDN
لا يمكن الاتصال بقاعدة البيانات	قاعدة البيانات لم تبدأ / كلمة المرور خاطئة / مشكلة صلاحيات	التحقق من حالة خدمة قاعدة البيانات؛ مراجعة معلومات الاتصال في التكوين

الخلاصة

إطلاق الخدمة مشروع هندسي كبير وشامل. يشمل كل شيء من بناء الكود إلى نشر الخادم، من تكوين الشبكة إلى الحماية الأمنية، من المراقبة والتنبيهات إلى تحليل السجلات. للمبتدئين. لا حاجة للسعي للكمال منذ البداية. أولاً شغّل الحد الأدنى من النسخة القابلة للاستخدام (MVP). ثم حسّن تدريجياً.

النقاط الرئيسية للعملية بأكملها يمكن تلخيصها كالتالي:

العملية الأساسية

البناء → استخدام npm run build لتحويل الكود إلى HTML/CSS/JS يفهمها المتصفح
النشر → رفع ناتج البناء إلى الخادم. تكوين وكيل عكسي باستخدام Nginx.
النطاق → شراء نطاق وتكوين DNS ليشير إلى IP الخادم
HTTPS → طلب شهادة مجانية من Let's Encrypt. حماية نقل البيانات.
CI/CD → تكوين النشر التلقائي. الكود يُنشر تلقائياً بعد الدفع.
المراقبة → تكوين المراقبة والتنبيهات. العلم فوراً عند وجود مشاكل.

مسار التعلم المقترح

اليوم 1: نشر صفحة ويب ثابتة باستخدام Vercel/Netlify. تجربة الشعور بـ "الكود يتحول إلى موقع".
الأسبوع 1: استئجار خادم سحابي. نشر مشروع Node.js يدوياً. تكوين النطاق وHTTPS.
الأسبوع 2-4: تكوين عملية CI/CD كاملة. بناء نظام مراقبة وتنبيهات.
التعلم المستمر: تعلم حاويات Docker، تعلم مجموعات Kubernetes، تعلم بنية الخدمات المصغرة.

جدول مرجعي سريع للمصطلحات

المصطلح	الإنجليزية	شرح مبسّط
البناء	Build	ترجمة وتعبئة الكود المصدري إلى تنسيق يمكن للمتصفح تنفيذه
النشر	Deploy	وضع الكود على الخادم ليتمكن المستخدمون من الوصول إليه
الخادم	Server	حاسوب يعمل على مدار الساعة ومتصل بالإنترنت
النطاق	Domain	الاسم السهل التذكر للموقع (مثل baidu.com)
DNS	Domain Name System	"دفتر الهاتف" الذي يترجم النطاقات إلى عناوين IP
HTTP	HyperText Transfer Protocol	بروتوكول نقل صفحات الويب (غير آمن، نص عادي)
HTTPS	HTTP Secure	بروتوكول نقل مشفر لصفحات الويب (آمن)
Nginx	Engine X	خادم ويب عالي الأداء. يعمل كوكيل عكسي.
الوكيل العكسي	Reverse Proxy	"النادل عند الباب". يعيد توجيه الطلبات إلى الخلفية.
SSH	Secure Shell	أداة مشفرة لتسجيل الدخول عن بُعد إلى الخوادم
CDN	Content Delivery Network	شبكة خوادم موزعة عالمياً. تسريع الوصول.
CI/CD	Continuous Integration/Deployment	خط أنابيب آلي. اختبار ونشر تلقائي بعد دفع الكود.
SSL/TLS	Secure Sockets Layer / Transport Layer Security	بروتوكول تشفير. يوفر الأمان لـ HTTPS.
PM2	Process Manager 2	مدير عمليات Node.js. يبقي التطبيق يعمل باستمرار.

أتمتة CI / CD ​

1. لماذا نحتاج إلى "إطلاق الخدمة"؟ ​

2. البناء: تحويل الكود إلى "حزمة قابلة للحمل" ​

2.1 لماذا نحتاج إلى البناء؟ ​

2.2 ماذا يفعل البناء بالتحديد؟ ​

2.3 كيف تنفذ البناء؟ ​

2.4 ماذا يحتوي ناتج البناء؟ ​

3. الخادم: إيجاد "منزل" لا يغلق أبداً ​

3.1 ما هو الخادم بالضبط؟ ​

3.2 كيف تختار خادماً؟ ​

3.4 مقارنة بين مقدمي الخدمات السحابية الرئيسيين ​

3.5 ماذا تفعل بعد الحصول على الخادم؟ ​

4. النشر: نقل الكود إلى "المنزل" ​

4.1 ما هو النشر؟ ​

4.2 كيف ترفع الكود إلى الخادم؟ ​

4.3 خطوات النشر المحددة ​

5. النطاق وDNS: إعطاء الموقع اسماً جميلاً ​

5.1 لماذا نشتري نطاقاً؟ ​

5.2 ما هو DNS؟ ​

5.3 كيف تكوّن DNS؟ ​

5.4 كم يستغرق DNS ليصبح سارياً؟ ​

6. HTTPS: تركيب "قفل" للموقع ​

6.1 الفرق بين HTTP وHTTPS ​

6.2 لماذا HTTPS؟ ​

6.3 كيف تحصل على شهادة HTTPS؟ ​

6.4 ما الذي يتغير بعد تكوين HTTPS؟ ​

7. CI/CD: دع الروبوت يعمل نيابة عنك ​

7.1 ما هو CI/CD؟ ​

7.2 سير عمل CI/CD ​

7.3 كيف تكوّن GitHub Actions؟ ​

8. المراقبة والسجلات: أن تكون "الحارس الليلي" للموقع ​

8.1 لماذا المراقبة؟ ​

8.2 ما هي المؤشرات التي يجب مراقبتها؟ ​

8.3 كيف تكوّن المراقبة؟ ​

8.4 السجلات: كيف تبحث عند وجود مشكلة؟ ​

8.5 التنبيهات: كيف تعرف فوراً عند وجود مشكلة؟ ​

9. جدول مرجعي سريع للمشاكل الشائعة ​

الخلاصة ​

العملية الأساسية ​

مسار التعلم المقترح ​

جدول مرجعي سريع للمصطلحات ​

أتمتة CI / CD

1. لماذا نحتاج إلى "إطلاق الخدمة"؟

2. البناء: تحويل الكود إلى "حزمة قابلة للحمل"

2.1 لماذا نحتاج إلى البناء؟

2.2 ماذا يفعل البناء بالتحديد؟

2.3 كيف تنفذ البناء؟

2.4 ماذا يحتوي ناتج البناء؟

3. الخادم: إيجاد "منزل" لا يغلق أبداً

3.1 ما هو الخادم بالضبط؟

3.2 كيف تختار خادماً؟

3.4 مقارنة بين مقدمي الخدمات السحابية الرئيسيين

3.5 ماذا تفعل بعد الحصول على الخادم؟

4. النشر: نقل الكود إلى "المنزل"

4.1 ما هو النشر؟

4.2 كيف ترفع الكود إلى الخادم؟

4.3 خطوات النشر المحددة

5. النطاق وDNS: إعطاء الموقع اسماً جميلاً

5.1 لماذا نشتري نطاقاً؟

5.2 ما هو DNS؟

5.3 كيف تكوّن DNS؟

5.4 كم يستغرق DNS ليصبح سارياً؟

6. HTTPS: تركيب "قفل" للموقع

6.1 الفرق بين HTTP وHTTPS

6.2 لماذا HTTPS؟

6.3 كيف تحصل على شهادة HTTPS؟

6.4 ما الذي يتغير بعد تكوين HTTPS؟

7. CI/CD: دع الروبوت يعمل نيابة عنك

7.1 ما هو CI/CD؟

7.2 سير عمل CI/CD

7.3 كيف تكوّن GitHub Actions؟

8. المراقبة والسجلات: أن تكون "الحارس الليلي" للموقع

8.1 لماذا المراقبة؟

8.2 ما هي المؤشرات التي يجب مراقبتها؟

8.3 كيف تكوّن المراقبة؟

8.4 السجلات: كيف تبحث عند وجود مشكلة؟

8.5 التنبيهات: كيف تعرف فوراً عند وجود مشكلة؟

9. جدول مرجعي سريع للمشاكل الشائعة

الخلاصة

العملية الأساسية

مسار التعلم المقترح

جدول مرجعي سريع للمصطلحات