React Uygulamasını Nginx ile Ubuntu’ya Dağıtmak Neden Önemli?

Modern web uygulamaları geliştirmek heyecan verici bir süreçtir, ancak bu uygulamaları kullanıcıların erişimine sunmak, yani dağıtım (deployment), birçok geliştirici için kafa karıştırıcı olabilir. Özellikle React gibi popüler bir frontend kütüphanesiyle geliştirilen uygulamaların, hızlı ve güvenilir bir şekilde sunulması kritik öneme sahiptir. Bu makalede, React uygulamanızı güçlü ve esnek bir web sunucusu olan Nginx ile Ubuntu işletim sistemi üzerinde nasıl dağıtacağınızı adım adım, gerçek dünya senaryolarıyla ve pratik ipuçlarıyla ele alacağız. Hazır mısınız? Gelin, bu süreci birlikte basitleştirelim ve uygulamanızı canlıya alalım!

React Uygulamasını Nginx ile Ubuntu’ya Dağıtmak Neden Önemli?

React uygulamalarını geliştirmek kadar, onları sorunsuz bir şekilde yayınlamak da projenizin başarısı için hayati bir adımdır. Peki, neden özellikle Nginx ve Ubuntu kombinasyonunu tercih etmeliyiz? Bu soru, özellikle yeni başlayanlar veya farklı dağıtım yöntemleri denemiş olanlar için oldukça önemlidir. Öncelikle, React uygulamaları genellikle statik dosyalar (HTML, CSS, JavaScript) üreten bir “build” süreciyle çalışır. Bu statik dosyaların hızlı, güvenli ve verimli bir şekilde sunulması gerekir. İşte tam da bu noktada Nginx devreye giriyor.

Nginx, yüksek performanslı, hafif ve güçlü bir web sunucusudur. Özellikle statik dosya sunumunda ve ters proxy (reverse proxy) görevinde rakiplerine göre oldukça başarılıdır. Düşük bellek tüketimi ve yüksek eşzamanlı bağlantı işleme kapasitesi sayesinde, uygulamanızın trafiği ne kadar artarsa artsın, Nginx performans düşüşü yaşamadan hizmet vermeye devam edebilir. Bu da kullanıcılarınız için kesintisiz ve hızlı bir deneyim anlamına gelir. Bir e-ticaret sitesi düşünün; Black Friday gibi yoğun dönemlerde binlerce kullanıcının aynı anda siteye erişmeye çalıştığını varsayalım. Nginx’in bu yükü sorunsuz bir şekilde yönetebilmesi, potansiyel satış kayıplarını önleyerek işletmeniz için doğrudan bir fayda sağlar.

Diğer yandan, Ubuntu sunucu tarafında en popüler ve güvenilir Linux dağıtımlarından biridir. Geniş topluluk desteği, zengin paket deposu ve kullanım kolaylığı sayesinde, sunucu yönetimi süreçlerini basitleştirir. Güvenlik güncellemeleri düzenli olarak yayınlanır ve sisteminizi güncel tutmak oldukça kolaydır. Nginx’in Ubuntu üzerinde kurulumu ve yapılandırılması da oldukça basittir, bu da geliştiricilerin hızlıca dağıtım yapmasına olanak tanır. Ayrıca, Ubuntu’nun sağladığı sağlam temel, uygulamanızın kararlı bir ortamda çalışmasını garanti eder. Bu kombinasyon, özellikle maliyet etkinliği ve ölçeklenebilirlik arayan küçük ve orta ölçekli işletmeler için ideal bir çözümdür.

