Header Menu

Nginx kullanarak nodejs,nextjs,react projeleri nasıl yayınlanır resim

Nginx kullanarak nodejs,nextjs,react projeleri nasıl yayınlanır

Poyrazhosting PoyrazHosting

Node.js Projesi Yayınlama

  1. Node.js Projesini Çalıştırmaya Hazırlayın:

    • Projenizin bağımlılıklarını yükleyin:

npm install

  • Projeyi çalıştırmak için bir script yazdıysanız çalıştırın:

npm start

  • Proje, varsayılan olarak genelde localhost:3000 üzerinde çalışır. Üretim ortamında bunu değiştirebilirsiniz.
  • PM2 ile Node.js Projesini Yönetmek (Opsiyonel): PM2, Node.js uygulamalarını kolayca çalıştırmak ve yönetmek için kullanılan bir süreç yöneticisidir.

npm install -g pm2
pm2 start app.js --name my-node-app
pm2 save
pm2 startup

  • Nginx Yapılandırması: Nginx'i reverse proxy olarak kullanabilirsiniz:
  • Nginx yapılandırma dosyasını düzenleyin:

sudo nano /etc/nginx/sites-available/default

  • Aşağıdaki gibi bir yapılandırma ekleyin:

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://127.0.0.1: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;
    }
}

  • Nginx'i yeniden başlatın:

sudo systemctl restart nginx

Next.js Projesi Yayınlama

  1. Next.js Projesini Üretime Hazırlayın:

  • Üretim için proje yapılandırmasını yapın:

npm install
npm run build

  • Next.js projesini üretim modunda çalıştırın:

npm start

  • Nginx Yapılandırması: Next.js için de yukarıdaki Node.js yapılandırmasına benzer bir Nginx yapılandırması kullanabilirsiniz. Tek fark, uygulamanızın genelde port 3000 veya başka bir port üzerinde çalıştığından emin olun.

React Projesi Yayınlama

React projeleri genellikle bir statik dosya olarak sunulur, bu yüzden süreç biraz farklıdır.

  1. React Projesini Derleyin:

  • Üretim için bir derleme oluşturun

npm install
npm run build

    • Derleme dosyaları build klasöründe oluşturulacaktır.

  • Statik Dosyaları Nginx ile Sunma:

  • build klasörünü sunucuya yükleyin, örneğin /var/www/react-app dizinine.
  • Nginx yapılandırmasını düzenleyin:

sudo nano /etc/nginx/sites-available/default

  • Şu yapılandırmayı ekleyin:

server {
    listen 80;
    server_name yourdomain.com;

    root /var/www/react-app;
    index index.html;

    location / {
        try_files $uri /index.html;
    }
}

  • Nginx'i yeniden başlatın:

sudo systemctl restart nginx

Önemli Notlar

  • SSL kullanıyorsanız, Let's Encrypt ile sertifikalar oluşturabilirsiniz:

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx

  • Güvenlik duvarı kurallarını yapılandırarak yalnızca gerekli portları (örneğin, 80 ve 443) açık tutun.

Bu adımları takip ederek Nginx kullanarak Node.js, Next.js ve React projelerinizi yayınlayabilirsiniz.

27 Görüntüleme