انتقل إلى المحتوى الرئيسي
العودة إلى الفئة

نشر Next.js و React: بيئة إنتاج على VPS

دليل نشر تطبيقات Next.js و React على VPS. إعداد Node.js، بناء وتشغيل Next.js، مدير العمليات PM2، وكيل Nginx العكسي، متغيرات البيئة وأساسيات CI/CD.

وقت القراءة: 16 دقيقة استضافة الويب / التطبيقات
nextjsreactnodejspm2nginxdeployvpsjavascriptci-cd
الكاتب
REXE Teknoloji Network & Security Team
المحرر
REXE Teknoloji Technical Editorial
أول نشر
آخر تحديث

نشر Next.js و React: بيئة إنتاج على VPS

Next.js هو الإطار الأكثر شيوعاً لتطبيقات الويب الحديثة المبنية على React. تشغيل Next.js على VPS الخاص بك بدلاً من منصات مثل Vercel يوفر توفيراً في التكاليف وتحكماً كاملاً وإمكانيات تخصيص. يرشدك هذا الدليل خلال نشر تطبيق Next.js على VPS خطوة بخطوة.

تثبيت Node.js (عبر nvm)

hljs bash
# تثبيت nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc

# تثبيت إصدار LTS
nvm install --lts
nvm use --lts
nvm alias default node

node --version
npm --version

نقل التطبيق إلى الخادم

hljs bash
sudo mkdir -p /var/www/mynextapp
sudo chown $USER:$USER /var/www/mynextapp
cd /var/www
git clone https://github.com/user/mynextapp.git
cd mynextapp
npm install

متغيرات البيئة

hljs env
NODE_ENV=production
NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
NEXTAUTH_SECRET=مفتاحك-السري-هنا
NEXTAUTH_URL=https://example.com

المتغيرات التي تبدأ بـ NEXT_PUBLIC_ مرئية في المتصفح. لا تستخدم هذا البادئة للمعلومات الحساسة.

بناء Next.js والمخرجات المستقلة

hljs javascript
// next.config.js
const nextConfig = {
  output: 'standalone',
  images: {
    domains: ['example.com'],
  },
};

module.exports = nextConfig;
hljs bash
# إنشاء بناء الإنتاج
npm run build

إدارة العمليات مع PM2

hljs javascript
// ecosystem.config.js
module.exports = {
  apps: [
    {
      name: 'mynextapp',
      script: '.next/standalone/server.js',
      cwd: '/var/www/mynextapp',
      instances: 'max',
      exec_mode: 'cluster',
      env: {
        NODE_ENV: 'production',
        PORT: 3000,
        HOSTNAME: '0.0.0.0'
      },
      max_memory_restart: '1G',
      autorestart: true
    }
  ]
};
hljs bash
# نسخ الملفات الثابتة للبناء المستقل
cp -r .next/static .next/standalone/.next/static
cp -r public .next/standalone/public

# تشغيل التطبيق
pm2 start ecosystem.config.js
pm2 startup
pm2 save

إعداد وكيل Nginx العكسي

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

    location /_next/static/ {
        alias /var/www/mynextapp/.next/static/;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    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_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }

    gzip on;
    gzip_types text/plain text/css application/json application/javascript;
    client_max_body_size 50M;
}
hljs bash
sudo ln -s /etc/nginx/sites-available/mynextapp /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx

شهادة SSL

hljs bash
sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d example.com -d www.example.com

أساسيات CI/CD (GitHub Actions)

hljs yaml
name: Deploy to VPS
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - 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/mynextapp
            git pull origin main
            npm install
            npm run build
            cp -r .next/static .next/standalone/.next/static
            cp -r public .next/standalone/public
            pm2 reload mynextapp

سير عمل النشر اليدوي

hljs bash
cd /var/www/mynextapp
git pull origin main
npm install
npm run build
cp -r .next/static .next/standalone/.next/static
cp -r public .next/standalone/public
pm2 reload mynextapp

على خوادم REXE، يُوصى بـ 1 جيجابايت ذاكرة RAM على الأقل لـ Next.js. قد تحتاج التطبيقات الكبيرة إلى 2 جيجابايت+ أثناء البناء. استخدم وضع الكتلة في PM2 للاستفادة الكاملة من أنوية CPU.

الخلاصة

تطبيق Next.js الخاص بك يعمل الآن في بيئة إنتاج على VPS، مُدار بواسطة PM2، خلف وكيل Nginx العكسي ومؤمَّن بـ SSL. أنشئ CI/CD pipeline مع GitHub Actions لتمكين النشر التلقائي عند كل push.

الأسئلة الشائعة

أحصل على خطأ 'out of memory' أثناء بناء Next.js.

زد حد ذاكرة Node.js أثناء البناء: 'NODE_OPTIONS="--max-old-space-size=4096" npm run build'. تأكد من أن الخادم يحتوي على 2 جيجابايت RAM على الأقل. استخدام المخرجات المستقلة في المشاريع الكبيرة يقلل وقت البناء واستهلاك الذاكرة.

تحسين الصور في Next.js لا يعمل.

تحقق من إعداد images.domains أو images.remotePatterns في next.config.js. تحقق من أن مسار /_next/image/ في Nginx يحتوي على إعداد وكيل صحيح. تأكد من تثبيت حزمة sharp: 'npm install sharp'.

مسارات API لا تعمل، أحصل على أخطاء 404.

تأكد من أن مسار /api/ في Nginx يوكّل إلى تطبيق Next.js. عند استخدام البناء المستقل، تحقق من تشغيل server.js بشكل صحيح. راجع سجلات PM2: 'pm2 logs mynextapp'.

تطبيق Next.js بطيء، كيف أحسّنه؟

استخدم المخرجات المستقلة (output: 'standalone' في next.config.js). فعّل وضع الكتلة في PM2. أضف تخزيناً مؤقتاً طويل الأمد لـ /_next/static/ في Nginx. استخدم next/image لتحسين الصور. حدد الحزم الكبيرة باستخدام bundle analyzer.

مقالات ذات صلة

نشر تطبيق Node.js: دليل PM2 و Nginx

دليل شامل لنشر تطبيقات Node.js على VPS. تثبيت Node.js عبر nvm، مدير العمليات PM2، وكيل Nginx العكسي، شهادة SSL وإدارة متغيرات البيئة.

15 دقيقة
nodejspm2nginx

نشر تطبيق PHP: دليل LAMP و LEMP Stack

دليل شامل لنشر تطبيقات PHP على VPS. مقارنة LAMP و LEMP، إعداد Apache/Nginx + PHP-FPM + MySQL، تهيئة المضيف الافتراضي وإدارة إصدارات PHP.

18 دقيقة
phplamplemp

تثبيت WordPress وتحسينه: دليل VPS

دليل تثبيت وتحسين WordPress على VPS. إعداد LEMP Stack، إعدادات wp-config.php، صلاحيات الملفات، SSL، تحسين أداء OPcache وتعزيز الأمان.

20 دقيقة
wordpressvpslemp
حركة الشبكةالداخل Gbpsالخارج Gbps