Modern web uygulamalarının geliştirilmesi ve yayınlanması karmaşık bir süreç olabilir. Next.js, React üzerine inşa edilmiş, sunucu tarafında render (SSR) ve statik site oluşturma (SSG) gibi güçlü özellikler sunan bir framework'tür. Bu makalede, Next.js uygulamanızı Docker ve Nginx kullanarak bir VPS'e (Sanal Özel Sunucu) nasıl yayınlayacağınızı adım adım anlatacağız. Bu yöntem, uygulamanızın ölçeklenebilir, güvenilir ve performanslı bir şekilde çalışmasını sağlar. Eğer VPS Sanal Sunucu Hizmetleri hakkında daha fazla bilgi edinmek isterseniz, ilgili sayfamızı ziyaret edebilirsiniz.

1. Giriş

Next.js, React geliştiricileri için harika bir seçenektir. Ancak, uygulamanızı yerel ortamdan canlı bir sunucuya taşımak, bazı ek adımlar gerektirir. Docker, uygulamalarınızı ve bağımlılıklarınızı kapsülleyerek farklı ortamlarda tutarlı bir şekilde çalışmasını sağlayan bir container teknolojisidir. Nginx ise, yüksek performanslı bir web sunucusu ve ters proxy olarak, gelen istekleri Next.js uygulamanıza yönlendirir ve statik dosyaları sunar.

Bu makalede, Docker ve Nginx'in nasıl birlikte çalıştığını, Next.js uygulamanızı nasıl container'laştıracağınızı ve bir VPS üzerinde nasıl yayınlayacağınızı detaylı bir şekilde ele alacağız. Ayrıca, güvenlik, performans optimizasyonu ve sürekli entegrasyon/sürekli dağıtım (CI/CD) gibi önemli konulara da değineceğiz.

2. Ön Gereksinimler

Bir VPS (Sanal Özel Sunucu). Önerilen: Ubuntu 20.04 veya üzeri
VPS'e SSH erişimi
Docker ve Docker Compose kurulu olmalı
Temel Linux komut satırı bilgisi
Next.js ile geliştirilmiş bir web uygulaması

3. Docker ve Docker Compose Kurulumu

3.1. Docker Kurulumu

Docker, uygulamalarınızı container'lar içinde çalıştırmanızı sağlayan bir platformdur. VPS'inize Docker kurmak için aşağıdaki adımları izleyin:


        sudo apt update
        sudo apt install apt-transport-https ca-certificates curl software-properties-common
        curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
        echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
        sudo apt update
        sudo apt install docker-ce docker-ce-cli containerd.io

3.2. Docker Compose Kurulumu

Docker Compose, çoklu container'lı uygulamaları tanımlamak ve çalıştırmak için kullanılan bir araçtır. Docker Compose kurmak için aşağıdaki adımları izleyin:


        sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
        sudo chmod +x /usr/local/bin/docker-compose
        docker-compose --version

4. Next.js Uygulamasını Docker'a Entegre Etme

4.1. Dockerfile Oluşturma

Dockerfile, Docker imajınızı oluşturmak için kullanılan bir metin dosyasıdır. Proje dizininizde aşağıdaki içeriğe sahip bir Dockerfile oluşturun:


        # Base image olarak Node.js kullan
        FROM node:16-alpine

        # Çalışma dizinini ayarla
        WORKDIR /app

        # package.json ve package-lock.json dosyalarını kopyala
        COPY package*.json ./

        # Bağımlılıkları yükle
        RUN npm install

        # Uygulama kodunu kopyala
        COPY . .

        # Build et
        RUN npm run build

        # Üretim ortamı için portu ayarla
        EXPOSE 3000

        # Uygulamayı başlat
        CMD ["npm", "start"]

4.2. .dockerignore Dosyası Oluşturma

.dockerignore dosyası, Docker imajına dahil edilmesini istemediğiniz dosya ve dizinleri belirtmenizi sağlar. Proje dizininizde aşağıdaki içeriğe sahip bir .dockerignore dosyası oluşturun:


        node_modules
        .next
        .git

4.3. docker-compose.yml Dosyası Oluşturma

docker-compose.yml dosyası, uygulamanızın container'larını ve ağ yapılandırmasını tanımlar. Proje dizininizde aşağıdaki içeriğe sahip bir docker-compose.yml dosyası oluşturun:


        version: "3.9"
        services:
          web:
            build: .
            ports:
              - "3000:3000"
            environment:
              NODE_ENV: production

5. Nginx Kurulumu ve Yapılandırması

5.1. Nginx Kurulumu

Nginx, yüksek performanslı bir web sunucusu ve ters proxy'dir. VPS'inize Nginx kurmak için aşağıdaki adımları izleyin:


        sudo apt update
        sudo apt install nginx

5.2. Nginx Yapılandırma Dosyası Oluşturma

Nginx'i Next.js uygulamanıza ters proxy olarak yapılandırmak için aşağıdaki içeriğe sahip bir yapılandırma dosyası oluşturun (örneğin, /etc/nginx/sites-available/nextjs):


        server {
            listen 80;
            server_name yourdomain.com; # Kendi alan adınızı buraya girin

            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;
            }
        }

