استضافة nextjs في vps server

لإستضافة مشروع Next.js في خادم خاص VPS يمكنك إتباع الخطوات التالية:

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

  أيضًا ستحتاج إلى شراء نطاق / مجال Domain لكي تتمكن من تشغيل مشروعك عبر الإنترنت، حيث أن شركات الإستضافة تمنحك الخادم فقط في أغلب الأحيان، لذلك يجب أن تقوم بشراء نطاق لموقعك بنفسك من خلال أحد شركات الإستضافة مثل namechape أو GoDaddy ..إلخ ، لذلك يجب أن يكون لديك مجال يشير إلى خادم الويب الذي تم إنشاؤه حديثًا.

• تثبيت وضبط Nginx
  الآن أنت بحاجة إلى برنامج لكي يدير الطلبات التي تصل إلى خادم الويب الذي قمنا بإنشائه في السابق،  يمكنك تنفيذ الأمر التالي لتثبيت Nginx:

  sudo apt-get update && sudo apt-get install nginx

  بعد ذلك يجب أن تقوم بالسماح لـ Nginx بأن يمر من خلال جدار الحماية من خلال الأمر التالي:
   

  sudo ufw allow 'Nginx HTTP'

  الآن يمكنك تشغيل Nginx من خلال الأمر التالي:
   

  systemctl status nginx

  ومن المفترض أن تظهر لك نتيجة كالتالي:
   

  ● nginx.service - A high performance web server and a reverse proxy server
      Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
      Active: active (running) since Mon 2016-04-18 16:14:00 EDT; 4min 2s ago
    Main PID: 12857 (nginx)
      CGroup: /system.slice/nginx.service
        ├─12857 nginx: master process /usr/sbin/nginx -g daemon on; master_process on
        └─12858 nginx: worker process

  لاحظ كلمة active في السطر الثالث، وهذا يعني أن Nginx يعمل الآن بدون مشكلة، يمكنك أن تزور عنوان الخادم من خلال المتصفح وستجد صفحة Welcome to Nginx، كما في الصورة:
  

• قم بتثبيت Node.js
  لنشر مشروع مبني بإستخدام Next.js (أو أي مشروع آخر مبني بإستخدام JavaScript) ستحتاج إلى تثبيت Node.js وكذلك NPM ، ويمكنك تثبيتهما من خلال الأوامر التالية:

  curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
  sudo apt-get install -y nodejs

  أيضًا توجد الكثير من الحزم التي تعتمد على حزمة build-essential والتالي نحتاج إلى تثبيتها من خلال الأمر التالي:
   

  apt-get install -y build-essential

  الآن يمكنك التأكد من أن كل من Node.js  و NPM قد تم تثبيتهما بشكل سليم من خلال الأمر التالي:
   

  node --version
  npm --version

  وسيظهر لك إصدار كل منهما.

• انشر تطبيق Next.js
  الآن نحتاج إلى إرسال الكود إلى الخادم لكي يمكنه العمل، لذلك يمكنك أن تقوم برفع الكود إلى مستودع repo على GitHub إن لم تقم بهذا من قبل (أو يمكنك أن تستعمل بروتوكول FTP  ولكن خطوات تثبيته كثيرة كما أنه بطيء للغاية مقارنة بـ GitHub)، ويمكنك تحميل الكود إلى الخادم من خلال الأمر التالي:

  git clone https://github.com/your_github_username/your_repository_name.git website

  سيقوم الأمر التالي بتحميل الكود الخاص بك من GitHub إلى الخادم ، وسيضعه في مجلد باسم website، الآن يجب تثبيت الحزم الخاصة بالمشروع عبر الأوامر التالية:
   

  cd website
  npm install
  npm run dev

  إن ظهر لك نص كالتالي، فأن كل شيء يعمل على ما يرام:
   

  ready - started server on http://localhost:3000

  الآن يمكنك الخروج من الأمر الأخير من خلال الضغط على Ctrl + C، ثم تنفيذ الأمر التالي، لإنتاج الكود النهائي للمشروع:
   

  npm run build

  ستلاحظ أنه تم إنشاء مجلد باسم /.next، والآن ستحتاج إلى حزمة pm2 لكي تتأكد من أن التطبيق يعمل طوال الوقت بدون إنقطاع، ويمكنك تثبيت هذه الحزمة عبر الأمر:

  sudo npm install -g pm2

  ثم يجب تشغيل المشروع من خلالها عبر الأمر التالي:
   

  pm2 start --name=website npm -- start

   

• قم بضبط Nginx كـ reverse proxy
  كل المتبقي الآن هو إتاحة الموقع للتشغيل عبر إنترنت 

  cd /etc/nginx/sites-available
  sudo touch example.com
  sudo nano example.com

  بعد ذلك يمكنك إضافة الكود التالي لكي يتم تحويل الطلبات من الإنترنت إلى المنفذ 3000، 

  server {
          listen 80;
          listen [::]:80;
  
          root /var/www/html;
          index index.html index.htm index.nginx-debian.html;
  
          server_name example.com www.example.com;
  
          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;
          }
  }

  تأكد من تغير example.com و www.example.com إلى نطاق الموقع الصحيح
  بعد ذلك ستحتاج إلى تشغيل الملف example.com السابق هذا إلى Nginx عبر الأوامر التالية:
   

  sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
  sudo nginx -t
  sudo systemctl restart nginx

   

بهذا الشكل يمكنك زيارة الموقع الخاص بك من خلال متصفح الويب عبر زيارة نطاق الموقع بشكل مباشر (سواء بإستخدام www أو بدونها).