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

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

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

وقت القراءة: 16 دقيقة استضافة الويب / التطبيقات
nextjsreactnodejspm2nginxdeployvpsjavascriptci-cd

جدول المحتويات

نشر 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.