نشر Next.js و React: بيئة إنتاج على VPS
دليل نشر تطبيقات Next.js و React على VPS. إعداد Node.js، بناء وتشغيل Next.js، مدير العمليات PM2، وكيل Nginx العكسي، متغيرات البيئة وأساسيات CI/CD.
جدول المحتويات
نشر Next.js و React: بيئة إنتاج على VPS
Next.js هو الإطار الأكثر شيوعاً لتطبيقات الويب الحديثة المبنية على React. تشغيل Next.js على VPS الخاص بك بدلاً من منصات مثل Vercel يوفر توفيراً في التكاليف وتحكماً كاملاً وإمكانيات تخصيص. يرشدك هذا الدليل خلال نشر تطبيق Next.js على VPS خطوة بخطوة.
تثبيت Node.js (عبر nvm)
# تثبيت 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
نقل التطبيق إلى الخادم
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
متغيرات البيئة
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 والمخرجات المستقلة
// next.config.js
const nextConfig = {
output: 'standalone',
images: {
domains: ['example.com'],
},
};
module.exports = nextConfig;
# إنشاء بناء الإنتاج
npm run build
إدارة العمليات مع PM2
// 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
}
]
};
# نسخ الملفات الثابتة للبناء المستقل
cp -r .next/static .next/standalone/.next/static
cp -r public .next/standalone/public
# تشغيل التطبيق
pm2 start ecosystem.config.js
pm2 startup
pm2 save
إعداد وكيل 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;
}
sudo ln -s /etc/nginx/sites-available/mynextapp /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx
شهادة SSL
sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d example.com -d www.example.com
أساسيات CI/CD (GitHub Actions)
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
سير عمل النشر اليدوي
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.
مقالات ذات صلة
نشر تطبيق Node.js: دليل PM2 و Nginx
دليل شامل لنشر تطبيقات Node.js على VPS. تثبيت Node.js عبر nvm، مدير العمليات PM2، وكيل Nginx العكسي، شهادة SSL وإدارة متغيرات البيئة.
نشر تطبيق PHP: دليل LAMP و LEMP Stack
دليل شامل لنشر تطبيقات PHP على VPS. مقارنة LAMP و LEMP، إعداد Apache/Nginx + PHP-FPM + MySQL، تهيئة المضيف الافتراضي وإدارة إصدارات PHP.
تثبيت WordPress وتحسينه: دليل VPS
دليل تثبيت وتحسين WordPress على VPS. إعداد LEMP Stack، إعدادات wp-config.php، صلاحيات الملفات، SSL، تحسين أداء OPcache وتعزيز الأمان.