يتضمن نشر تطبيق Next.js على خادم خاص افتراضي (VPS) عدة خطوات أساسية، بدءًا من إعداد بيئة الخادم وحتى تكوين بروكسي عكسي ومدير عمليات. يركز هذا الدليل على استخدام خادم VPS قائم على Ubuntu و Nginx كبروكسي عكسي و PM2 لإدارة العمليات، إلى جانب Certbot لشهادات SSL.

المتطلبات الأساسية:

• خادم VPS يعمل بنظام Ubuntu (على سبيل المثال، 20.04 أو 22.04 أو 24.04).
• اسم نطاق مسجل مع سجلات DNS تشير إلى عنوان IP لخادم VPS الخاص بك.
• معرفة أساسية بسطر أوامر Linux.
• تطبيق Next.js الخاص بك جاهز للإنتاج (من الأفضل أن يتم دفعه إلى مستودع Git).

الخطوة 1: الاتصال بـ VPS الخاص بك وتحديث النظام

1. الاتصال عبر SSH: افتح المحطة الطرفية واتصل بـ VPS الخاص بك باستخدام SSH: bash ssh your_username@your_vps_ip استبدل your_vps_ip بعنوان IP الفعلي لـ VPS الخاص بك.

2. تحديث وترقية حزم النظام: من الضروري التأكد من أن حزم الخادم محدثة من أجل الأمان والاستقرار. bash sudo apt update && sudo apt upgrade -y

الخطوة 2: تثبيت Node.js و npm/yarn

يتطلب Next.js Node.js. يمكنك تثبيت Node.js باستخدام Node Version Manager (NVM) لإدارة الإصدارات بمرونة، أو مباشرة من مستودعات Ubuntu. يوصى عمومًا باستخدام NVM.

الخيار أ: تثبيت Node.js باستخدام NVM (موصى به) 1. تثبيت NVM: bash curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash (ملاحظة: الإصدار v0.39.7 مأخوذ من نتيجة بحث. يمكنك التحقق من صفحة NVM GitHub للحصول على أحدث إصدار.) 2. تنشيط NVM: قد تحتاج إلى إغلاق وإعادة فتح المحطة الطرفية، أو تشغيل أحد الأوامر التالية حسب الغلاف الخاص بك: bash source ~/.bashrc # أو source ~/.profile أو source ~/.zshrc 3. تثبيت إصدار Node.js LTS: bash nvm install --lts أو بدلاً من ذلك، قم بتثبيت إصدار معين، على سبيل المثال، nvm install 20. 4. تحقق من التثبيت: bash node -v npm -v يجب أن يعرض هذا إصدارات Node.js و npm المثبتة.

الخيار ب: تثبيت Node.js و npm من مستودعات Ubuntu 1. تثبيت Node.js: bash sudo apt install nodejs -y 2. تثبيت npm: bash sudo apt install npm -y 3. التحقق من التثبيت: bash node -v npm -v

الخطوة 3: نشر تطبيق Next.js

1. نسخ مستودعك: انتقل إلى دليل مناسب (على سبيل المثال، /var/www/) وانسخ مشروع Next.js من مستودع Git الخاص بك. bash sudo mkdir -p /var/www/your-app-name sudo chown -R your_username:your_username /var/www/your-app-name cd /var/www/your-app-name git clone https://github.com/your-username/your-nextjs-app.git . إذا كان مستودعك خاصًا، فتأكد من إعداد مفاتيح SSH أو استخدم رمز وصول شخصي للنسخ عبر HTTPS.

2. تثبيت التبعيات والبناء: قم بتثبيت تبعيات مشروعك ثم قم ببناء تطبيق Next.js للإنتاج. bash npm install # أو yarn install npm run build # أو yarn build يقوم الأمر npm run build بإنشاء بنية إنتاجية محسّنة لتطبيقك.

الخطوة 4: تثبيت وتكوين PM2 (مدير العمليات)

PM2 هو مدير عمليات الإنتاج لتطبيقات Node.js الذي يحافظ على استمرارها إلى أجل غير مسمى ويسهل إدارتها.

npm install -g pm2 

ابدأ تشغيل تطبيق Next.js باستخدام PM2. عادةً ما تعمل تطبيقات Next.js على localhost:3000 بشكل افتراضي.

pm2 start npm --name "my-nextjs-app" -- start 

استبدل "my-nextjs-app" باسم وصفية لتطبيقك.

لضمان إعادة تشغيل PM2 لتطبيقك عند إعادة تشغيل الخادم:

pm2 startup systemd pm2 save 

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

سيعمل Nginx كوكيل عكسي، حيث يقوم بإعادة توجيه الطلبات من نطاقك إلى تطبيق Next.js الذي يعمل على المنفذ 3000.

sudo apt install nginx -y 

أنشئ ملف تكوين Nginx جديد لموقعك. استبدل your_domain.com بنطاقك الفعلي.

sudo nano /etc/nginx/sites-available/your_domain.com

أضف التكوين التالي:

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

 location / {
 proxy_pass http://localhost:3000; # Next.js default port
 proxy_http_version 1.1;
 proxy_set_header ترقية $http_upgrade;
 proxy_set_header Connection 'upgrade';
 proxy_set_header Host $host;
 proxy_cache_bypass $http_upgrade;  }
} 

قم بتمكين الموقع عن طريق إنشاء رابط رمزي إلى sites-enabled واختبر تكوين Nginx:

sudo ln -s /etc/nginx/sites-available/your_domain.com /etc/nginx/sites-enabled/
sudo nginx -t 

إذا نجح الاختبار، أعد تشغيل Nginx:

sudo systemctl restart nginx

الخطوة 6: تكوين جدار الحماية (UFW)

إذا كنت تستخدم UFW (جدار الحماية غير المعقد)، فقم بالسماح بحركة مرور HTTP (المنفذ 80) و HTTPS (المنفذ 443).

sudo ufw allow 'Nginx Full'
sudo ufw enable 

الخطوة 7: (اختياري) إعداد SSL باستخدام Certbot (Let's Encrypt)

لتأمين تطبيقك باستخدام HTTPS، استخدم Certbot للحصول على شهادات SSL من Let's Encrypt وتكوينها.

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d your_domain.com -d www.your_domain.com 

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

الخطوة 8: تحقق من النشر

يجب أن يكون تطبيق Next.js الخاص بك الآن متاحًا عبر اسم المجال الخاص بك (أو عنوان IP VPS إذا تخطيت إعداد المجال) عبر HTTPS. افتح متصفح الويب الخاص بك وانتقل إلى https://your_domain.com.

(اختياري) إعداد CI/CD

بالنسبة لعمليات النشر التلقائية، ضع في اعتبارك إعداد مسار التكامل المستمر/النشر المستمر (CI/CD) باستخدام أدوات مثل GitHub Actions أو GitLab CI أو Jenkins. سيؤدي ذلك إلى أتمتة خطوات استنساخ تطبيقك وتثبيته وبنائه وإعادة تشغيله على VPS كلما قمت بدفع كود جديد إلى مستودعك.

يجب أن يكون تطبيق Next.js الخاص بك الآن متاحًا عبر اسم المجال الخاص بك!