React+Vite SPA’nızı Özel S3 Kovasına CloudFront ve OAC ile Dağıtma
Merhaba! Bu makalede, React ve Vite ile geliştirdiğiniz tek sayfa uygulamanızı (SPA) Amazon Web Services (AWS) kullanarak nasıl güvenli ve verimli bir şekilde dağıtacağınızı anlatacağım. Özellikle, özel bir S3 kovasına, CloudFront CDN ve OAC (Origin Access Control) kullanarak yapacağımız bu dağıtım, uygulamanızın güvenliğini ve performansını en üst düzeye çıkaracaktır. Bu yöntem, uygulamanıza yetkisiz erişimi önleyerek verilerinizi korurken, aynı zamanda kullanıcılarınız için hızlı ve sorunsuz bir deneyim sunar.
Hazırlık Aşaması: Gerekli Kaynaklar
Öncelikle, AWS hesabınızın olması ve IAM (Identity and Access Management) yetkilerinizin doğru şekilde ayarlanmış olması gerekmektedir. Ayrıca, React ve Vite projelerinizi geliştirme aşamasını tamamlamış olmalısınız. Projenizin build işlemini başarıyla gerçekleştirdiğinizden emin olun. Build sonucunda oluşturulan tüm dosyalarınızı bir klasörde toplayın. Bu dosyaları daha sonra S3 kovamıza yükleyeceğiz. Bu adımın ardından, S3, CloudFront ve OAC için gerekli olan AWS hizmetlerine erişebildiğinizi doğrulayın.
S3 Kovasının Oluşturulması
İlk olarak, AWS konsolunda bir S3 kovası oluşturun. Kova adınızın global olarak benzersiz olduğundan emin olun. Kova oluşturma aşamasında, “Özel” erişim kontrol listesi (ACL) seçeneğini belirlemeniz son derece önemlidir. Bu sayede, kovaya yalnızca yetkilendirilmiş kullanıcıların erişebileceğinden emin oluruz. Ardından, kovaya build sonucunda elde ettiğiniz tüm dosyaları yükleyin. Yükleme işlemini tamamladıktan sonra, kovaya erişim kontrolünü düzenleyerek sadece CloudFront’un erişebileceğinden emin olmalısınız. Bu işlem, OAC’nin doğru şekilde yapılandırılmasıyla sağlanır.
CloudFront Dağıtımının Yapılması
S3 kovası hazır olduktan sonra, CloudFront dağıtımını oluşturabilirsiniz. CloudFront, bir CDN (Content Delivery Network) hizmetidir ve içeriklerinizi dünya çapında dağıtarak, kullanıcılarınıza daha hızlı bir erişim sağlar. Dağıtım oluştururken, “Origin” olarak S3 kovanızı seçmelisiniz. Önemli bir nokta ise, CloudFront’un S3 kovasına erişimini kısıtlamak için OAC’yi kullanmanızdır. Bu, güvenlik açısından kritik bir adımdır.
Origin Access Control (OAC) Yapılandırması
OAC, CloudFront’un S3 kovasına erişimini kontrol etmenizi sağlar. Bu, kovaya yetkisiz erişimi önlemek için son derece önemlidir. OAC’yi yapılandırırken, sadece CloudFront dağıtımınızın S3 kovasına erişebileceğinden emin olmalısınız. Bu, CloudFront dağıtımınızın ARN’sini (Amazon Resource Name) OAC ayarlarında belirtmenizle gerçekleştirilir. Bu adımdan sonra, CloudFront dağıtımınızın S3 kovasından içerik çekmesi için gereken tüm yetkilere sahip olacaktır. Ayrıca, güvenlik duvarınızı da göz önünde bulundurarak gereksiz istekleri engellemelisiniz.
Son Adımlar ve Testler
Tüm bu adımları tamamladıktan sonra, CloudFront dağıtımınızın çalışıp çalışmadığını test etmeniz gerekmektedir. CloudFront size bir dağıtım URL’si verecektir. Bu URL’yi kullanarak uygulamanıza erişebilirsiniz. Uygulamanızın doğru bir şekilde çalıştığından ve içeriğin hızlı bir şekilde yüklendiğinden emin olun. Gerekli testlerden sonra, uygulamanızı güvenle canlı ortama alabilirsiniz. Hata durumunda AWS konsolunu kontrol ederek sorun giderme işlemlerine başlayabilirsiniz.
Umarım bu makale, React+Vite SPA’nızı güvenli ve verimli bir şekilde dağıtmanıza yardımcı olmuştur. Daha fazla bilgi için fatihsoysal.com sitesini ziyaret edebilirsiniz. Ayrıca, AWS dokümantasyonu da bu konuda size yardımcı olacaktır: aws.amazon.com
#Etiketler: React, Vite, S3, CloudFront, OAC, SPA, dağıtım, deployment, AWS, güvenlik, özel depolama, CDN, Amazon, web uygulaması, performans, güvenlik duvarı, IAM