Güvenlik de göz ardı edilmemesi gereken bir faktördür. Nginx, SSL/TLS sertifikalarını kolayca yapılandırma imkanı sunar, böylece uygulamanız HTTPS üzerinden güvenli bir şekilde yayınlanabilir. Bu, kullanıcı verilerinin şifrelenmesi ve tarayıcılarda “güvenli bağlantı” ibaresinin görünmesi için kritik öneme sahiptir. Bir blog sitesi veya kişisel portföy bile olsa, kullanıcıların güvenini kazanmak için HTTPS kullanımı artık bir standart haline gelmiştir. Tüm bu nedenler bir araya geldiğinde, React uygulamanızı Nginx ve Ubuntu üzerinde dağıtmak, hem performans hem güvenlik hem de yönetim kolaylığı açısından oldukça mantıklı ve tercih edilen bir yöntemdir.

Temel Kavramlara Hızlı Bir Bakış: React, Nginx ve Ubuntu Nedir?

Bu dağıtım sürecine başlamadan önce, kullandığımız temel teknolojileri kısaca anlamak, yol haritamızı daha net görmemizi sağlayacaktır. Eğer bu kavramlara yabancıysanız endişelenmeyin, burada hızlıca bir özet geçeceğiz.

React Nedir?

React, Facebook tarafından geliştirilen, kullanıcı arayüzleri (UI) oluşturmak için kullanılan açık kaynaklı bir JavaScript kütüphanesidir. Bileşen tabanlı yapısıyla, büyük ve karmaşık uygulamaları yönetilebilir, yeniden kullanılabilir parçalara ayırmanıza olanak tanır. Sanal DOM (Virtual DOM) kullanarak performansı artırır ve sadece değişen kısımları güncelleyerek daha hızlı bir kullanıcı deneyimi sunar. React uygulamaları genellikle tarayıcıda çalışır ve son kullanıcıya HTML, CSS ve JavaScript dosyaları olarak sunulur. Dağıtım öncesinde, bu JavaScript kodları bir “build” süreciyle optimize edilir ve tarayıcıların anlayabileceği statik dosyalara dönüştürülür. Bu statik dosyalar, sunucu tarafından doğrudan servis edilebilir.

Nginx Nedir?

Nginx (Engine-X olarak okunur), Igor Sysoev tarafından geliştirilen, yüksek performanslı, açık kaynaklı bir web sunucusu, ters proxy sunucusu ve HTTP önbellek sunucusudur. Özellikle statik içerik sunumunda ve yüksek trafikli web sitelerinde gösterdiği üstün performansla bilinir. Nginx’in olay tabanlı (event-driven) mimarisi, aynı anda binlerce bağlantıyı düşük bellek tüketimiyle işleyebilmesini sağlar. Ayrıca, yük dengeleme (load balancing), SSL sonlandırma (SSL termination) ve web uygulamaları için güvenlik duvarı (WAF) gibi gelişmiş özellikler sunar. React uygulamamız için Nginx, “build” çıktısı olan statik dosyaları doğrudan tarayıcılara ulaştıracak ana kapı görevi görecektir. Aynı zamanda, eğer bir API backend’iniz varsa, Nginx bu API isteklerini de doğru sunucuya yönlendirmek için bir ters proxy olarak kullanılabilir.

Ubuntu Nedir?

Ubuntu, Debian tabanlı, özgür ve açık kaynaklı bir Linux işletim sistemidir. Masaüstü ve sunucu sürümleri bulunur. Sunucu ortamında, kararlılığı, güvenilirliği ve geniş paket desteği sayesinde en popüler Linux dağıtımlarından biridir. Büyük bir topluluğa sahip olması, karşılaşabileceğiniz sorunlara hızlıca çözüm bulabileceğiniz anlamına gelir. Ubuntu Server, genellikle komut satırı arayüzü (CLI) üzerinden yönetilir, bu da kaynak tüketimini minimumda tutarak sunucunuzun performansını artırır. Bizim senaryomuzda, React uygulamamızı ve Nginx sunucumuzu barındıracak olan işletim sistemi Ubuntu olacaktır. Sunucunuzu internete açmak için gerekli ağ yapılandırmaları, güvenlik duvarı ayarları ve yazılım kurulumları Ubuntu üzerinde gerçekleştirilecektir.

Bu üç temel bileşen, modern web uygulamalarının hızlı, güvenli ve ölçeklenebilir bir şekilde dağıtılması için güçlü bir ekosistem oluşturur. React ile kullanıcı dostu arayüzler geliştirirken, Nginx ile bu arayüzleri yüksek performansla sunar ve Ubuntu ile de tüm bu yapıyı sağlam bir temel üzerine oturtmuş oluruz. Bu kavramları anladığımıza göre, artık uygulamamızı dağıtıma hazırlama adımlarına geçebiliriz.

React Uygulamanızı Dağıtıma Hazırlama Adımları Nelerdir?

Uygulamanızı bir sunucuya göndermeden önce, dağıtıma hazır hale getirmeniz gerekir. Bu süreç, genellikle geliştirme ortamında çalışan kodunuzu, üretim ortamı için optimize edilmiş statik dosyalara dönüştürmeyi içerir. Bu adımlar, uygulamanızın performansını artırır ve sunucu kaynaklarını daha verimli kullanmasını sağlar.

Uygulamanızın Temel Yapısını Gözden Geçirme

Öncelikle, React uygulamanızın geliştirme ortamında sorunsuz çalıştığından emin olun. Gerekli tüm bağımlılıkların yüklü olduğundan ve herhangi bir hata mesajı almadığınızdan emin olun. Eğer uygulamanız bir API’ye bağlanıyorsa, bu API’nin URL’sinin üretim ortamı için doğru şekilde yapılandırıldığından emin olun. Genellikle, bu tür ortam değişkenleri .env dosyaları aracılığıyla yönetilir. Örneğin, yerel geliştirme ortamında http://localhost:5000/api kullanırken, üretimde https://api.yourdomain.com kullanmanız gerekebilir.

// React uygulamanızda API çağrısı örneği
const fetchData = async () => {
  const API_URL = process.env.REACT_APP_API_URL || "http://localhost:5000/api";
  try {
    const response = await fetch(${API_URL}/data);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("API çağrısı başarısız:", error);
  }
};
    

REACT_APP_API_URL gibi ortam değişkenlerini .env.production dosyasında tanımlayarak üretim ortamına özel değerleri ayarlayabilirsiniz. Bu, uygulamanızın farklı ortamlarda farklı API uç noktalarına bağlanmasını sağlar.

Üretim İçin Build Süreci

React uygulamalarını dağıtıma hazırlamanın en kritik adımı, uygulamayı “build” etmektir. Bu işlem, uygulamanızın tüm JavaScript, CSS ve HTML dosyalarını optimize eder, sıkıştırır ve tek bir çıktı dizinine (genellikle build veya dist) yerleştirir. Bu optimize edilmiş dosyalar, tarayıcılar tarafından çok daha hızlı bir şekilde yüklenebilir ve çalıştırılabilir.

Uygulamanızın kök dizininde, terminali açın ve aşağıdaki komutu çalıştırın:

npm run build
    

veya eğer Yarn kullanıyorsanız:

yarn build
    

Bu komut, projenizin kök dizininde genellikle build/ adında yeni bir klasör oluşturacaktır. Bu klasörün içeriği, sunucunuza yüklemeniz gereken statik dosyalardır. Bu dosyaların içinde index.html, optimize edilmiş JavaScript (.js) ve CSS (.css) dosyaları, resimler ve diğer statik varlıklar bulunur. Bu işlem, aynı zamanda gereksiz boşlukları kaldırır, kodları küçültür (minify) ve tarayıcı önbelleklemesini iyileştirmek için dosya adlarına hash’ler ekler.

Tek Sayfa Uygulamaları (SPA) İçin Yönlendirme Ayarları

