• 1

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

كيف تتم استضافة مشروع next في vps server وماهي الخطوات التي يجب علي اتباعها 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 2

لإستضافة مشروع 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، كما في الصورة:
    default_nginx.png.d6121e2a755a86e6bc4a1e2b0bbfeb04.png

  • قم بتثبيت 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 أو بدونها).

3 اشخاص أعجبوا بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن