Photo by sporlab on Unsplash

REACT UI MECHANICS

React Uygulaması Sunucuda Nasıl Çalışır (Local, AWS, Netlify ve Vercel)

Bu kısımda anlatacağım Local ortamda oluşturduğumuz React projesi nasıl bir Web Uygulaması haline gelir ve çalışır ? Bu süreci analiz etmek. Bu sunucu Localde de olabilir, AWS üzerinde, Vercel, Netlify vb.. herhangi bir Bulut üzerinde de olabilir.

Frontend Development With JS
6 min readAug 23, 2022

--

İlk yazımızda React Geliştirme Ortamının Oluşturulması — (Detaylı Anlatım) anlatmıştık. Farklı ortamlar (dev, testing, staging, prod) için bir projeyi nasıl farklılaştırdığımızı bu blog yazımızda anlattım. Bu yazıda react projesinin bu ortamlarda nasıl çalıştığını anlatmaya çalışacağım.

React uygulamasını anlatmadan önce basit bir HTML sayfasını düşünelim. Bu sayfa nasıl oluyorda Tarayıcı tarafından indirilerek kullanıcıya gösteriliyor.

  • Öncelikle bizim HTML, CSS, JS ve diğer resim benzeri dosyaların olması gerekiyor.
  • İkinci olarak bunun bir HTTP Sunucu dediğimiz bir ortam üzerinden belli bir adresten sunulması gerekiyor.
  • 3ncü olarak bizim bir tarayıcıya ihtiyacımız var ve adres çubuğuna bu kaynağın adresini (URL) girdiğimizde bu bilgiler Network üzerinden bilgileri alarak görüntüleme işlemi gerçekleştirir.

Yukarıdaki bu kısmı anlamak için benim daha önceden yazmış olduğum. Internet Kavramları ve Tarayıcılar Nasıl Çalışır yazı gruplarını okumanızı öneririm.

Şimdi bu durumu deneysel olarak inceleyelim. Çevremizde bir çok web sunucusu bulunur. Tomcat, Jetty, JBoss, Express, S3 vb.. tüm bunların yaptıkları HTTP Requestlerine cevap verecek belli bir URL HTML ve buna bağlı diğer kaynakları tarayıcı aktarılmasını sağlatır.

Örnek olarak php httpd sunucusunu veya npm http-server faydalanabiliriz. Ben http-server kullanacağım.

Öncelikle bir klasör oluşturalım. Amacımız buranın içerisine istediğimiz HTML, CSS ve JS dosyalarını oluşturmak olsun.

Bu klasör içerisinde bir tane basit bir index.html oluşturalım.

İlgili klasöre giderek http-server komutu ile 8080 portunda bir Web Sunucusu başlatıyoruz.

Bunun sonrasında ilgili URL gittiğimizde kaynak dosyanın tarayıcımıza aktığını görebilirsiniz.

React Uygulamasını Nasıl Çalıştırabiliriz ?

Öncelikle React projemizin Web Sunucusunun anlayacağı hale getirmemiz gerekiyor yani → HTML, CSS ve JS olacak hale getirmeliyiz.

npm run build // dediğimizde

paketin altında bulunan projeler kullandığınız bundler tarafından HTML, CSS ve JS chunklarına dönüştürülür.

Bunun sonrasında farkedeceğiniz gibi bir build klasörü ve bu klasör içerisinde Bundler (Webpack veya Vite benzeri) programlar → Babel, SaSS Transpiler araçları kullanarak hem JS, hemde CSS sıkıştırarak chunk.js ve css dosyaları haline getirir. Bunlar tarayıcıların anlayabileceği kod parçacıklarıdır.

yukarıdaki oluşturulan HTML, CSS ve JS dosyalarında da görebileceğiniz gibi bazı dosyalar

  • css iken bazıları css.map
  • js ken bazıları js.map dosyaları şeklindedir.

