Next.js ve React Deploy: VPS'te Üretim Ortamı

Next.js ve React Deploy: VPS'te Üretim Ortamı Kurulumu

Next.js, React tabanlı modern web uygulamaları için en popüler framework'tür. Vercel gibi platformlar yerine kendi VPS'inizde Next.js çalıştırmak; maliyet tasarrufu, tam kontrol ve özelleştirme imkânı sunar. Bu rehberde Next.js uygulamanızı VPS'e deploy etmeyi adım adım öğreneceksiniz.

Node.js Kurulumu (nvm ile)

hljs bash

# nvm kur
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc

# LTS sürümünü kur
nvm install --lts
nvm use --lts
nvm alias default node

# Sürümleri kontrol et
node --version
npm --version

Uygulamayı Sunucuya Aktarma

hljs bash

# Uygulama dizini oluştur
sudo mkdir -p /var/www/mynextapp
sudo chown $USER:$USER /var/www/mynextapp

# Repoyu klonla
cd /var/www
git clone https://github.com/kullanici/mynextapp.git
cd mynextapp

# Bağımlılıkları kur
npm install

Environment Variables

hljs bash

# .env.local dosyası oluştur
nano /var/www/mynextapp/.env.local

hljs env

NODE_ENV=production
NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
NEXTAUTH_SECRET=gizli-anahtar-buraya
NEXTAUTH_URL=https://example.com

NEXT_PUBLIC_ öneki ile başlayan değişkenler tarayıcıda görünür. Hassas bilgileri (API anahtarları, veritabanı şifreleri) bu önekle kullanmayın.

Next.js Build ve Standalone Çıktı

hljs bash

# next.config.js'de standalone output etkinleştir

hljs javascript

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
  // Diğer ayarlar
  images: {
    domains: ['example.com'],
  },
  // Üretim için güvenlik başlıkları
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'X-Content-Type-Options', value: 'nosniff' },
          { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

hljs bash

# Üretim build'i oluştur
npm run build

# Build'i test et
npm start

PM2 ile Process Yönetimi

hljs bash

# PM2 kur
npm install -g pm2

# ecosystem.config.js oluştur
nano /var/www/mynextapp/ecosystem.config.js

hljs javascript

module.exports = {
  apps: [
    {
      name: 'mynextapp',
      script: 'node_modules/.bin/next',
      args: 'start',
      cwd: '/var/www/mynextapp',
      instances: 'max',
      exec_mode: 'cluster',
      env: {
        NODE_ENV: 'production',
        PORT: 3000
      },
      error_file: '/var/log/pm2/mynextapp-error.log',
      out_file: '/var/log/pm2/mynextapp-out.log',
      max_memory_restart: '1G',
      autorestart: true,
      watch: false
    }
  ]
};

hljs bash

# Uygulamayı başlat
pm2 start ecosystem.config.js

# Sistem başlangıcında otomatik başlatma
pm2 startup
pm2 save

# Durum kontrolü
pm2 status
pm2 logs mynextapp

Standalone Build ile PM2 (Daha Hızlı)

hljs javascript

// Standalone output için 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

# Standalone build için statik dosyaları kopyala
cp -r .next/static .next/standalone/.next/static
cp -r public .next/standalone/public

Nginx Reverse Proxy Yapılandırması

hljs bash

sudo apt install nginx -y
sudo nano /etc/nginx/sites-available/mynextapp

hljs nginx

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

    # Next.js statik dosyaları için cache
    location /_next/static/ {
        alias /var/www/mynextapp/.next/static/;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # Public klasörü
    location /public/ {
        alias /var/www/mynextapp/public/;
        expires 30d;
        add_header Cache-Control "public";
    }

    # Next.js uygulamasına proxy
    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;
        proxy_read_timeout 86400;
    }

    # Gzip sıkıştırma
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
    gzip_min_length 1000;

    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 Sertifikası

hljs bash

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

CI/CD Temelleri (GitHub Actions)

hljs bash

# .github/workflows/deploy.yml

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

GitHub Actions secrets'a SERVER_HOST, SERVER_USER ve SSH_PRIVATE_KEY değerlerini ekleyin. SSH key'i sunucunun authorized_keys dosyasına ekleyin.

Deployment Workflow (Manuel)

hljs bash

# Güncellemeleri deploy et
cd /var/www/mynextapp
git pull origin main
npm install
npm run build

# Standalone build için
cp -r .next/static .next/standalone/.next/static
cp -r public .next/standalone/public

# Sıfır downtime ile yeniden başlat
pm2 reload mynextapp

# Logları kontrol et
pm2 logs mynextapp --lines 50

REXE sunucularında Next.js için en az 1 GB RAM önerilir. Büyük uygulamalar için build sırasında 2 GB+ RAM gerekebilir. PM2 cluster modu ile CPU çekirdeklerini tam verimlilikle kullanın.

Sonuç

Next.js uygulamanız artık VPS'te PM2 ile yönetilen, Nginx reverse proxy arkasında çalışan ve SSL ile güvenli bir üretim ortamında çalışıyor. GitHub Actions ile CI/CD pipeline kurarak her push'ta otomatik deploy sağlayabilirsiniz.

Next.js ve React Deploy: VPS'te Üretim Ortamı

İçindekiler