مقدمة
Next.js هو إطار عمل React شائع الاستخدام لإنشاء تطبيقات React مُقدّمة من الخادم بسهولة. في هذا البرنامج التعليمي، سنشرح كيفية نشر تطبيق Next.js على خادم DigitalOcean باستخدام Nginx كوكيل عكسي. يفترض هذا الدليل التفصيلي أن لديك تطبيق Next.js جاهزًا للنشر وحسابًا على DigitalOcean.
المتطلبات الأساسية
- تطبيق Next.js
- حساب DigitalOcean
- اسم النطاق المسجل (اختياري ولكن يوصى به)
- التثبيت المحلي لـ Node.js و npm أو yarn
الخطوة 1: إنشاء قطرة DigitalOcean
سنستضيف تطبيق Next.js على منصة DigitalOcean Droplet التي سنقوم بتكوينها بأنفسنا. لنبدأ الآن بإنشاء المنصة.
- قم بتسجيل الدخول إلى حساب DigitalOcean الخاص بك وانتقل إلى قسم Droplets.
- انقر فوق "إنشاء DROPLET".
- حدد صورة Ubuntu (يفضل أحدث إصدار LTS).
- اختر حجم القطرة المطلوب وفقًا لاحتياجاتك وميزانيتك.
- للحصول على أداء أفضل، اختر منطقة مركز البيانات الأقرب لجمهورك المستهدف.
- أضف مفاتيح SSH الخاصة بك للوصول الآمن إلى Droplet الخاص بك.
- اختر اسم مضيف لقطرتك، والذي يمكن أن يكون اسم المجال الخاص بك أو أي اسم مفضل.
- انقر فوق "إنشاء DROPLET".
- إنشاء القطرة
بعد إنشاء Droplet، لاحظ عنوان IP المخصص له.
الخطوة 2: تشغيل Droplet
الآن بعد أن قمنا بإنشاء القطرة، نحتاج إلى إعدادها حتى تتمكن من قبول الاتصالات الواردة وتوجيه تلك الاتصالات إلى تطبيق Next.js الخاص بنا.
قم بتسجيل الدخول إلى Droplet الخاص بك عبر SSH باستخدام عنوان IP ومفتاح SSH الذي قدمته أثناء إنشاء Droplet:
ssh root@<DROPLET_IP>
تحديث وترقية الحزم في Droplet:
sudo apt update && sudo apt upgrade -y
تثبيت الحزم المطلوبة:
sudo apt install -y nodejs npm nginx
الخطوة 3: تكوين Nginx
Nginx هي الأداة المسؤولة عن توجيه جميع عمليات تطبيق Next.js. أنشئ ملف تهيئة Nginx جديدًا لتطبيق Next.js:
sudo nano /etc/nginx/sites-available/nextjs
قم بلصق التكوين التالي، واستبدال server_name باسم نطاق Droplet الخاص بك أو عنوان IP:
server {
listen 80;
server_name YOUR_IP_ADDRESS;
location / {
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_cache_bypass $http_upgrade;
}
}احفظ الملف وأغلقه. أنشئ رابطًا رمزيًا لتفعيل التكوين:
sudo ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled/
اختبار تكوين Nginx بحثًا عن أي أخطاء نحوية:
sudo nginx -t
إذا كان اختبار التكوين ناجحًا، فأعد تشغيل Nginx:
sudo service nginx restart
الخطوة 4: نشر تطبيق Next.js
بعد ذلك، سنضيف تطبيق Next.js إلى Droplet. هناك خيارات عديدة للقيام بذلك.
- قم بإنشاء مفتاح SSH على الخادم، وقم بتوصيله بحساب GitHub الخاص بك، ثم استنسخ مستودعك.
- إنشاء تطبيق Next.js في Droplet
في هذا البرنامج التعليمي، سنقوم بإنشاء تطبيق Next.js جديد في Droplet الخاص بنا.
العودة إلى Droplet الخاص بك عبر SSH:
ssh root@<DROPLET_IP>
قم بإنشاء تطبيق Next.js جديد واتبع التعليمات:
cd /var/www
npx create-next-app nextjsانتقل إلى دليل تطبيق Next.js:
cd nextjs
تثبيت تبعيات البرنامج:
npm install
إنشاء تطبيق Next.js:
npm run build
وأخيرًا، قم بتشغيل تطبيق Next.js:
npm start
تم الآن نشر تطبيق Next.js الخاص بك ويمكن الوصول إليه عبر اسم نطاق Droplet أو عنوان IP الخاص بك. لتشغيل تطبيقك في الخلفية وإعادة تشغيله تلقائيًا عند تعطل الخادم أو إعادة تشغيله، ستحتاج إلى استخدام مدير عمليات مثل PM2.
الخطوة 5: تشغيل PM2 Process Manager
بدأنا تشغيل npm من داخل Droplet. قد يتوقف هذا الأمر أحيانًا لأسباب مثل إعادة تشغيل الخادم أو الحاجة إلى تثبيت تحديث. سنستخدم أداة PM2 لضمان استمرار تشغيل تطبيق Next.js. ستُعاد تشغيل PM2 حتى في حالة تعطل تطبيق Next.js.
لتثبيت PM2 عالميًا على القطرة الخاصة بك:
sudo npm install -g pm2
انتقل إلى دليل تطبيق Next.js (إذا لم يكن موجودًا هناك بالفعل):
cd /var/www/nextjs
ابدأ تطبيق Next.js باستخدام PM2:
pm2 start npm --name "nextjs" -- start
يُشغّل هذا الأمر تطبيق Next.js المسمى "nextjs" باستخدام أمر npm start. سيُعيد PM2 تشغيل التطبيق تلقائيًا في حال تعطل الخادم أو إعادة تشغيله.
لتتأكد من بدء تشغيل PM2 عند بدء التشغيل، قم بتشغيل:
pm2 startup
سيؤدي هذا الأمر إلى إنشاء نص برمجي يمكنك نسخه ولصقه في محطتك لبدء تشغيل PM2 في وقت التمهيد.
حفظ عمليات PM2 الحالية:
pm2 save
نتيجة
لقد نجحت الآن في تشغيل تطبيق Next.js على خادم DigitalOcean باستخدام Nginx كوكيل عكسي وPM2 كمدير عمليات. يجب أن يكون تطبيقك متاحًا عبر اسم نطاق خادمك أو عنوان IP.
إذا كنت تستخدم اسم نطاق، فتذكر ضبط إعدادات DNS. وجّه سجل A الخاص بنطاقك إلى عنوان IP الخاص بجهازك لتتمكن من الوصول إلى التطبيق باستخدام اسم النطاق.
لتحسين الأمان وتحسين محركات البحث، فكّر في إعداد شهادات SSL باستخدام Let's Encrypt وتنفيذ اتصالات HTTPS. بالإضافة إلى ذلك، يمكنك استكشاف تحسين تطبيق Next.js باستخدام التخزين المؤقت وتحسينات الأداء الأخرى.