React, genellikle tek sayfa uygulaması (SPA) olarak geliştirilir. Bu, uygulamanızın tek bir index.html dosyası üzerinden yüklenmesi ve tüm yönlendirmelerin (routing) JavaScript tarafından yönetilmesi anlamına gelir. Ancak, kullanıcı doğrudan yourdomain.com/about gibi bir alt sayfaya erişmeye çalıştığında, sunucu bu URL’ye karşılık gelen bir dosya bulamayabilir ve 404 hatası dönebilir. Bu durumu önlemek için, Nginx’i tüm bilinmeyen URL isteklerini index.html dosyasına yönlendirecek şekilde yapılandırmamız gerekir. Bu sayede React Router veya benzeri bir kütüphane, URL’yi işleyebilir ve doğru bileşeni gösterebilir.

Bu hazırlık adımları tamamlandığında, React uygulamanız sunucuya yüklenmeye hazır hale gelmiş demektir. Şimdi sıra, Ubuntu sunucumuzu hazırlamaya ve Nginx’i kurmaya geldi.

Ubuntu Sunucusunu Kurulum İçin Nasıl Hazırlarsınız?

React uygulamanızı barındıracak Ubuntu sunucusunu doğru bir şekilde hazırlamak, sorunsuz bir dağıtım sürecinin temelini oluşturur. Bu bölüm, sunucunuza SSH ile bağlanmaktan, gerekli güncellemeleri yapmaya ve temel güvenlik ayarlarını yapılandırmaya kadar tüm adımları kapsayacaktır.

SSH ile Sunucuya Bağlanma

İlk adım, yerel bilgisayarınızdan Ubuntu sunucunuza güvenli bir şekilde bağlanmaktır. Bu işlem için SSH (Secure Shell) protokolünü kullanacağız. Sunucu sağlayıcınızdan aldığınız IP adresini ve kullanıcı adını (genellikle root veya varsayılan bir kullanıcı) kullanarak terminalinizden bağlanabilirsiniz:

ssh kullanici_adi@sunucu_ip_adresi
    

Örneğin:

ssh ahmet@192.0.2.10
    

Parolanızı girmeniz istendiğinde, sunucunuzun parolasını dikkatlice girin. Güvenlik için, bir kez bağlandıktan sonra root kullanıcısı yerine ayrıcalıklı (sudo) yetkilere sahip yeni bir kullanıcı oluşturmanız önerilir. Bu, yanlışlıkla sistem dosyalarına zarar verme riskini azaltır.

sudo adduser yeni_kullanici_adi
sudo usermod -aG sudo yeni_kullanici_adi
    

Ardından, yeni kullanıcınızla oturum açıp root oturumunu kapatabilirsiniz.

Sistem Güncelleştirmeleri ve Paket Kurulumu

Sunucunuza bağlandıktan sonra, sistem paket listesini güncellemek ve mevcut paketleri en son sürümlerine yükseltmek önemlidir. Bu, güvenlik açıklarını kapatır ve en güncel yazılım sürümlerine sahip olmanızı sağlar.

sudo apt update
sudo apt upgrade -y
    

-y parametresi, tüm sorulara otomatik olarak “evet” yanıtı vermenizi sağlar. Bu işlem biraz zaman alabilir.

Güvenlik Duvarı (UFW) Kurulumu ve Yapılandırması

Sunucunuzun güvenliğini sağlamak için bir güvenlik duvarı (firewall) yapılandırmak çok önemlidir. Ubuntu’da UFW (Uncomplicated Firewall) bu iş için harika bir araçtır. Varsayılan olarak, UFW tüm gelen bağlantıları engeller. Bizim ihtiyaçlarımız doğrultusunda, SSH (port 22), HTTP (port 80) ve HTTPS (port 443) portlarını açmamız gerekecek.

sudo ufw app list # Mevcut uygulama profillerini listeler
sudo ufw allow OpenSSH # SSH bağlantılarına izin verir
sudo ufw allow 'Nginx HTTP' # Nginx'in HTTP trafiğine izin verir (Nginx kurulduktan sonra)
sudo ufw allow 'Nginx HTTPS' # Nginx'in HTTPS trafiğine izin verir (SSL kurulduktan sonra)
sudo ufw enable # Güvenlik duvarını etkinleştirir
sudo ufw status # Güvenlik duvarı durumunu kontrol eder
    

UFW’yi etkinleştirmeden önce SSH portunu açtığınızdan emin olun, aksi takdirde sunucunuzla bağlantınız kesilebilir! Nginx’i kurduktan sonra Nginx HTTP ve Nginx HTTPS profillerini etkinleştireceğiz. Bu adımlar, sunucunuzu dışarıdan gelebilecek yetkisiz erişimlere karşı koruyarak sadece gerekli portların açık kalmasını sağlar. Bu, özellikle bir web uygulaması dağıtırken göz ardı edilmemesi gereken temel bir güvenlik önlemidir.

Artık Ubuntu sunucunuz React uygulamanızı ve Nginx’i barındırmak için temel olarak hazır durumda. Bir sonraki adımda, Nginx’i kuracak ve React uygulamanızı sunacak şekilde yapılandıracağız.

Nginx’i Kurma ve React Uygulamanızı Sunma Süreci

Bu bölüm, Nginx’i Ubuntu sunucunuza kurmaktan, React uygulamanızın statik dosyalarını sunacak şekilde yapılandırmaya ve hatta bir alan adı (domain) ile ilişkilendirmeye kadar olan kritik adımları detaylandırır. Uygulamanızın canlıya çıkacağı asıl yer burasıdır.

Nginx Kurulumu

Ubuntu paket yöneticisi (APT) kullanarak Nginx’i kurmak oldukça basittir. Sunucunuzda SSH ile oturum açtıktan sonra aşağıdaki komutu çalıştırın:

sudo apt install nginx -y
    

Kurulum tamamlandıktan sonra, Nginx servisinin çalıştığından emin olmak için aşağıdaki komutu kullanabilirsiniz:

sudo systemctl status nginx
    

Çıktıda active (running) ifadesini görmelisiniz. Eğer görmüyorsanız, Nginx’i başlatmak için sudo systemctl start nginx komutunu kullanabilirsiniz. Ayrıca, sunucu yeniden başlatıldığında Nginx’in otomatik olarak başlamasını sağlamak için:

sudo systemctl enable nginx
    

Nginx kurulduktan sonra, tarayıcınızdan sunucunuzun IP adresini ziyaret ederek varsayılan Nginx hoş geldiniz sayfasını görmelisiniz. Bu, Nginx’in başarıyla çalıştığı anlamına gelir. Şimdi UFW güvenlik duvarında Nginx HTTP trafiğine izin verelim:

sudo ufw allow 'Nginx HTTP'
sudo ufw reload
    

React Uygulamasını Sunucuya Yükleme

Daha önce React uygulamanızın build komutuyla oluşturduğu statik dosyaları sunucuya aktarmanız gerekiyor. Bu işlem için SCP (Secure Copy Protocol) veya SFTP (SSH File Transfer Protocol) kullanabilirsiniz. SCP, terminal üzerinden hızlı dosya transferi için idealdir.

Yerel makinenizden, React projenizin kök dizininde bulunan build klasörünü sunucunuza kopyalayın. Nginx, genellikle web sitelerini /var/www/html/ dizininde barındırır. Biz de React uygulamamız için bu dizinin altına özel bir klasör oluşturacağız.

# Yerel makinenizde çalıştırın
scp -r ./build kullanici_adi@sunucu_ip_adresi:/var/www/html/your_react_app
    

Örneğin:

scp -r ./build ahmet@192.0.2.10:/var/www/html/my-react-portfolio
    

Bu komut, yerel build klasörünüzü sunucudaki /var/www/html/your_react_app dizinine kopyalayacaktır. Sunucuda bu dizinin var olduğundan emin olun veya SCP komutuyla otomatik olarak oluşturulmasını sağlayın. Ardından, Nginx’in bu dosyalara erişebilmesi için gerekli izinleri ayarlayın:

# Sunucuda çalıştırın
sudo chown -R www-data:www-data /var/www/html/your_react_app
sudo chmod -R 755 /var/www/html/your_react_app
    

Nginx Yapılandırması

Nginx, web sitelerini yapılandırmak için “server block” adı verilen yapılandırma dosyalarını kullanır. Bu dosyalar genellikle /etc/nginx/sites-available/ dizininde bulunur ve /etc/nginx/sites-enabled/ dizinine sembolik bir bağlantı (symlink) oluşturularak etkinleştirilir.

Yeni bir yapılandırma dosyası oluşturalım:

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

Aşağıdaki içeriği dosyaya yapıştırın ve yourdomain.com ile www.yourdomain.com kısımlarını kendi alan adınızla, /var/www/html/your_react_app yolunu da uygulamanızın bulunduğu dizinle değiştirin:

server {
    listen 80;
    listen [::]:80;

    root /var/www/html/your_react_app;
    index index.html index.htm;

    server_name yourdomain.com www.yourdomain.com; # Alan adınızı buraya yazın

    location / {
        try_files $uri $uri/ /index.html; # React SPA yönlendirmesi için kritik
    }

    # Hata sayfalarını yapılandırabilirsiniz (isteğe bağlı)
    error_page 404 /index.html; # Tüm 404'leri React'in handle etmesi için
}
    

Bu yapılandırma dosyasının ana hatları şunlardır:

• listen 80;: Nginx’in HTTP isteklerini 80 numaralı porttan dinlemesini sağlar.
• root /var/www/html/your_react_app;: React uygulamanızın statik dosyalarının bulunduğu dizini belirtir.
• index index.html index.htm;: Varsayılan olarak aranacak dizin dosyalarını belirtir.
• server_name yourdomain.com www.yourdomain.com;: Bu server block’unun hangi alan adları için geçerli olduğunu tanımlar.
• location / { try_files $uri $uri/ /index.html; }: Bu kısım, React SPA’ları için çok önemlidir. Gelen herhangi bir isteği önce dosya olarak ($uri), sonra dizin olarak ($uri/) arar. Eğer bulamazsa, isteği /index.html‘e yönlendirir. Bu sayede React Router, URL’yi işleyebilir ve doğru bileşeni gösterebilir.

Dosyayı kaydedin (Ctrl+O, Enter, Ctrl+X). Şimdi bu yapılandırma dosyasını etkinleştirmek için bir sembolik bağlantı oluşturalım:

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

Nginx yapılandırmanızda herhangi bir sözdizimi hatası olup olmadığını kontrol edin:

sudo nginx -t
    

Eğer syntax is ok ve test is successful mesajlarını görürseniz, her şey yolunda demektir. Son olarak, Nginx’i yeniden başlatarak yeni yapılandırmayı uygulayın:

sudo systemctl restart nginx
    

Artık tarayıcınızdan alan adınızı (veya sunucu IP adresinizi) ziyaret ettiğinizde React uygulamanızın çalıştığını görmelisiniz. Bu, React uygulamanızın Nginx üzerinde başarıyla dağıtıldığı anlamına gelir!

Gelişmiş Nginx Ayarları ve Performans Optimizasyonları

React uygulamanızı Nginx ile başarıyla dağıttınız, tebrikler! Ancak, bir adım daha ileri giderek uygulamanızın performansını ve güvenliğini artırabilirsiniz. Bu bölüm, deneyimli kullanıcılar için bazı ipuçları ve püf noktaları sunarak, dağıtımınızı daha sağlam hale getirecek.

HTTPS (SSL/TLS) Kurulumu ile Güvenliği Artırma

Modern web uygulamaları için HTTPS kullanımı artık bir zorunluluktur. HTTPS, kullanıcılarınızla sunucunuz arasındaki iletişimi şifreleyerek veri güvenliğini sağlar. Let’s Encrypt, ücretsiz SSL/TLS sertifikaları sağlayan popüler bir hizmettir ve Certbot aracıyla kolayca kurulabilir.