5.3. Nginx Yapılandırmasını Etkinleştirme

Oluşturduğunuz yapılandırma dosyasını etkinleştirmek için aşağıdaki komutları çalıştırın:


        sudo ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled
        sudo nginx -t
        sudo systemctl restart nginx

6. SSL Sertifikası Kurulumu (Let's Encrypt ile)

Güvenli bir bağlantı için SSL sertifikası kurmak önemlidir. Let's Encrypt, ücretsiz ve otomatik SSL sertifikaları sağlayan bir sertifika otoritesidir. Let's Encrypt ile SSL sertifikası kurmak için aşağıdaki adımları izleyin:


        sudo apt install snapd
        sudo snap install core; sudo snap refresh core
        sudo snap install --classic certbot
        sudo ln -s /snap/bin/certbot /usr/bin/certbot
        sudo certbot --nginx -d yourdomain.com # Kendi alan adınızı buraya girin

7. Uygulamayı Yayınlama

7.1. Uygulama Kodunu VPS'e Kopyalama

Uygulama kodunuzu VPS'e kopyalamak için scp veya rsync gibi araçları kullanabilirsiniz. Örneğin:


        scp -r /path/to/your/app username@yourvpsip:/path/to/destination

7.2. Docker Compose ile Uygulamayı Başlatma

VPS'e kopyaladığınız uygulama dizinine gidin ve aşağıdaki komutu çalıştırın:


        docker-compose up -d

8. Sürekli Entegrasyon/Sürekli Dağıtım (CI/CD)

CI/CD, kod değişikliklerinizi otomatik olarak test etmenizi ve yayınlamanızı sağlayan bir süreçtir. GitHub Actions, GitLab CI veya Jenkins gibi araçları kullanarak CI/CD pipeline'ları oluşturabilirsiniz. Bu pipeline'lar, kod değişikliklerinizi otomatik olarak test edebilir, Docker imajınızı oluşturabilir ve VPS'inize dağıtabilir.

9. Performans Optimizasyonu

Gzip Sıkıştırması: Nginx'te Gzip sıkıştırmasını etkinleştirerek, sunulan dosyaların boyutunu küçültebilir ve yükleme sürelerini iyileştirebilirsiniz.
Önbellekleme: Nginx'te önbellekleme mekanizmalarını kullanarak, sık erişilen statik dosyaları ve API yanıtlarını önbelleğe alabilir ve sunucu yükünü azaltabilirsiniz.
Resim Optimizasyonu: Resimleri optimize ederek (örneğin, sıkıştırma ve uygun format kullanma), sayfa yükleme hızını artırabilirsiniz.
Kod Optimizasyonu: Gereksiz kodları temizleyerek, JavaScript ve CSS dosyalarını küçülterek ve kodu bölerek, uygulamanızın performansını iyileştirebilirsiniz.

10. Güvenlik Önlemleri

Güvenlik Duvarı: VPS'inizde bir güvenlik duvarı (örneğin, UFW) kullanarak, yalnızca gerekli portlara erişime izin verin.
Düzenli Güncellemeler: Sistem ve uygulama bağımlılıklarınızı düzenli olarak güncelleyerek, güvenlik açıklarını kapatın.
SSL/TLS: Her zaman SSL/TLS kullanarak, verilerinizi şifreleyin ve güvenli bir bağlantı sağlayın.
Yetkilendirme ve Kimlik Doğrulama: Uygulamanızda yetkilendirme ve kimlik doğrulama mekanizmalarını uygulayarak, yetkisiz erişimi engelleyin.

11. Gerçek Hayattan Örnekler ve Vaka Çalışmaları

Bir e-ticaret sitesi düşünelim. Bu site, Next.js ile geliştirilmiş ve dinamik ürün sayfaları, kullanıcı hesapları ve ödeme işlemleri gibi karmaşık özellikler içeriyor. Bu siteyi Docker ve Nginx kullanarak bir VPS'e yayınlamak, aşağıdaki avantajları sağlar:

Ölçeklenebilirlik: Docker sayesinde, site trafiği arttığında, kolayca yeni container'lar ekleyerek siteyi ölçeklendirebilirsiniz.
Güvenilirlik: Docker ve Nginx, uygulamanızın sürekli olarak çalışmasını sağlar ve arıza durumunda otomatik olarak yeniden başlatılır.
Performans: Nginx, statik dosyaları hızlı bir şekilde sunar ve ters proxy olarak Next.js uygulamanıza gelen istekleri optimize eder.
Kolay Dağıtım: Docker ve CI/CD pipeline'ları sayesinde, yeni kod değişikliklerini hızlı ve güvenli bir şekilde yayınlayabilirsiniz.

Başka bir örnek olarak, bir blog sitesi düşünelim. Bu site, Next.js ile statik olarak oluşturulmuş ve makaleler, kategoriler ve etiketler gibi içerikler içeriyor. Bu siteyi Docker ve Nginx kullanarak bir VPS'e yayınlamak, aşağıdaki avantajları sağlar:

Hızlı Yükleme Süreleri: Statik olarak oluşturulmuş sayfalar, Nginx tarafından hızlı bir şekilde sunulur ve kullanıcı deneyimini iyileştirir.
Düşük Maliyet: Statik siteler, dinamik sitelere göre daha az kaynak tüketir ve daha düşük maliyetle barındırılabilir.
Güvenlik: Statik siteler, dinamik sitelere göre daha az güvenlik açığına sahiptir ve daha güvenlidir.

12. Görsel Açıklamalar

Aşağıdaki şema, Next.js, Docker ve Nginx'in birlikte nasıl çalıştığını göstermektedir:

(Şema: Kullanıcı -> Nginx (Ters Proxy) -> Docker Container (Next.js Uygulaması) -> VPS)

Bu şema, kullanıcıların isteklerinin önce Nginx'e ulaştığını, Nginx'in bu istekleri Docker container'ı içindeki Next.js uygulamasına yönlendirdiğini ve uygulamanın VPS üzerinde çalıştığını göstermektedir.

13. Sık Sorulan Sorular

Soru: Docker kullanmak neden gerekli?
Cevap: Docker, uygulamanızın ve bağımlılıklarınızın farklı ortamlarda tutarlı bir şekilde çalışmasını sağlar. Ayrıca, ölçeklenebilirliği ve dağıtım kolaylığını artırır.
Soru: Nginx ne işe yarar?
Cevap: Nginx, yüksek performanslı bir web sunucusu ve ters proxy'dir. Gelen istekleri Next.js uygulamanıza yönlendirir, statik dosyaları sunar ve SSL sertifikalarını yönetir.
Soru: SSL sertifikası neden önemlidir?
Cevap: SSL sertifikası, verilerinizi şifreler ve güvenli bir bağlantı sağlar. Bu, kullanıcılarınızın bilgilerinin güvenliğini sağlar ve web sitenizin güvenilirliğini artırır.
Soru: CI/CD nedir ve neden kullanmalıyım?
Cevap: CI/CD, kod değişikliklerinizi otomatik olarak test etmenizi ve yayınlamanızı sağlayan bir süreçtir. Bu, geliştirme sürecinizi hızlandırır, hataları azaltır ve dağıtım kolaylığını artırır.
Soru: Uygulamamı nasıl güncelleyebilirim?
Cevap: Uygulamanızı güncellemek için, yeni kod değişikliklerinizi VPS'e kopyalayın ve docker-compose up -d komutunu çalıştırın. Bu, Docker container'ınızı yeniden oluşturacak ve uygulamanızı güncelleyecektir.

14. Tablolar

14.1. Docker ve Nginx Karşılaştırması

Özellik	Docker	Nginx
Amaç	Uygulama container'laştırma	Web sunucusu ve ters proxy
Temel İşlev	Uygulama ve bağımlılıkları kapsülleme	Gelen istekleri yönetme, statik dosyaları sunma
Ölçeklenebilirlik	Yüksek	Yüksek
Güvenlik	Container izolasyonu	SSL/TLS, güvenlik duvarı

14.2. CI/CD Araçları Karşılaştırması

Araç	Avantajlar	Dezavantajlar
GitHub Actions	Ücretsiz, GitHub ile entegre, kolay kullanım	Sınırlı kaynaklar (ücretsiz plan)
GitLab CI	GitLab ile entegre, güçlü özellikler, açık kaynak	Daha karmaşık yapılandırma
Jenkins	Esnek, özelleştirilebilir, geniş eklenti desteği	Karmaşık kurulum ve yönetim

15. Sonuç ve Özet

Bu makalede, Next.js uygulamanızı Docker ve Nginx kullanarak bir VPS'e nasıl yayınlayacağınızı detaylı bir şekilde ele aldık. Docker, uygulamanızın farklı ortamlarda tutarlı bir şekilde çalışmasını sağlarken, Nginx yüksek performanslı bir web sunucusu ve ters proxy olarak görev yapar. SSL sertifikaları, güvenli bir bağlantı sağlarken, CI/CD pipeline'ları kod değişikliklerinizi otomatik olarak test etmenizi ve yayınlamanızı sağlar. VPS Sanal Sunucu Hizmetleri ile uygulamanızı güvenle barındırabilir ve global kullanıcılara sunabilirsiniz. Unutmayın ki, güvenlik ve performans optimizasyonu, uygulamanızın başarısı için kritik öneme sahiptir. Bu makaledeki adımları izleyerek, Next.js uygulamanızı güvenilir, ölçeklenebilir ve performanslı bir şekilde yayınlayabilirsiniz.

Önemli Notlar:

Güvenliği ihmal etmeyin. SSL sertifikası kullanın ve güvenlik duvarınızı yapılandırın.
Performansı optimize edin. Gzip sıkıştırması ve önbellekleme kullanın.
CI/CD'yi uygulayın. Kod değişikliklerinizi otomatik olarak test edin ve yayınlayın.
Düzenli olarak güncelleyin. Sistem ve uygulama bağımlılıklarınızı güncel tutun.