React Uygulamanızı AWS Ubuntu Sunucusunda Dağıtma [1. Hafta]
Bir React uygulamasını geliştirmek heyecan verici bir deneyimdir, ancak gerçek dünyada kullanılabilmesi için buluta dağıtılması gerekir. Bu makale, AWS üzerinde bir Ubuntu web sunucusuna React uygulamanızı nasıl dağıtacağınızı adım adım, yeni başlayanlardan ileri düzey kullanıcılara kadar herkese uygun bir şekilde açıklamaktadır. AWS’nin sunduğu güçlü altyapı ve Ubuntu’nun esnekliği ile React uygulamanızın güvenli ve ölçeklenebilir bir şekilde çalışmasını sağlayacağız. Hazırsanız, başlayalım!
1. Temel Kavramlar: AWS, Ubuntu ve React
Öncelikle, bu süreçte yer alan temel kavramları anlamak önemlidir. AWS (Amazon Web Services), bulut tabanlı çeşitli hizmetler sunan bir platformdur. Ubuntu ise popüler bir Linux dağıtımı olup, sunucular için ideal bir seçimdir. React ise, kullanıcı arayüzleri oluşturmak için kullanılan güçlü bir JavaScript kütüphanesidir. Bu üç teknolojiyi birleştirerek, güçlü ve ölçeklenebilir web uygulamaları oluşturabiliriz. Örneğin, Amazon EC2 (Elastic Compute Cloud) bir sanal sunucu sağlar, burada Ubuntu kurabilir ve React uygulamanızı çalıştırabilirsiniz. Ancak, sadece bir sunucu kurmak yeterli değildir; güvenlik, performans ve ölçeklenebilirlik gibi konuları da göz önünde bulundurmalıyız. Bu konulara daha sonra değineceğiz. Bu süreç, bir Node.js sunucusu ve Nginx gibi ters proxy sunucu gerektirir. Daha fazla bilgi için (https://fatihsoysal.com) inceleyebilirsiniz.
2. AWS EC2 Örneği Oluşturma: Adım Adım
İlk adımımız, AWS konsoluna giriş yaparak bir EC2 örneği oluşturmaktır. Bu örnek, React uygulamanızın çalışacağı sanal sunucu görevi görecektir. Öncelikle, Ubuntu sunucu resmi seçmeli ve uygun bir örnek tipi seçmelisiniz. t2.micro gibi ücretsiz katman için uygun bir örnek, başlangıç için ideal olabilir. Ancak, daha büyük ölçekli uygulamalar için daha güçlü örnekler seçmeniz gerekebilir. Ardından, bir güvenlik grubu oluşturarak yalnızca gerekli portları (örneğin, SSH için 22 ve HTTP için 80 veya HTTPS için 443) açmalısınız. Güvenliğiniz için bu çok önemlidir. Son olarak, örneğinizi başlatın ve IP adresini not edin. Bu adres, SSH ile sunucuya bağlanmak için gereklidir.
3. SSH ile Sunucuya Bağlanma ve Ubuntu Kurulumu
EC2 örneğiniz çalışmaya başladıktan sonra, SSH kullanarak sunucuya bağlanabilirsiniz. SSH istemcinizi kullanarak, örneğin IP adresini ve kullanıcı adınızı girerek sunucuya erişebilirsiniz. SSH anahtar çiftini önceden oluşturmanız ve sunucuya yüklemeniz önerilir. Sunucuya bağlandıktan sonra, gerekli paketleri yüklemeniz gerekecektir. sudo apt update ve sudo apt upgrade komutları ile sisteminizi güncelleyin. Node.js ve npm’yi yüklemek için aşağıdaki komutları kullanabilirsiniz:
sudo apt install curl
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo apt-get install npmBu işlemlerden sonra, Node.js ve npm başarıyla kurulmuş olacaktır. Kurulumun başarılı olup olmadığını doğrulamak için node -v ve npm -v komutlarını kullanabilirsiniz.
4. React Uygulamasının Hazırlanması ve Dağıtımı
React uygulamanızın üretim sürümünü oluşturmanız gerekiyor. Bu genellikle npm run build komutu ile yapılır. Oluşturulan build klasörü, sunucuya kopyalanacaktır. Bu klasörü sunucuya çeşitli yollarla aktarabilirsiniz. Örneğin, scp komutu veya rsync gibi araçları kullanabilirsiniz. scp kullanarak yerel makinenizdeki build klasörünü sunucuya kopyalayalım:
scp -r ./build ubuntu@:/var/www/html/Burada yerine sunucunuzun IP adresini yazmalısınız. /var/www/html/ dizini genellikle web sunucusunun bellek alanıdır. Bu yolu kendi tercihinize göre değiştirebilirsiniz. Kopyalama işlemi tamamlandıktan sonra, sunucunuzdaki web sunucusunun (örneğin, Nginx) bu dizini işaret ettiğinden emin olmanız gerekecektir.
5. Nginx Kurulumu ve Yapılandırması
Nginx, performanslı ve güvenilir bir ters proxy sunucusudur. React uygulamanız için Nginx'i kullanarak performansı artırabilir ve güvenliği sağlayabilirsiniz. Nginx'i aşağıdaki komutla yükleyebilirsiniz:
sudo apt-get install nginx Ardından, Nginx'in yapılandırma dosyasını düzenleyerek React uygulamanızın bulunduğu dizini belirtmeniz gerekecektir. /etc/nginx/sites-available/default dosyasını düzenleyin ve aşağıdaki gibi ayarlayın:
server {
listen 80;
listen [::]:80;
server_name ;
root /var/www/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}Burada yerine sunucunuzun IP adresini yazmalısınız. Değişiklikleri kaydedip Nginx'i yeniden başlatın: sudo systemctl restart nginx. Şimdi uygulamanız erişilebilir olmalıdır.
6. Güvenlik Önlemleri
Dikkat! Güvenlik, bulut tabanlı uygulamalarınız için son derece önemlidir. Öncelikle, güçlü ve benzersiz parolalar kullanmalısınız. SSH anahtar çiftlerini kullanarak parola gerekmeden sunucuya bağlanmayı tercih edin. Güvenlik duvarınızı doğru şekilde yapılandırarak yalnızca gerekli portları açık tutmalısınız. Düzenli güncellemeler yaparak güvenlik açıklarını ortadan kaldırmalısınız. Ayrıca, uygulamanızın güvenliğini sağlamak için uygun güvenlik önlemlerini almalısınız (örneğin, kimlik doğrulama ve yetkilendirme). Daha fazla bilgi için (https://fatihsoysal.com) inceleyebilirsiniz.
7. Performans Optimizasyonu
Uygulamanızın performansını optimize etmek için birkaç adım atabilirsiniz. Örneğin, resminizi optimize ederek ve gereksiz dosyaları kaldırarak boyutunu küçültebilirsiniz. Uygulamanızın önbelleğe alınmasını sağlayarak hızlı yüklenme süreleri elde edebilirsiniz. CDN (Content Delivery Network) kullanarak içeriğinizi dünya genelinde dağıtabilirsiniz. Ayrıca, uygun bir örnek tipi seçerek ve gerektiğinde örnek sayısını ölçeklendirerek performansı artırabilirsiniz.
8. Öğrenme Yol Haritası
| Seviye | Konular | Öneriler |
|---|---|---|
| Yeni Başlayan | AWS hesabı oluşturma, EC2 örneği başlatma, temel Linux komutları, Node.js ve npm kurulumu, React uygulaması oluşturma | AWS belgelendirmelerini inceleyin, basit bir React uygulaması geliştirin, online eğitimler alın. |
| Orta | Nginx kurulumu ve yapılandırması, SSH kullanımı, güvenlik duvarı ayarları, temel performans optimizasyon teknikleri, React uygulamasının dağıtımı | Daha karmaşık React uygulamaları geliştirin, farklı dağıtım yöntemlerini deneyin, logları analiz ederek sorunları çözmeyi öğrenin. |
| İleri Düzey | Otomatik dağıtım sistemleri (örneğin, CI/CD), bulut tabanlı veri tabanları kullanımı, ölçeklenebilirlik ve yüksek erişilebilirlik mimarileri, performans testi ve optimizasyonu, güvenlik açıklarını tespit etme ve giderme | Karmaşık mimariler tasarlayın, performans testleri yapın, güvenlik açıklarını bulmak için araçlar kullanın, AWS'nin gelişmiş hizmetlerini keşfedin. |
9. Sonuç ve Sıkça Sorulan Sorular
Bu makalede, React uygulamanızı AWS üzerinde bir Ubuntu sunucusuna dağıtmanın temel adımlarını öğrendiniz. Ancak, unutmayın ki bu yalnızca başlangıç noktasıdır. Uygulamanızın özel gereksinimlerine göre, daha fazla ince ayar yapmanız gerekebilir. Performans, güvenlik ve ölçeklenebilirlik, her zaman öncelikli olmalıdır.
Sıkça Sorulan Sorular:
- Soru: Hata alırsam ne yapmalıyım? Cevap: Hata mesajlarını dikkatlice inceleyin. Google veya Stack Overflow gibi kaynaklardan yardım alın. Log dosyalarını kontrol edin.
- Soru: Uygulamam yavaş çalışıyorsa ne yapmalıyım? Cevap: Performans optimizasyon tekniklerini uygulayın. Örneğin, resminizi optimize edin, önbelleğe alma kullanın, CDN kullanın.
- Soru: Uygulamam güvenli değilse ne yapmalıyım? Cevap: Güvenlik önlemlerini sıkılaştırın. Güçlü parolalar kullanın, SSH anahtar çiftlerini kullanın, güvenlik duvarınızı doğru şekilde yapılandırın.
- Soru: Uygulamamı nasıl ölçeklendirebilirim? Cevap: AWS'nin ölçeklendirme hizmetlerini kullanın. Örneğin, Auto Scaling kullanarak örnek sayısını otomatik olarak artırabilirsiniz.
- Soru: Daha fazla bilgi nereden alabilirim? Cevap: AWS ve React dokümantasyonlarını inceleyin. Online eğitim platformlarını kullanın. Stack Overflow ve benzeri forumlarda sorular sorun.
Yazar: Fatih Soysal