Öncelikle Certbot’u kurun:

sudo snap install core; sudo snap refresh core
sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot
    

Ardından, Nginx için SSL sertifikası alın ve yapılandırın:

sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com
    

Certbot, Nginx yapılandırma dosyanızı otomatik olarak güncelleyecek, sertifikaları alacak ve HTTPS’yi etkinleştirecektir. Ayrıca, sertifikaların otomatik yenilenmesi için gerekli cron işini de kuracaktır. Bu adımlardan sonra, UFW güvenlik duvarında HTTPS portunu açmayı unutmayın:

sudo ufw allow 'Nginx HTTPS'
sudo ufw reload
    

Artık uygulamanıza https://yourdomain.com üzerinden güvenli bir şekilde erişebilirsiniz.

Tarayıcı Önbellekleme (Browser Caching)

Nginx, statik dosyalarınız için tarayıcı önbelleklemesini yapılandırarak performansı önemli ölçüde artırabilir. Bu sayede, kullanıcılar sitenizi tekrar ziyaret ettiğinde, tarayıcı daha önce indirdiği dosyaları kullanır ve yükleme süresi kısalır. Nginx yapılandırma dosyanıza (/etc/nginx/sites-available/your_react_app) aşağıdaki location bloğunu ekleyin:

server {
    # ... mevcut ayarlar ...

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|woff|woff2|ttf|svg|eot)$ {
        expires 30d; # 30 gün boyunca önbellekte tut
        add_header Cache-Control "public, no-transform";
    }

    # ... diğer location blokları ...
}
    

Bu yapılandırma, belirli dosya türlerinin (JavaScript, CSS, resimler vb.) tarayıcı tarafından 30 gün boyunca önbelleğe alınmasını sağlar. Bu, özellikle React uygulamanızın statik varlıkları için büyük bir performans kazancı demektir.

Gzip Sıkıştırma

Nginx, sunulan dosyaları sıkıştırarak bant genişliği kullanımını azaltabilir ve yükleme sürelerini hızlandırabilir. Bu, özellikle büyük JavaScript ve CSS dosyaları için etkilidir. Nginx’in ana yapılandırma dosyasına (genellikle /etc/nginx/nginx.conf veya /etc/nginx/conf.d/gzip.conf gibi özel bir dosyaya) aşağıdaki ayarları ekleyebilirsiniz:

# /etc/nginx/nginx.conf içinde http bloğuna ekleyin
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    

Bu ayarlar, belirtilen dosya türlerini sıkıştırarak sunar. gzip_comp_level değeri 1’den 9’a kadar ayarlanabilir; daha yüksek değerler daha iyi sıkıştırma ancak daha fazla CPU kullanımı anlamına gelir. Genellikle 5 veya 6 iyi bir denge sağlar.

Ters Proxy Olarak Nginx (Backend API ile Birlikte)

Eğer React uygulamanızın arkasında bir Node.js, Python veya başka bir dilde yazılmış bir API’niz varsa, Nginx’i bu API’ye ters proxy olarak yönlendirebilirsiniz. Bu, hem React uygulamanızı hem de API’nizi aynı domain altında farklı yollarla sunmanızı sağlar.

server {
    # ... mevcut React ayarları ...

    location /api/ { # API isteklerini yönlendir
        proxy_pass http://localhost:5000; # API'nizin çalıştığı adres ve port
        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;
    }
}
    

Bu yapılandırma ile, yourdomain.com/api/users gibi istekler Nginx tarafından http://localhost:5000/users adresine yönlendirilir. Bu, frontend ve backend’i aynı domain altında güvenli ve düzenli bir şekilde birleştirmenizi sağlar.