Map dosyaları ne işe yarıyor diye sorarsanız bunlar SourceMap dosyalarıdır. Yani biz tarayıcıda kodu debug etmek istersek sıkıştırılmış(bundle edilmiş) kodları anlayamayacağımız için bu SourceMap ile sıkıştırılmış kodlar tersine bir işlem ile (Reverse Engineering) açık, anlaşılabilir kaynak kodlarına dönüştürülür.

Not: Production sırasında SourceMap üretmek başkalarının kodunuzu görmesi açısından bir takım riskler barındırır. Bu yüzden CRA(Create React App) içerisinde bulunan aşağıdaki konfigürasyondan yararlanabilirsiniz Ve projenizin SourceMap oluşturup, oluşturmamasını kontrol edebilirsiniz.

"build": "GENERATE_SOURCEMAP=true react-scripts build",

Tamam artık elimizde bir takım HTML, CSS ve JS dosyalarımız mevcut. Gelin bunların içerisine biraz bakalım. Bir URL de ilgili klasör içerisindeki index.html dosyası okunmaya çalışılır.

Şansa bak React build komutu sonrasında build klasörü içerisinde bir index.html dosyası oluştu ve bunun içerisinde SPA(Single Page App) oluşturabilmek için yeterli dosyalar bulunur.

  • root id bir DOM obje..
  • /static/js/main.eceae8e4.js (main JavaScript)
  • /static/css/main.364a3663.css

Hatta bazen tek bir JS dosyası Network’den aktarılması zaman alacağı için bunlar bundler tarafından ufak parçalara bölünür. Ve her bir JS ve CSS içerisine sıkıştırılmış kaynak kodları bulunur.

React bir SPA (Single Page App) uygulaması olduğu için elimizde bir çok HTML dosyası bulunmaz. Bunun yerine tek bir HTML içerisindeki root elemanı içerisindeki React JavaScript kodları DOM manipülasyonları yaparak uygulama sürecini yönetir.

Not: React’ın DOM nasıl oluşturduğu ve yönettiği ile ilgili kısımları okumak için React ile DOM Kullanımı blog yazımı okuyabilirsiniz.

Bu build klasörünün içerisine girip http-server komutu çalıştırıldığımızda

MacBook-Pro-2:develop-simple-calculator onurdayibasi$ cd build/
MacBook-Pro-2:build onurdayibasi$ http-server
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://127.94.0.1:8080
http://192.168.68.53:8080
Hit CTRL-C to stop the server

8080 portunda uygulamamız açılacaktır. Gördüğünüz gibi artık olayımız bir web sunucusu olayının içerisinden HTML, CSS ve JS sunmaya dönüştü..

React Build’in Serve…

React uygulamasını build ettiğinizde zaten size aşağıdaki şekilde bir öneride bulunur.

yarn global add serve
serve -s build

Bu aslında yukarıda bahsettiğimizin benzeri build klasörü içerisinde oluşan dosyaların çalışmasını sağlar.

React Uygulamasını AWS üzerinde Çalıştıralım.

