Ubuntu Nginx Kurulumu ve Angular Deploy Etme Rehberi

Devops Yazar 18/11/2022

Kısa Özet: Angular Projesi Nginx'e Nasıl Deploy Edilir?

Ubuntu'ya Nginx kurun ve 80 (HTTP) portunu erişime açın (sudo apt install nginx).
Angular projenizde production build alın (ng build --configuration production).
Oluşan dist/ klasöründeki dosyaları sunucudaki /var/www/html dizinine kopyalayın.
Kritik Adım: SPA yönlendirme hatalarını (404) önlemek için Nginx ayarlarınıza try_files $uri $uri/ /index.html; kuralını ekleyin.

Bu rehberde Ubuntu sunucuya Nginx kurulumu ve Angular uygulamasını Nginx üzerinde canlıya alma (deploy) adımlarını tüm teknik detaylarıyla inceleyeceğiz.

1. Ubuntu Sunucuya Nginx Kurulumu

Nginx, statik dosyaları (HTML, CSS, JS) inanılmaz bir hızla sunan ve frontend uygulamalarını (Angular, React, Vue) barındırmak için sektör standardı olan bir web sunucusudur.

İlk olarak Ubuntu sunucumuza SSH ile bağlanıp paket listesini güncelliyoruz:

sudo apt-get update

Ubuntu apt update komutu terminal ekranı

Ardından Nginx'i kuruyoruz:

sudo apt-get install nginx

2. UFW Firewall Ayarlarını Yapılandırma

Kurulum bittikten sonra, dışarıdan gelen HTTP isteklerinin sunucuya ulaşabilmesi için güvenlik duvarında (Firewall) 80 portuna izin vermeliyiz.

sudo ufw app list
sudo ufw allow 'Nginx HTTP'

Artık sunucunuzun IP adresini tarayıcınıza yazdığınızda meşhur "Welcome to nginx!" sayfasını görmelisiniz:

nginx default page ubuntu karsilama ekrani

3. Angular Projesini Production İçin Build Alma

Sunucu hazır olduğuna göre Angular tarafına geçebiliriz. Uygulamamızı canlıya almadan önce environment.prod.ts (veya modern sürümlerde environment.ts) dosyasında API adresimizi sunucumuza göre ayarlıyoruz.

export const environment = {
  production: true,
  API_BASE_PATH: 'http://YENI_SUNUCU_IP_VEYA_DOMAIN/api'
};

angular environment prod ayarı typescript

Ayarları kaydettikten sonra Angular'ı build ediyoruz:

# Angular 15 ve sonrası için modern komut
ng build --configuration production

Bu işlem bittiğinde projenizin kök dizininde statik dosyalarınızı barındıran bir dist/ klasörü oluşacaktır.

4. Angular Dosyalarını Sunucuya Yükleme

Build sonrası oluşan dosyaları sunucudaki Nginx yayın klasörüne kopyalamamız gerekiyor. Genellikle varsayılan klasör /var/www/html dizinidir.

MobaXterm, FileZilla veya SCP gibi bir araç kullanarak dist/proje-adi/ içindeki tüm dosyaları seçin.
Sunucudaki /var/www/html klasörünün içine sürükleyip bırakın (Eski index.html dosyasını silebilirsiniz).

angular dist klasörünü sunucuya yükleme FTP

5. Nginx SPA Routing Ayarı (Kritik 404 Hatası Çözümü)

🚨 Önemli Adım: Angular bir Single Page Application (SPA) olduğu için kendi yönlendirmesini (Router) kullanır. Eğer aşağıdaki ayarı yapmazsanız, siteniz açılır fakat alt sayfalarda sayfayı yenilediğinizde Nginx dosyayı bulamayarak 404 Not Found hatası verir.

Sunucunuzda Nginx ayar dosyasını açın:

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

location / bloğunun içine try_files kuralını ekleyin:

server {
    listen 80;
    server_name _;
    root /var/www/html;
    index index.html;

    location / {
        # Bu satır Angular Router'ın çalışmasını sağlar!
        try_files $uri $uri/ /index.html;
    }
}

Dosyayı kaydedip çıkın ve Nginx'i yeniden başlatın:

sudo systemctl restart nginx

Tebrikler! Angular projenizi başarıyla Nginx üzerinde canlıya aldınız.