Bu gelişmiş ayarlar ve optimizasyonlar, React uygulamanızın sadece çalışmasını sağlamakla kalmaz, aynı zamanda kullanıcılara daha hızlı, daha güvenli ve daha sorunsuz bir deneyim sunar. Unutmayın, her değişiklikten sonra Nginx yapılandırmasını test etmeyi (sudo nginx -t) ve yeniden başlatmayı (sudo systemctl restart nginx) alışkanlık haline getirin.

Sonuç ve Sıkça Sorulan Sorular

Bu makalede, React uygulamanızı Nginx ve Ubuntu üzerinde dağıtmanın tüm temel adımlarını detaylı bir şekilde ele aldık. Geliştirme ortamınızdan production ortamına geçişin neden önemli olduğunu, temel kavramları, React uygulamanızı nasıl hazırlayacağınızı, Ubuntu sunucunuzu nasıl yapılandıracağınızı ve son olarak Nginx’i kurup uygulamanızı nasıl canlıya alacağınızı adım adım öğrendiniz. Ayrıca, HTTPS ile güvenliği artırma, tarayıcı önbelleklemesi ve Gzip sıkıştırma gibi gelişmiş optimizasyon tekniklerini de inceledik. Bu süreç, ilk başta karmaşık gibi görünse de, doğru adımlarla ve biraz pratikle kolayca üstesinden gelinebilecek bir dağıtım stratejisi sunar. Artık React projelerinizi güvenle ve performanslı bir şekilde dünyaya açabilirsiniz!

Sıkça Sorulan Sorular (SSS)

React uygulamamı dağıtmak için neden Nginx kullanmalıyım?

Nginx, yüksek performanslı statik dosya sunumu, düşük bellek tüketimi ve yüksek eşzamanlı bağlantı işleme yeteneği sayesinde React gibi frontend uygulamaları için idealdir. Ayrıca, ters proxy, yük dengeleme ve SSL sonlandırma gibi gelişmiş özellikler sunarak uygulamanızın güvenliğini ve ölçeklenebilirliğini artırır.

React uygulamasında build klasörü ne işe yarar?

build klasörü, React uygulamanızın üretim ortamı için optimize edilmiş, sıkıştırılmış ve tarayıcıların doğrudan çalıştırabileceği statik dosyalarını (HTML, CSS, JavaScript, resimler vb.) içerir. Bu dosyalar, uygulamanın performansını artırmak için küçültülmüş ve optimize edilmiştir.

HTTPS kullanmak neden önemlidir?

HTTPS, kullanıcılarınızla sunucunuz arasındaki tüm iletişimi şifreleyerek veri güvenliğini sağlar. Bu, hassas bilgilerin (kullanıcı adları, şifreler, kredi kartı bilgileri) kötü niyetli kişiler tarafından ele geçirilmesini önler. Ayrıca, modern tarayıcılar HTTPS kullanmayan siteleri “güvenli değil” olarak işaretler ve SEO sıralamalarında da HTTPS sitelere öncelik verir.

Nginx yapılandırmasında try_files $uri $uri/ /index.html; ne anlama gelir?

Bu Nginx komutu, React gibi tek sayfa uygulamaları (SPA) için kritik öneme sahiptir. Gelen bir isteği önce dosya olarak ($uri), sonra dizin olarak ($uri/) arar. Eğer bu yollarda bir dosya veya dizin bulamazsa, isteği varsayılan olarak /index.html dosyasına yönlendirir. Bu, React Router’ın URL’yi ele alarak uygulamanın içindeki doğru bileşeni göstermesini sağlar ve 404 hatalarını önler.

Nginx yapılandırma değişikliklerinden sonra ne yapmalıyım?

Herhangi bir Nginx yapılandırma değişikliği yaptıktan sonra, öncelikle yapılandırma dosyasında sözdizimi hatası olup olmadığını kontrol etmek için sudo nginx -t komutunu çalıştırmalısınız. Eğer bir hata yoksa, yeni yapılandırmanın etkinleşmesi için Nginx servisini yeniden başlatmalısınız: sudo systemctl restart nginx.