React uygulamamızın AWS Servisleri ile bulut üzerinde çalıştırılması sağlayabilirsiniz.

  1. EC2 sunucusu alıp bunun üzerinde bir Web Sunucusu Oluşturabilirsiniz
    (Bu konuda Bulutta, AWS EC2 üzerinde Sunucu Yönetimi blog yazımı okuyabilirsiniz.
  2. Bunun yerine AWS üzerinden ElasticBeanstalk ile hazır Uygulama sunucusu alarak bunun üzerine kurulum yapabilirsiniz.
  3. Veya bu kısımda AWS’nin S3 ve CDN(CloudFront) faydalanarak bu yükleme işlemini gerçekleştirebilirsiniz. (Bu konuda daha detaylı bilgi almak için (AWS S3 Servislerini nasıl kullanabilirim ? blog yazısı ile AWS CloudFront blog yazısını okumanızı öneririm)

AWS S3 ve CloudFront

AWS S3 Amazonun Object Storage. Ve Object Storage CDN ile entegre ettiğimiz zaman bu kısma atacağımız build klasörünü çalıştırmasını bekliyoruz.

https://d3jy31tj1gt845.cloudfront.net/reactdigitalgarden/apps/simple-calculator/index.html* https://d3jy31tj1gt845.cloudfront.net -> CDN Root Path
* reactdigitalgarden/apps/simple-calculator -> SubFolder Path.
* index.html -> build paketini içeriyor
https://d3jy31tj1gt845.cloudfront.net/reactdigitalgarden/apps/simple-calculator/index.html

Bunu yapmak için build kısmında homepage üzerinde package.json bir subfolder tanımlaması yapıyoruz ki bu sayede oluşan index.html içerisindeki js erişim pathleri sizin ana URL adresi üzerinden erişebilir olsun.

/reactdigitalgarden/apps/simplecalculator/static/js/main.ce97a7bd.js

Neden Vercel ve Netlify Ortamları Popüler

Amacımız sadece React Uygulaması çalıştırmak ise neden Vercel ve Netlify ortamlarını tercih edelim ? Aynı hesap makinesi uygulamamızı bu ortamlarada deploy edelim.

Vercel Deployment: https://develop-simple-calculator.vercel.app/Netlify Deployment: https://tubular-cucurucho-e39e3a.netlify.app/

Aslında yaptığı işlemler bizim manual yaptığımız işlemler ile aynı. Ama bunları otomatikleştirmesi ve bunları Frontend Geliştiricilerinin hiç bilmesini gerektirmeden kolayca yaptırması, çoğu geliştiriciyi bu ortamlara yönlenmesine neden oluyor.

Neden Vercel ve Netlify bu kadar popüler ?

  • Temel Servislerinin ücretsiz olması
  • Arayüzlerinin hem basit oması hemde geliştiricilere hazır UI Framework ve Hazır Template’ler sunmaları
  • Hazır GitHub, GitLab, Bicbucket vb.. proje kaynak dosyalarını ve versiyonlarını yönettiğiniz kısımlara entegre uygulamaları sayesinde sizin Master/Main PR güncellemelerinizi görüp, buna göre sizin arka planda yaptığınız build ve uygulama deploy işlemlerini otomatik çalıştırması

Hazır UI Framework ve Template Sunması

Örneğin siz Vercel/Netlify ortamına girdiniz ve bir Web Application kurmak istediniz. Bu durumda size aşağıdaki gibi hazır template olduğu bir web sayfası sunar.

Project Template GitHub Kurulunca Vercel/Netlify App Git Push Dinlemesi

Bu aşamada uygulama kısmında GitHub Settings kısmında Netlify ve Vercel uygulamalarının yüklenmiş olduğunu görebilirsiniz.

Bu kısımda gördüğünüz RunForesight uygulamaları Thundra şirketinde geliştirdiğimiz CI/CD Workflow, Testleri monitor etmenizi sağlıyor. Şirketinizin veya kişisel projeleriniz GitHub’da ise bu üründen bu linke giderek faydalanabilirsiniz.

Vercel ve Netlify uygulamamıza girdiğinizde yapmanız gereken React projenizi kurmuş olduğunuz Repository için izin almanız gerekiyor.

Bu izni verdiğinizde artık Vercel ve Netlify ortamlarında uygulamanızı entegre ettiğiniz anlamına geliyor

Vercel

https://develop-simple-calculator-2l5njxuob-odayibasi-gmailcom.vercel.app/

Netlify

https://tubular-cucurucho-e39e3a.netlify.app/

Bu ortamlar üzerinden Web uygulamalarınızı basit bir şekilde sunabilirsiniz. Ama temelde yapılan hep aynı şey..

  • Code Commit
  • Checking Rules and Build
  • Deploy

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--

Responses (1)