Next.js uygulamasının DigitalOcean Droplet'e dağıtılması

giriiş

Next.js, sunucu tarafında işlenen React uygulamalarını kolayca oluşturmak için kullanılan popüler bir React çerçevesidir. Bu eğitimde, Nginx'i ters proxy olarak kullanarak bir DigitalOcean sunucusuna Next.js uygulamasını nasıl dağıtacağımızı adım adım ele alacağız. Bu adım adım kılavuz, dağıtıma hazır bir Next.js uygulamanızın ve bir DigitalOcean hesabınızın olduğunu varsaymaktadır.

Ön koşullar

• Bir Next.js uygulaması
• Bir DigitalOcean hesabı
• Kayıtlı alan adı (isteğe bağlı ancak önerilir)
• Node.js ve npm veya yarn'ın yerel kurulumu

Adım 1: Bir DigitalOcean Droplet'i oluşturun

Next.js uygulamamızı kendimiz yapılandıracağımız bir DigitalOcean Droplet'inde barındıracağız. Şimdi droplet'i oluşturalım.

• DigitalOcean hesabınıza giriş yapın ve Droplets bölümüne gidin.
• “DROPLET Oluştur” seçeneğine tıklayın.
• Ubuntu imajını seçin (tercihen en son LTS sürümünü).
• İhtiyaçlarınıza ve bütçenize göre istediğiniz damla boyutunu seçin.
• Daha iyi performans için, hedef kitlenize en yakın veri merkezi bölgesini seçin.
• Droplet'inize güvenli erişim için SSH anahtarlarınızı ekleyin.
• Droplet'iniz için bir sunucu adı seçin; bu, alan adınız veya tercih ettiğiniz herhangi bir ad olabilir.
• “DROPLET Oluştur” seçeneğine tıklayın.
• Damlacığı oluşturun

Droplet oluşturulduktan sonra, ona atanan IP adresini not edin.

Adım 2: Damlacığı Başlatın

Artık droplet'i oluşturduğumuza göre, gelen bağlantıları kabul edebilmesi ve bu bağlantıları Next.js uygulamamıza yönlendirebilmesi için onu hazırlamamız gerekiyor.

Droplet oluşturma sırasında verdiğiniz IP adresi ve SSH anahtarını kullanarak droplet'inize SSH ile bağlanın:

ssh root@<DROPLET_IP>

Droplet'te paketleri güncelleme ve yükseltme:

sudo apt update && sudo apt upgrade -y

Gerekli paketleri yükleyin:

sudo apt install -y nodejs npm nginx

3. Adım: Nginx'i Yapılandırın

Nginx, Next.js uygulamamıza giden tüm yönlendirmeleri yöneten araçtır. Next.js uygulamanız için yeni bir Nginx yapılandırma dosyası oluşturun:

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

Aşağıdaki yapılandırmayı yapıştırın ve server_name yerine droplet alan adınızı veya IP adresinizi yazın:

server {
listen 80;
server_name YOUR_IP_ADDRESS;
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_cache_bypass $http_upgrade;
}
}

Dosyayı kaydedip kapatın. Yapılandırmayı etkinleştirmek için sembolik bir bağlantı oluşturun:

sudo ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled/

Nginx yapılandırmasında sözdizimi hataları olup olmadığını kontrol edin:

sudo nginx -t

Yapılandırma testi başarılıysa, Nginx'i yeniden başlatın:

sudo service nginx restart

Adım 4: Next.js uygulamasını dağıtın

Ardından, Next.js uygulamasını Droplet'e yüklüyoruz. Bunu yapmanın birçok yolu var.

1. Sunucuda bir SSH anahtarı oluşturun, bunu GitHub hesabınıza bağlayın ve deponuzu klonlayın.
2. Droplet'te Next.js uygulaması oluşturun

Bu eğitimde, Droplet'imizde yeni bir Next.js uygulaması oluşturacağız.

Droplet'inize SSH ile tekrar bağlanın:

ssh root@<DROPLET_IP>

Yeni bir Next.js uygulaması oluşturun ve talimatları izleyin:

cd /var/www
npx create-next-app nextjs

Next.js uygulama dizinine gidin:

cd nextjs

Programın bağımlılıklarını yükleyin:

npm install

Next.js uygulamasını oluşturun:

npm run build

Son olarak, Next.js uygulamasını çalıştırın:

npm start

Next.js uygulamanız artık dağıtıldı ve droplet alan adınız veya IP adresiniz üzerinden erişilebilir durumda. Uygulamanızın arka planda çalışmasını ve sunucu çöktüğünde veya yeniden başlatıldığında otomatik olarak yeniden başlatılmasını sağlamak için PM2 gibi bir işlem yöneticisi kullanmanız gerekecektir.

Adım 5: PM2 Süreç Yöneticisini Başlatın

npm'i Droplet'imiz içinden başlattık. Bazen bu komut, sunucu yeniden başlatılması veya yüklenmesi gereken bir güncelleme gibi nedenlerle çalışmayı durdurabilir. Next.js uygulamamızın her zaman çalıştığından emin olmak için PM2 adlı bir araç kullanacağız. PM2, Next.js uygulaması çökse bile yeniden başlatılacaktır.

PM2'yi sunucunuzda global olarak yüklemek için:

sudo npm install -g pm2

Next.js uygulama dizinine gidin (eğer zaten orada değilse):

cd /var/www/nextjs

PM2 kullanarak Next.js uygulamasını başlatın:

pm2 start npm --name "nextjs" -- start

Bu komut, `npm start` komutunu kullanarak “nextjs” adlı Next.js uygulamasını başlatır. PM2, sunucu çökerse veya yeniden başlatılırsa uygulamayı otomatik olarak yeniden başlatır.

PM2'nin önyükleme sırasında başlamasını sağlamak için şunu çalıştırın:

pm2 startup

Bu komut, terminalinize kopyalayıp yapıştırabileceğiniz ve PM2'yi önyükleme sırasında başlatacak bir komut dosyası oluşturacaktır.

Mevcut PM2 işlemlerini kaydedin:

pm2 save

Sonuç

Nginx'i ters proxy ve PM2'yi işlem yöneticisi olarak kullanarak DigitalOcean droplet'inizde Next.js uygulamasını başarıyla çalıştırdınız. Uygulamanıza droplet'inizin alan adı veya IP adresi üzerinden erişilebilmelidir.

Alan adı kullanıyorsanız, DNS ayarlarınızı yapılandırmayı unutmayın. Uygulamaya alan adınızı kullanarak erişebilmek için alan adınızın A kaydını sunucunuzun IP adresine yönlendirin.

Güvenliği ve SEO'yu iyileştirmek için Let's Encrypt kullanarak SSL sertifikaları kurmayı ve HTTPS bağlantıları uygulamayı düşünebilirsiniz. Ayrıca, Next.js uygulamanızı önbellekleme ve diğer performans iyileştirmeleriyle optimize etmeyi de deneyebilirsiniz.