React Uygulamas\u0131n\u0131 Nginx ile Ubuntu’ya Nas\u0131l Da\u011f\u0131t\u0131rs\u0131n\u0131z?<\/title><br \/>\n<body><\/p>\n<p>Modern web uygulamalar\u0131 geli\u015ftirmek heyecan verici bir s\u00fcre\u00e7tir, ancak bu uygulamalar\u0131 kullan\u0131c\u0131lar\u0131n eri\u015fimine sunmak, yani da\u011f\u0131t\u0131m (deployment), bir\u00e7ok geli\u015ftirici i\u00e7in kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir. \u00d6zellikle React gibi pop\u00fcler bir frontend k\u00fct\u00fcphanesiyle geli\u015ftirilen uygulamalar\u0131n, h\u0131zl\u0131 ve g\u00fcvenilir bir \u015fekilde sunulmas\u0131 kritik \u00f6neme sahiptir. Bu makalede, React uygulaman\u0131z\u0131 g\u00fc\u00e7l\u00fc ve esnek bir web sunucusu olan Nginx ile Ubuntu i\u015fletim sistemi \u00fczerinde nas\u0131l da\u011f\u0131taca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m, ger\u00e7ek d\u00fcnya senaryolar\u0131yla ve pratik ipu\u00e7lar\u0131yla ele alaca\u011f\u0131z. Haz\u0131r m\u0131s\u0131n\u0131z? Gelin, bu s\u00fcreci birlikte basitle\u015ftirelim ve uygulaman\u0131z\u0131 canl\u0131ya alal\u0131m!<\/p>\n<h2>React Uygulamas\u0131n\u0131 Nginx ile Ubuntu’ya Da\u011f\u0131tmak Neden \u00d6nemli?<\/h2>\n<p>React uygulamalar\u0131n\u0131 geli\u015ftirmek kadar, onlar\u0131 sorunsuz bir \u015fekilde yay\u0131nlamak da projenizin ba\u015far\u0131s\u0131 i\u00e7in hayati bir ad\u0131md\u0131r. Peki, neden \u00f6zellikle Nginx ve Ubuntu kombinasyonunu tercih etmeliyiz? Bu soru, \u00f6zellikle yeni ba\u015flayanlar veya farkl\u0131 da\u011f\u0131t\u0131m y\u00f6ntemleri denemi\u015f olanlar i\u00e7in olduk\u00e7a \u00f6nemlidir. \u00d6ncelikle, React uygulamalar\u0131 genellikle statik dosyalar (HTML, CSS, JavaScript) \u00fcreten bir “build” s\u00fcreciyle \u00e7al\u0131\u015f\u0131r. Bu statik dosyalar\u0131n h\u0131zl\u0131, g\u00fcvenli ve verimli bir \u015fekilde sunulmas\u0131 gerekir. \u0130\u015fte tam da bu noktada Nginx devreye giriyor.<\/p>\n<p>Nginx, y\u00fcksek performansl\u0131, hafif ve g\u00fc\u00e7l\u00fc bir web sunucusudur. \u00d6zellikle statik dosya sunumunda ve ters proxy (reverse proxy) g\u00f6revinde rakiplerine g\u00f6re olduk\u00e7a ba\u015far\u0131l\u0131d\u0131r. D\u00fc\u015f\u00fck bellek t\u00fcketimi ve y\u00fcksek e\u015fzamanl\u0131 ba\u011flant\u0131 i\u015fleme kapasitesi sayesinde, uygulaman\u0131z\u0131n trafi\u011fi ne kadar artarsa arts\u0131n, Nginx performans d\u00fc\u015f\u00fc\u015f\u00fc ya\u015famadan hizmet vermeye devam edebilir. Bu da kullan\u0131c\u0131lar\u0131n\u0131z i\u00e7in kesintisiz ve h\u0131zl\u0131 bir deneyim anlam\u0131na gelir. Bir e-ticaret sitesi d\u00fc\u015f\u00fcn\u00fcn; Black Friday gibi yo\u011fun d\u00f6nemlerde binlerce kullan\u0131c\u0131n\u0131n ayn\u0131 anda siteye eri\u015fmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 varsayal\u0131m. Nginx’in bu y\u00fck\u00fc sorunsuz bir \u015fekilde y\u00f6netebilmesi, potansiyel sat\u0131\u015f kay\u0131plar\u0131n\u0131 \u00f6nleyerek i\u015fletmeniz i\u00e7in do\u011frudan bir fayda sa\u011flar.<\/p>\n<p>Di\u011fer yandan, Ubuntu sunucu taraf\u0131nda en pop\u00fcler ve g\u00fcvenilir Linux da\u011f\u0131t\u0131mlar\u0131ndan biridir. Geni\u015f topluluk deste\u011fi, zengin paket deposu ve kullan\u0131m kolayl\u0131\u011f\u0131 sayesinde, sunucu y\u00f6netimi s\u00fcre\u00e7lerini basitle\u015ftirir. G\u00fcvenlik g\u00fcncellemeleri d\u00fczenli olarak yay\u0131nlan\u0131r ve sisteminizi g\u00fcncel tutmak olduk\u00e7a kolayd\u0131r. Nginx’in Ubuntu \u00fczerinde kurulumu ve yap\u0131land\u0131r\u0131lmas\u0131 da olduk\u00e7a basittir, bu da geli\u015ftiricilerin h\u0131zl\u0131ca da\u011f\u0131t\u0131m yapmas\u0131na olanak tan\u0131r. Ayr\u0131ca, Ubuntu’nun sa\u011flad\u0131\u011f\u0131 sa\u011flam temel, uygulaman\u0131z\u0131n kararl\u0131 bir ortamda \u00e7al\u0131\u015fmas\u0131n\u0131 garanti eder. Bu kombinasyon, \u00f6zellikle maliyet etkinli\u011fi ve \u00f6l\u00e7eklenebilirlik arayan k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli i\u015fletmeler i\u00e7in ideal bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\n<p>G\u00fcvenlik de g\u00f6z ard\u0131 edilmemesi gereken bir fakt\u00f6rd\u00fcr. Nginx, SSL\/TLS sertifikalar\u0131n\u0131 kolayca yap\u0131land\u0131rma imkan\u0131 sunar, b\u00f6ylece uygulaman\u0131z HTTPS \u00fczerinden g\u00fcvenli bir \u015fekilde yay\u0131nlanabilir. Bu, kullan\u0131c\u0131 verilerinin \u015fifrelenmesi ve taray\u0131c\u0131larda “g\u00fcvenli ba\u011flant\u0131” ibaresinin g\u00f6r\u00fcnmesi i\u00e7in kritik \u00f6neme sahiptir. Bir blog sitesi veya ki\u015fisel portf\u00f6y bile olsa, kullan\u0131c\u0131lar\u0131n g\u00fcvenini kazanmak i\u00e7in HTTPS kullan\u0131m\u0131 art\u0131k bir standart haline gelmi\u015ftir. T\u00fcm bu nedenler bir araya geldi\u011finde, React uygulaman\u0131z\u0131 Nginx ve Ubuntu \u00fczerinde da\u011f\u0131tmak, hem performans hem g\u00fcvenlik hem de y\u00f6netim kolayl\u0131\u011f\u0131 a\u00e7\u0131s\u0131ndan olduk\u00e7a mant\u0131kl\u0131 ve tercih edilen bir y\u00f6ntemdir.<\/p>\n<div class=\"expert-tip\">Uzman \u0130pucu: Nginx’in ters proxy yetenekleri sayesinde, ayn\u0131 sunucu \u00fczerinde hem React uygulaman\u0131z\u0131 hem de Node.js veya Python gibi bir backend API’nizi farkl\u0131 portlarda \u00e7al\u0131\u015ft\u0131r\u0131p, Nginx \u00fczerinden tek bir domain alt\u0131nda y\u00f6nlendirebilirsiniz. Bu, mimarinizi sadele\u015ftirir ve y\u00f6netim y\u00fck\u00fcn\u00fc azalt\u0131r.<\/div>\n<h2>Temel Kavramlara H\u0131zl\u0131 Bir Bak\u0131\u015f: React, Nginx ve Ubuntu Nedir?<\/h2>\n<p>Bu da\u011f\u0131t\u0131m s\u00fcrecine ba\u015flamadan \u00f6nce, kulland\u0131\u011f\u0131m\u0131z temel teknolojileri k\u0131saca anlamak, yol haritam\u0131z\u0131 daha net g\u00f6rmemizi sa\u011flayacakt\u0131r. E\u011fer bu kavramlara yabanc\u0131ysan\u0131z endi\u015felenmeyin, burada h\u0131zl\u0131ca bir \u00f6zet ge\u00e7ece\u011fiz.<\/p>\n<h3>React Nedir?<\/h3>\n<p>React, Facebook taraf\u0131ndan geli\u015ftirilen, kullan\u0131c\u0131 aray\u00fczleri (UI) olu\u015fturmak i\u00e7in kullan\u0131lan a\u00e7\u0131k kaynakl\u0131 bir JavaScript k\u00fct\u00fcphanesidir. Bile\u015fen tabanl\u0131 yap\u0131s\u0131yla, b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar\u0131 y\u00f6netilebilir, yeniden kullan\u0131labilir par\u00e7alara ay\u0131rman\u0131za olanak tan\u0131r. Sanal DOM (Virtual DOM) kullanarak performans\u0131 art\u0131r\u0131r ve sadece de\u011fi\u015fen k\u0131s\u0131mlar\u0131 g\u00fcncelleyerek daha h\u0131zl\u0131 bir kullan\u0131c\u0131 deneyimi sunar. React uygulamalar\u0131 genellikle taray\u0131c\u0131da \u00e7al\u0131\u015f\u0131r ve son kullan\u0131c\u0131ya HTML, CSS ve JavaScript dosyalar\u0131 olarak sunulur. Da\u011f\u0131t\u0131m \u00f6ncesinde, bu JavaScript kodlar\u0131 bir “build” s\u00fcreciyle optimize edilir ve taray\u0131c\u0131lar\u0131n anlayabilece\u011fi statik dosyalara d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr. Bu statik dosyalar, sunucu taraf\u0131ndan do\u011frudan servis edilebilir.<\/p>\n<h3>Nginx Nedir?<\/h3>\n<p>Nginx (Engine-X olarak okunur), Igor Sysoev taraf\u0131ndan geli\u015ftirilen, y\u00fcksek performansl\u0131, a\u00e7\u0131k kaynakl\u0131 bir web sunucusu, ters proxy sunucusu ve HTTP \u00f6nbellek sunucusudur. \u00d6zellikle statik i\u00e7erik sunumunda ve y\u00fcksek trafikli web sitelerinde g\u00f6sterdi\u011fi \u00fcst\u00fcn performansla bilinir. Nginx’in olay tabanl\u0131 (event-driven) mimarisi, ayn\u0131 anda binlerce ba\u011flant\u0131y\u0131 d\u00fc\u015f\u00fck bellek t\u00fcketimiyle i\u015fleyebilmesini sa\u011flar. Ayr\u0131ca, y\u00fck dengeleme (load balancing), SSL sonland\u0131rma (SSL termination) ve web uygulamalar\u0131 i\u00e7in g\u00fcvenlik duvar\u0131 (WAF) gibi geli\u015fmi\u015f \u00f6zellikler sunar. React uygulamam\u0131z i\u00e7in Nginx, “build” \u00e7\u0131kt\u0131s\u0131 olan statik dosyalar\u0131 do\u011frudan taray\u0131c\u0131lara ula\u015ft\u0131racak ana kap\u0131 g\u00f6revi g\u00f6recektir. Ayn\u0131 zamanda, e\u011fer bir API backend’iniz varsa, Nginx bu API isteklerini de do\u011fru sunucuya y\u00f6nlendirmek i\u00e7in bir ters proxy olarak kullan\u0131labilir.<\/p>\n<h3>Ubuntu Nedir?<\/h3>\n<p>Ubuntu, Debian tabanl\u0131, \u00f6zg\u00fcr ve a\u00e7\u0131k kaynakl\u0131 bir Linux i\u015fletim sistemidir. Masa\u00fcst\u00fc ve sunucu s\u00fcr\u00fcmleri bulunur. Sunucu ortam\u0131nda, kararl\u0131l\u0131\u011f\u0131, g\u00fcvenilirli\u011fi ve geni\u015f paket deste\u011fi sayesinde en pop\u00fcler Linux da\u011f\u0131t\u0131mlar\u0131ndan biridir. B\u00fcy\u00fck bir toplulu\u011fa sahip olmas\u0131, kar\u015f\u0131la\u015fabilece\u011finiz sorunlara h\u0131zl\u0131ca \u00e7\u00f6z\u00fcm bulabilece\u011finiz anlam\u0131na gelir. Ubuntu Server, genellikle komut sat\u0131r\u0131 aray\u00fcz\u00fc (CLI) \u00fczerinden y\u00f6netilir, bu da kaynak t\u00fcketimini minimumda tutarak sunucunuzun performans\u0131n\u0131 art\u0131r\u0131r. Bizim senaryomuzda, React uygulamam\u0131z\u0131 ve Nginx sunucumuzu bar\u0131nd\u0131racak olan i\u015fletim sistemi Ubuntu olacakt\u0131r. Sunucunuzu internete a\u00e7mak i\u00e7in gerekli a\u011f yap\u0131land\u0131rmalar\u0131, g\u00fcvenlik duvar\u0131 ayarlar\u0131 ve yaz\u0131l\u0131m kurulumlar\u0131 Ubuntu \u00fczerinde ger\u00e7ekle\u015ftirilecektir.<\/p>\n<p>Bu \u00fc\u00e7 temel bile\u015fen, modern web uygulamalar\u0131n\u0131n h\u0131zl\u0131, g\u00fcvenli ve \u00f6l\u00e7eklenebilir bir \u015fekilde da\u011f\u0131t\u0131lmas\u0131 i\u00e7in g\u00fc\u00e7l\u00fc bir ekosistem olu\u015fturur. React ile kullan\u0131c\u0131 dostu aray\u00fczler geli\u015ftirirken, Nginx ile bu aray\u00fczleri y\u00fcksek performansla sunar ve Ubuntu ile de t\u00fcm bu yap\u0131y\u0131 sa\u011flam bir temel \u00fczerine oturtmu\u015f oluruz. Bu kavramlar\u0131 anlad\u0131\u011f\u0131m\u0131za g\u00f6re, art\u0131k uygulamam\u0131z\u0131 da\u011f\u0131t\u0131ma haz\u0131rlama ad\u0131mlar\u0131na ge\u00e7ebiliriz.<\/p>\n<h2>React Uygulaman\u0131z\u0131 Da\u011f\u0131t\u0131ma Haz\u0131rlama Ad\u0131mlar\u0131 Nelerdir?<\/h2>\n<p>Uygulaman\u0131z\u0131 bir sunucuya g\u00f6ndermeden \u00f6nce, da\u011f\u0131t\u0131ma haz\u0131r hale getirmeniz gerekir. Bu s\u00fcre\u00e7, genellikle geli\u015ftirme ortam\u0131nda \u00e7al\u0131\u015fan kodunuzu, \u00fcretim ortam\u0131 i\u00e7in optimize edilmi\u015f statik dosyalara d\u00f6n\u00fc\u015ft\u00fcrmeyi i\u00e7erir. Bu ad\u0131mlar, uygulaman\u0131z\u0131n performans\u0131n\u0131 art\u0131r\u0131r ve sunucu kaynaklar\u0131n\u0131 daha verimli kullanmas\u0131n\u0131 sa\u011flar.<\/p>\n<h3>Uygulaman\u0131z\u0131n Temel Yap\u0131s\u0131n\u0131 G\u00f6zden Ge\u00e7irme<\/h3>\n<p>\u00d6ncelikle, React uygulaman\u0131z\u0131n geli\u015ftirme ortam\u0131nda sorunsuz \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olun. Gerekli t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131n y\u00fckl\u00fc oldu\u011fundan ve herhangi bir hata mesaj\u0131 almad\u0131\u011f\u0131n\u0131zdan emin olun. E\u011fer uygulaman\u0131z bir API’ye ba\u011flan\u0131yorsa, bu API’nin URL’sinin \u00fcretim ortam\u0131 i\u00e7in do\u011fru \u015fekilde yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131ndan emin olun. Genellikle, bu t\u00fcr ortam de\u011fi\u015fkenleri <code>.env<\/code> dosyalar\u0131 arac\u0131l\u0131\u011f\u0131yla y\u00f6netilir. \u00d6rne\u011fin, yerel geli\u015ftirme ortam\u0131nda <code>http:\/\/localhost:5000\/api<\/code> kullan\u0131rken, \u00fcretimde <code>https:\/\/api.yourdomain.com<\/code> kullanman\u0131z gerekebilir.<\/p>\n<pre><code>\n\/\/ React uygulaman\u0131zda API \u00e7a\u011fr\u0131s\u0131 \u00f6rne\u011fi\nconst fetchData = async () => {\n const API_URL = process.env.REACT_APP_API_URL || \"http:\/\/localhost:5000\/api\";\n try {\n const response = await fetch(<code class=\"language-\">${API_URL}\/data<\/code>);\n const data = await response.json();\n console.log(data);\n } catch (error) {\n console.error(\"API \u00e7a\u011fr\u0131s\u0131 ba\u015far\u0131s\u0131z:\", error);\n }\n};\n <\/code><\/pre>\n<p><code>REACT_APP_API_URL<\/code> gibi ortam de\u011fi\u015fkenlerini <code>.env.production<\/code> dosyas\u0131nda tan\u0131mlayarak \u00fcretim ortam\u0131na \u00f6zel de\u011ferleri ayarlayabilirsiniz. Bu, uygulaman\u0131z\u0131n farkl\u0131 ortamlarda farkl\u0131 API u\u00e7 noktalar\u0131na ba\u011flanmas\u0131n\u0131 sa\u011flar.<\/p>\n<h3>\u00dcretim \u0130\u00e7in Build S\u00fcreci<\/h3>\n<p>React uygulamalar\u0131n\u0131 da\u011f\u0131t\u0131ma haz\u0131rlaman\u0131n en kritik ad\u0131m\u0131, uygulamay\u0131 “build” etmektir. Bu i\u015flem, uygulaman\u0131z\u0131n t\u00fcm JavaScript, CSS ve HTML dosyalar\u0131n\u0131 optimize eder, s\u0131k\u0131\u015ft\u0131r\u0131r ve tek bir \u00e7\u0131kt\u0131 dizinine (genellikle <code>build<\/code> veya <code>dist<\/code>) yerle\u015ftirir. Bu optimize edilmi\u015f dosyalar, taray\u0131c\u0131lar taraf\u0131ndan \u00e7ok daha h\u0131zl\u0131 bir \u015fekilde y\u00fcklenebilir ve \u00e7al\u0131\u015ft\u0131r\u0131labilir.<\/p>\n<p>Uygulaman\u0131z\u0131n k\u00f6k dizininde, terminali a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n<pre><code>\nnpm run build\n <\/code><\/pre>\n<p>veya e\u011fer Yarn kullan\u0131yorsan\u0131z:<\/p>\n<pre><code>\nyarn build\n <\/code><\/pre>\n<p>Bu komut, projenizin k\u00f6k dizininde genellikle <code>build\/<\/code> ad\u0131nda yeni bir klas\u00f6r olu\u015fturacakt\u0131r. Bu klas\u00f6r\u00fcn i\u00e7eri\u011fi, sunucunuza y\u00fcklemeniz gereken statik dosyalard\u0131r. Bu dosyalar\u0131n i\u00e7inde <code>index.html<\/code>, optimize edilmi\u015f JavaScript (<code>.js<\/code>) ve CSS (<code>.css<\/code>) dosyalar\u0131, resimler ve di\u011fer statik varl\u0131klar bulunur. Bu i\u015flem, ayn\u0131 zamanda gereksiz bo\u015fluklar\u0131 kald\u0131r\u0131r, kodlar\u0131 k\u00fc\u00e7\u00fclt\u00fcr (minify) ve taray\u0131c\u0131 \u00f6nbelleklemesini iyile\u015ftirmek i\u00e7in dosya adlar\u0131na hash’ler ekler.<\/p>\n<h3>Tek Sayfa Uygulamalar\u0131 (SPA) \u0130\u00e7in Y\u00f6nlendirme Ayarlar\u0131<\/h3>\n<p>React, genellikle tek sayfa uygulamas\u0131 (SPA) olarak geli\u015ftirilir. Bu, uygulaman\u0131z\u0131n tek bir <code>index.html<\/code> dosyas\u0131 \u00fczerinden y\u00fcklenmesi ve t\u00fcm y\u00f6nlendirmelerin (routing) JavaScript taraf\u0131ndan y\u00f6netilmesi anlam\u0131na gelir. Ancak, kullan\u0131c\u0131 do\u011frudan <code>yourdomain.com\/about<\/code> gibi bir alt sayfaya eri\u015fmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131nda, sunucu bu URL’ye kar\u015f\u0131l\u0131k gelen bir dosya bulamayabilir ve 404 hatas\u0131 d\u00f6nebilir. Bu durumu \u00f6nlemek i\u00e7in, Nginx’i t\u00fcm bilinmeyen URL isteklerini <code>index.html<\/code> dosyas\u0131na y\u00f6nlendirecek \u015fekilde yap\u0131land\u0131rmam\u0131z gerekir. Bu sayede React Router veya benzeri bir k\u00fct\u00fcphane, URL’yi i\u015fleyebilir ve do\u011fru bile\u015feni g\u00f6sterebilir.<\/p>\n<p>Bu haz\u0131rl\u0131k ad\u0131mlar\u0131 tamamland\u0131\u011f\u0131nda, React uygulaman\u0131z sunucuya y\u00fcklenmeye haz\u0131r hale gelmi\u015f demektir. \u015eimdi s\u0131ra, Ubuntu sunucumuzu haz\u0131rlamaya ve Nginx’i kurmaya geldi.<\/p>\n<h2>Ubuntu Sunucusunu Kurulum \u0130\u00e7in Nas\u0131l Haz\u0131rlars\u0131n\u0131z?<\/h2>\n<p>React uygulaman\u0131z\u0131 bar\u0131nd\u0131racak Ubuntu sunucusunu do\u011fru bir \u015fekilde haz\u0131rlamak, sorunsuz bir da\u011f\u0131t\u0131m s\u00fcrecinin temelini olu\u015fturur. Bu b\u00f6l\u00fcm, sunucunuza SSH ile ba\u011flanmaktan, gerekli g\u00fcncellemeleri yapmaya ve temel g\u00fcvenlik ayarlar\u0131n\u0131 yap\u0131land\u0131rmaya kadar t\u00fcm ad\u0131mlar\u0131 kapsayacakt\u0131r.<\/p>\n<h3>SSH ile Sunucuya Ba\u011flanma<\/h3>\n<p>\u0130lk ad\u0131m, yerel bilgisayar\u0131n\u0131zdan Ubuntu sunucunuza g\u00fcvenli bir \u015fekilde ba\u011flanmakt\u0131r. Bu i\u015flem i\u00e7in SSH (Secure Shell) protokol\u00fcn\u00fc kullanaca\u011f\u0131z. Sunucu sa\u011flay\u0131c\u0131n\u0131zdan ald\u0131\u011f\u0131n\u0131z IP adresini ve kullan\u0131c\u0131 ad\u0131n\u0131 (genellikle <code>root<\/code> veya varsay\u0131lan bir kullan\u0131c\u0131) kullanarak terminalinizden ba\u011flanabilirsiniz:<\/p>\n<pre><code>\nssh kullanici_adi@sunucu_ip_adresi\n <\/code><\/pre>\n<p>\u00d6rne\u011fin:<\/p>\n<pre><code>\nssh ahmet@192.0.2.10\n <\/code><\/pre>\n<p>Parolan\u0131z\u0131 girmeniz istendi\u011finde, sunucunuzun parolas\u0131n\u0131 dikkatlice girin. G\u00fcvenlik i\u00e7in, bir kez ba\u011fland\u0131ktan sonra <code>root<\/code> kullan\u0131c\u0131s\u0131 yerine ayr\u0131cal\u0131kl\u0131 (sudo) yetkilere sahip yeni bir kullan\u0131c\u0131 olu\u015fturman\u0131z \u00f6nerilir. Bu, yanl\u0131\u015fl\u0131kla sistem dosyalar\u0131na zarar verme riskini azalt\u0131r.<\/p>\n<pre><code>\nsudo adduser yeni_kullanici_adi\nsudo usermod -aG sudo yeni_kullanici_adi\n <\/code><\/pre>\n<p>Ard\u0131ndan, yeni kullan\u0131c\u0131n\u0131zla oturum a\u00e7\u0131p <code>root<\/code> oturumunu kapatabilirsiniz.<\/p>\n<h3>Sistem G\u00fcncelle\u015ftirmeleri ve Paket Kurulumu<\/h3>\n<p>Sunucunuza ba\u011fland\u0131ktan sonra, sistem paket listesini g\u00fcncellemek ve mevcut paketleri en son s\u00fcr\u00fcmlerine y\u00fckseltmek \u00f6nemlidir. Bu, g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 kapat\u0131r ve en g\u00fcncel yaz\u0131l\u0131m s\u00fcr\u00fcmlerine sahip olman\u0131z\u0131 sa\u011flar.<\/p>\n<pre><code>\nsudo apt update\nsudo apt upgrade -y\n <\/code><\/pre>\n<p><code>-y<\/code> parametresi, t\u00fcm sorulara otomatik olarak “evet” yan\u0131t\u0131 vermenizi sa\u011flar. Bu i\u015flem biraz zaman alabilir.<\/p>\n<h3>G\u00fcvenlik Duvar\u0131 (UFW) Kurulumu ve Yap\u0131land\u0131rmas\u0131<\/h3>\n<p>Sunucunuzun g\u00fcvenli\u011fini sa\u011flamak i\u00e7in bir g\u00fcvenlik duvar\u0131 (firewall) yap\u0131land\u0131rmak \u00e7ok \u00f6nemlidir. Ubuntu’da UFW (Uncomplicated Firewall) bu i\u015f i\u00e7in harika bir ara\u00e7t\u0131r. Varsay\u0131lan olarak, UFW t\u00fcm gelen ba\u011flant\u0131lar\u0131 engeller. Bizim ihtiya\u00e7lar\u0131m\u0131z do\u011frultusunda, SSH (port 22), HTTP (port 80) ve HTTPS (port 443) portlar\u0131n\u0131 a\u00e7mam\u0131z gerekecek.<\/p>\n<pre><code>\nsudo ufw app list # Mevcut uygulama profillerini listeler\nsudo ufw allow OpenSSH # SSH ba\u011flant\u0131lar\u0131na izin verir\nsudo ufw allow 'Nginx HTTP' # Nginx'in HTTP trafi\u011fine izin verir (Nginx kurulduktan sonra)\nsudo ufw allow 'Nginx HTTPS' # Nginx'in HTTPS trafi\u011fine izin verir (SSL kurulduktan sonra)\nsudo ufw enable # G\u00fcvenlik duvar\u0131n\u0131 etkinle\u015ftirir\nsudo ufw status # G\u00fcvenlik duvar\u0131 durumunu kontrol eder\n <\/code><\/pre>\n<p>UFW’yi etkinle\u015ftirmeden \u00f6nce SSH portunu a\u00e7t\u0131\u011f\u0131n\u0131zdan emin olun, aksi takdirde sunucunuzla ba\u011flant\u0131n\u0131z kesilebilir! Nginx’i kurduktan sonra <code>Nginx HTTP<\/code> ve <code>Nginx HTTPS<\/code> profillerini etkinle\u015ftirece\u011fiz. Bu ad\u0131mlar, sunucunuzu d\u0131\u015far\u0131dan gelebilecek yetkisiz eri\u015fimlere kar\u015f\u0131 koruyarak sadece gerekli portlar\u0131n a\u00e7\u0131k kalmas\u0131n\u0131 sa\u011flar. Bu, \u00f6zellikle bir web uygulamas\u0131 da\u011f\u0131t\u0131rken g\u00f6z ard\u0131 edilmemesi gereken temel bir g\u00fcvenlik \u00f6nlemidir.<\/p>\n<p>Art\u0131k Ubuntu sunucunuz React uygulaman\u0131z\u0131 ve Nginx’i bar\u0131nd\u0131rmak i\u00e7in temel olarak haz\u0131r durumda. Bir sonraki ad\u0131mda, Nginx’i kuracak ve React uygulaman\u0131z\u0131 sunacak \u015fekilde yap\u0131land\u0131raca\u011f\u0131z.<\/p>\n<h2>Nginx’i Kurma ve React Uygulaman\u0131z\u0131 Sunma S\u00fcreci<\/h2>\n<p>Bu b\u00f6l\u00fcm, Nginx’i Ubuntu sunucunuza kurmaktan, React uygulaman\u0131z\u0131n statik dosyalar\u0131n\u0131 sunacak \u015fekilde yap\u0131land\u0131rmaya ve hatta bir alan ad\u0131 (domain) ile ili\u015fkilendirmeye kadar olan kritik ad\u0131mlar\u0131 detayland\u0131r\u0131r. Uygulaman\u0131z\u0131n canl\u0131ya \u00e7\u0131kaca\u011f\u0131 as\u0131l yer buras\u0131d\u0131r.<\/p>\n<h3>Nginx Kurulumu<\/h3>\n<p>Ubuntu paket y\u00f6neticisi (APT) kullanarak Nginx’i kurmak olduk\u00e7a basittir. Sunucunuzda SSH ile oturum a\u00e7t\u0131ktan sonra a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n<pre><code>\nsudo apt install nginx -y\n <\/code><\/pre>\n<p>Kurulum tamamland\u0131ktan sonra, Nginx servisinin \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olmak i\u00e7in a\u015fa\u011f\u0131daki komutu kullanabilirsiniz:<\/p>\n<pre><code>\nsudo systemctl status nginx\n <\/code><\/pre>\n<p>\u00c7\u0131kt\u0131da <code>active (running)<\/code> ifadesini g\u00f6rmelisiniz. E\u011fer g\u00f6rm\u00fcyorsan\u0131z, Nginx’i ba\u015flatmak i\u00e7in <code>sudo systemctl start nginx<\/code> komutunu kullanabilirsiniz. Ayr\u0131ca, sunucu yeniden ba\u015flat\u0131ld\u0131\u011f\u0131nda Nginx’in otomatik olarak ba\u015flamas\u0131n\u0131 sa\u011flamak i\u00e7in:<\/p>\n<pre><code>\nsudo systemctl enable nginx\n <\/code><\/pre>\n<p>Nginx kurulduktan sonra, taray\u0131c\u0131n\u0131zdan sunucunuzun IP adresini ziyaret ederek varsay\u0131lan Nginx ho\u015f geldiniz sayfas\u0131n\u0131 g\u00f6rmelisiniz. Bu, Nginx’in ba\u015far\u0131yla \u00e7al\u0131\u015ft\u0131\u011f\u0131 anlam\u0131na gelir. \u015eimdi UFW g\u00fcvenlik duvar\u0131nda Nginx HTTP trafi\u011fine izin verelim:<\/p>\n<pre><code>\nsudo ufw allow 'Nginx HTTP'\nsudo ufw reload\n <\/code><\/pre>\n<h3>React Uygulamas\u0131n\u0131 Sunucuya Y\u00fckleme<\/h3>\n<p>Daha \u00f6nce React uygulaman\u0131z\u0131n <code>build<\/code> komutuyla olu\u015fturdu\u011fu statik dosyalar\u0131 sunucuya aktarman\u0131z gerekiyor. Bu i\u015flem i\u00e7in SCP (Secure Copy Protocol) veya SFTP (SSH File Transfer Protocol) kullanabilirsiniz. SCP, terminal \u00fczerinden h\u0131zl\u0131 dosya transferi i\u00e7in idealdir.<\/p>\n<p>Yerel makinenizden, React projenizin k\u00f6k dizininde bulunan <code>build<\/code> klas\u00f6r\u00fcn\u00fc sunucunuza kopyalay\u0131n. Nginx, genellikle web sitelerini <code>\/var\/www\/html\/<\/code> dizininde bar\u0131nd\u0131r\u0131r. Biz de React uygulamam\u0131z i\u00e7in bu dizinin alt\u0131na \u00f6zel bir klas\u00f6r olu\u015fturaca\u011f\u0131z.<\/p>\n<pre><code>\n# Yerel makinenizde \u00e7al\u0131\u015ft\u0131r\u0131n\nscp -r .\/build kullanici_adi@sunucu_ip_adresi:\/var\/www\/html\/your_react_app\n <\/code><\/pre>\n<p>\u00d6rne\u011fin:<\/p>\n<pre><code>\nscp -r .\/build ahmet@192.0.2.10:\/var\/www\/html\/my-react-portfolio\n <\/code><\/pre>\n<p>Bu komut, yerel <code>build<\/code> klas\u00f6r\u00fcn\u00fcz\u00fc sunucudaki <code>\/var\/www\/html\/your_react_app<\/code> dizinine kopyalayacakt\u0131r. Sunucuda bu dizinin var oldu\u011fundan emin olun veya SCP komutuyla otomatik olarak olu\u015fturulmas\u0131n\u0131 sa\u011flay\u0131n. Ard\u0131ndan, Nginx’in bu dosyalara eri\u015febilmesi i\u00e7in gerekli izinleri ayarlay\u0131n:<\/p>\n<pre><code>\n# Sunucuda \u00e7al\u0131\u015ft\u0131r\u0131n\nsudo chown -R www-data:www-data \/var\/www\/html\/your_react_app\nsudo chmod -R 755 \/var\/www\/html\/your_react_app\n <\/code><\/pre>\n<h3>Nginx Yap\u0131land\u0131rmas\u0131<\/h3>\n<p>Nginx, web sitelerini yap\u0131land\u0131rmak i\u00e7in “server block” ad\u0131 verilen yap\u0131land\u0131rma dosyalar\u0131n\u0131 kullan\u0131r. Bu dosyalar genellikle <code>\/etc\/nginx\/sites-available\/<\/code> dizininde bulunur ve <code>\/etc\/nginx\/sites-enabled\/<\/code> dizinine sembolik bir ba\u011flant\u0131 (symlink) olu\u015fturularak etkinle\u015ftirilir.<\/p>\n<p>Yeni bir yap\u0131land\u0131rma dosyas\u0131 olu\u015ftural\u0131m:<\/p>\n<pre><code>\nsudo nano \/etc\/nginx\/sites-available\/your_react_app\n <\/code><\/pre>\n<p>A\u015fa\u011f\u0131daki i\u00e7eri\u011fi dosyaya yap\u0131\u015ft\u0131r\u0131n ve <code>yourdomain.com<\/code> ile <code>www.yourdomain.com<\/code> k\u0131s\u0131mlar\u0131n\u0131 kendi alan ad\u0131n\u0131zla, <code>\/var\/www\/html\/your_react_app<\/code> yolunu da uygulaman\u0131z\u0131n bulundu\u011fu dizinle de\u011fi\u015ftirin:<\/p>\n<pre><code>\nserver {\n listen 80;\n listen [::]:80;\n\n root \/var\/www\/html\/your_react_app;\n index index.html index.htm;\n\n server_name yourdomain.com www.yourdomain.com; # Alan ad\u0131n\u0131z\u0131 buraya yaz\u0131n\n\n location \/ {\n try_files $uri $uri\/ \/index.html; # React SPA y\u00f6nlendirmesi i\u00e7in kritik\n }\n\n # Hata sayfalar\u0131n\u0131 yap\u0131land\u0131rabilirsiniz (iste\u011fe ba\u011fl\u0131)\n error_page 404 \/index.html; # T\u00fcm 404'leri React'in handle etmesi i\u00e7in\n}\n <\/code><\/pre>\n<p>Bu yap\u0131land\u0131rma dosyas\u0131n\u0131n ana hatlar\u0131 \u015funlard\u0131r:<\/p>\n<ul>\n<li><code>listen 80;<\/code>: Nginx’in HTTP isteklerini 80 numaral\u0131 porttan dinlemesini sa\u011flar.<\/li>\n<li><code>root \/var\/www\/html\/your_react_app;<\/code>: React uygulaman\u0131z\u0131n statik dosyalar\u0131n\u0131n bulundu\u011fu dizini belirtir.<\/li>\n<li><code>index index.html index.htm;<\/code>: Varsay\u0131lan olarak aranacak dizin dosyalar\u0131n\u0131 belirtir.<\/li>\n<li><code>server_name yourdomain.com www.yourdomain.com;<\/code>: Bu server block’unun hangi alan adlar\u0131 i\u00e7in ge\u00e7erli oldu\u011funu tan\u0131mlar.<\/li>\n<li><code>location \/ { try_files $uri $uri\/ \/index.html; }<\/code>: Bu k\u0131s\u0131m, React SPA’lar\u0131 i\u00e7in \u00e7ok \u00f6nemlidir. Gelen herhangi bir iste\u011fi \u00f6nce dosya olarak (<code>$uri<\/code>), sonra dizin olarak (<code>$uri\/<\/code>) arar. E\u011fer bulamazsa, iste\u011fi <code>\/index.html<\/code>‘e y\u00f6nlendirir. Bu sayede React Router, URL’yi i\u015fleyebilir ve do\u011fru bile\u015feni g\u00f6sterebilir.<\/li>\n<\/ul>\n<p>Dosyay\u0131 kaydedin (Ctrl+O, Enter, Ctrl+X). \u015eimdi bu yap\u0131land\u0131rma dosyas\u0131n\u0131 etkinle\u015ftirmek i\u00e7in bir sembolik ba\u011flant\u0131 olu\u015ftural\u0131m:<\/p>\n<pre><code>\nsudo ln -s \/etc\/nginx\/sites-available\/your_react_app \/etc\/nginx\/sites-enabled\/\n <\/code><\/pre>\n<p>Nginx yap\u0131land\u0131rman\u0131zda herhangi bir s\u00f6zdizimi hatas\u0131 olup olmad\u0131\u011f\u0131n\u0131 kontrol edin:<\/p>\n<pre><code>\nsudo nginx -t\n <\/code><\/pre>\n<p>E\u011fer <code>syntax is ok<\/code> ve <code>test is successful<\/code> mesajlar\u0131n\u0131 g\u00f6r\u00fcrseniz, her \u015fey yolunda demektir. Son olarak, Nginx’i yeniden ba\u015flatarak yeni yap\u0131land\u0131rmay\u0131 uygulay\u0131n:<\/p>\n<pre><code>\nsudo systemctl restart nginx\n <\/code><\/pre>\n<p>Art\u0131k taray\u0131c\u0131n\u0131zdan alan ad\u0131n\u0131z\u0131 (veya sunucu IP adresinizi) ziyaret etti\u011finizde React uygulaman\u0131z\u0131n \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6rmelisiniz. Bu, React uygulaman\u0131z\u0131n Nginx \u00fczerinde ba\u015far\u0131yla da\u011f\u0131t\u0131ld\u0131\u011f\u0131 anlam\u0131na gelir!<\/p>\n<h2>Geli\u015fmi\u015f Nginx Ayarlar\u0131 ve Performans Optimizasyonlar\u0131<\/h2>\n<p>React uygulaman\u0131z\u0131 Nginx ile ba\u015far\u0131yla da\u011f\u0131tt\u0131n\u0131z, tebrikler! Ancak, bir ad\u0131m daha ileri giderek uygulaman\u0131z\u0131n performans\u0131n\u0131 ve g\u00fcvenli\u011fini art\u0131rabilirsiniz. Bu b\u00f6l\u00fcm, deneyimli kullan\u0131c\u0131lar i\u00e7in baz\u0131 ipu\u00e7lar\u0131 ve p\u00fcf noktalar\u0131 sunarak, da\u011f\u0131t\u0131m\u0131n\u0131z\u0131 daha sa\u011flam hale getirecek.<\/p>\n<h3>HTTPS (SSL\/TLS) Kurulumu ile G\u00fcvenli\u011fi Art\u0131rma<\/h3>\n<p>Modern web uygulamalar\u0131 i\u00e7in HTTPS kullan\u0131m\u0131 art\u0131k bir zorunluluktur. HTTPS, kullan\u0131c\u0131lar\u0131n\u0131zla sunucunuz aras\u0131ndaki ileti\u015fimi \u015fifreleyerek veri g\u00fcvenli\u011fini sa\u011flar. Let’s Encrypt, \u00fccretsiz SSL\/TLS sertifikalar\u0131 sa\u011flayan pop\u00fcler bir hizmettir ve Certbot arac\u0131yla kolayca kurulabilir.<\/p>\n<p>\u00d6ncelikle Certbot’u kurun:<\/p>\n<pre><code>\nsudo snap install core; sudo snap refresh core\nsudo snap install --classic certbot\nsudo ln -s \/snap\/bin\/certbot \/usr\/bin\/certbot\n <\/code><\/pre>\n<p>Ard\u0131ndan, Nginx i\u00e7in SSL sertifikas\u0131 al\u0131n ve yap\u0131land\u0131r\u0131n:<\/p>\n<pre><code>\nsudo certbot --nginx -d yourdomain.com -d www.yourdomain.com\n <\/code><\/pre>\n<p>Certbot, Nginx yap\u0131land\u0131rma dosyan\u0131z\u0131 otomatik olarak g\u00fcncelleyecek, sertifikalar\u0131 alacak ve HTTPS’yi etkinle\u015ftirecektir. Ayr\u0131ca, sertifikalar\u0131n otomatik yenilenmesi i\u00e7in gerekli cron i\u015fini de kuracakt\u0131r. Bu ad\u0131mlardan sonra, UFW g\u00fcvenlik duvar\u0131nda HTTPS portunu a\u00e7may\u0131 unutmay\u0131n:<\/p>\n<pre><code>\nsudo ufw allow 'Nginx HTTPS'\nsudo ufw reload\n <\/code><\/pre>\n<p>Art\u0131k uygulaman\u0131za <code>https:\/\/yourdomain.com<\/code> \u00fczerinden g\u00fcvenli bir \u015fekilde eri\u015febilirsiniz.<\/p>\n<h3>Taray\u0131c\u0131 \u00d6nbellekleme (Browser Caching)<\/h3>\n<p>Nginx, statik dosyalar\u0131n\u0131z i\u00e7in taray\u0131c\u0131 \u00f6nbelleklemesini yap\u0131land\u0131rarak performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir. Bu sayede, kullan\u0131c\u0131lar sitenizi tekrar ziyaret etti\u011finde, taray\u0131c\u0131 daha \u00f6nce indirdi\u011fi dosyalar\u0131 kullan\u0131r ve y\u00fckleme s\u00fcresi k\u0131sal\u0131r. Nginx yap\u0131land\u0131rma dosyan\u0131za (<code>\/etc\/nginx\/sites-available\/your_react_app<\/code>) a\u015fa\u011f\u0131daki <code>location<\/code> blo\u011funu ekleyin:<\/p>\n<pre><code>\nserver {\n # ... mevcut ayarlar ...\n\n location ~* \\.(js|css|png|jpg|jpeg|gif|ico|woff|woff2|ttf|svg|eot)$ {\n expires 30d; # 30 g\u00fcn boyunca \u00f6nbellekte tut\n add_header Cache-Control \"public, no-transform\";\n }\n\n # ... di\u011fer location bloklar\u0131 ...\n}\n <\/code><\/pre>\n<p>Bu yap\u0131land\u0131rma, belirli dosya t\u00fcrlerinin (JavaScript, CSS, resimler vb.) taray\u0131c\u0131 taraf\u0131ndan 30 g\u00fcn boyunca \u00f6nbelle\u011fe al\u0131nmas\u0131n\u0131 sa\u011flar. Bu, \u00f6zellikle React uygulaman\u0131z\u0131n statik varl\u0131klar\u0131 i\u00e7in b\u00fcy\u00fck bir performans kazanc\u0131 demektir.<\/p>\n<h3>Gzip S\u0131k\u0131\u015ft\u0131rma<\/h3>\n<p>Nginx, sunulan dosyalar\u0131 s\u0131k\u0131\u015ft\u0131rarak bant geni\u015fli\u011fi kullan\u0131m\u0131n\u0131 azaltabilir ve y\u00fckleme s\u00fcrelerini h\u0131zland\u0131rabilir. Bu, \u00f6zellikle b\u00fcy\u00fck JavaScript ve CSS dosyalar\u0131 i\u00e7in etkilidir. Nginx’in ana yap\u0131land\u0131rma dosyas\u0131na (genellikle <code>\/etc\/nginx\/nginx.conf<\/code> veya <code>\/etc\/nginx\/conf.d\/gzip.conf<\/code> gibi \u00f6zel bir dosyaya) a\u015fa\u011f\u0131daki ayarlar\u0131 ekleyebilirsiniz:<\/p>\n<pre><code>\n# \/etc\/nginx\/nginx.conf i\u00e7inde http blo\u011funa ekleyin\ngzip on;\ngzip_vary on;\ngzip_proxied any;\ngzip_comp_level 6;\ngzip_buffers 16 8k;\ngzip_http_version 1.1;\ngzip_types text\/plain text\/css application\/json application\/javascript text\/xml application\/xml application\/xml+rss text\/javascript;\n <\/code><\/pre>\n<p>Bu ayarlar, belirtilen dosya t\u00fcrlerini s\u0131k\u0131\u015ft\u0131rarak sunar. <code>gzip_comp_level<\/code> de\u011feri 1’den 9’a kadar ayarlanabilir; daha y\u00fcksek de\u011ferler daha iyi s\u0131k\u0131\u015ft\u0131rma ancak daha fazla CPU kullan\u0131m\u0131 anlam\u0131na gelir. Genellikle 5 veya 6 iyi bir denge sa\u011flar.<\/p>\n<h3>Ters Proxy Olarak Nginx (Backend API ile Birlikte)<\/h3>\n<p>E\u011fer React uygulaman\u0131z\u0131n arkas\u0131nda bir Node.js, Python veya ba\u015fka bir dilde yaz\u0131lm\u0131\u015f bir API’niz varsa, Nginx’i bu API’ye ters proxy olarak y\u00f6nlendirebilirsiniz. Bu, hem React uygulaman\u0131z\u0131 hem de API’nizi ayn\u0131 domain alt\u0131nda farkl\u0131 yollarla sunman\u0131z\u0131 sa\u011flar.<\/p>\n<pre><code>\nserver {\n # ... mevcut React ayarlar\u0131 ...\n\n location \/api\/ { # API isteklerini y\u00f6nlendir\n proxy_pass http:\/\/localhost:5000; # API'nizin \u00e7al\u0131\u015ft\u0131\u011f\u0131 adres ve port\n proxy_http_version 1.1;\n proxy_set_header Upgrade $http_upgrade;\n proxy_set_header Connection 'upgrade';\n proxy_set_header Host $host;\n proxy_cache_bypass $http_upgrade;\n }\n}\n <\/code><\/pre>\n<p>Bu yap\u0131land\u0131rma ile, <code>yourdomain.com\/api\/users<\/code> gibi istekler Nginx taraf\u0131ndan <code>http:\/\/localhost:5000\/users<\/code> adresine y\u00f6nlendirilir. Bu, frontend ve backend’i ayn\u0131 domain alt\u0131nda g\u00fcvenli ve d\u00fczenli bir \u015fekilde birle\u015ftirmenizi sa\u011flar.<\/p>\n<p>Bu geli\u015fmi\u015f ayarlar ve optimizasyonlar, React uygulaman\u0131z\u0131n sadece \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamakla kalmaz, ayn\u0131 zamanda kullan\u0131c\u0131lara daha h\u0131zl\u0131, daha g\u00fcvenli ve daha sorunsuz bir deneyim sunar. Unutmay\u0131n, her de\u011fi\u015fiklikten sonra Nginx yap\u0131land\u0131rmas\u0131n\u0131 test etmeyi (<code>sudo nginx -t<\/code>) ve yeniden ba\u015flatmay\u0131 (<code>sudo systemctl restart nginx<\/code>) al\u0131\u015fkanl\u0131k haline getirin.<\/p>\n<h2>Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n<p>Bu makalede, React uygulaman\u0131z\u0131 Nginx ve Ubuntu \u00fczerinde da\u011f\u0131tman\u0131n t\u00fcm temel ad\u0131mlar\u0131n\u0131 detayl\u0131 bir \u015fekilde ele ald\u0131k. Geli\u015ftirme ortam\u0131n\u0131zdan production ortam\u0131na ge\u00e7i\u015fin neden \u00f6nemli oldu\u011funu, temel kavramlar\u0131, React uygulaman\u0131z\u0131 nas\u0131l haz\u0131rlayaca\u011f\u0131n\u0131z\u0131, Ubuntu sunucunuzu nas\u0131l yap\u0131land\u0131raca\u011f\u0131n\u0131z\u0131 ve son olarak Nginx’i kurup uygulaman\u0131z\u0131 nas\u0131l canl\u0131ya alaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m \u00f6\u011frendiniz. Ayr\u0131ca, HTTPS ile g\u00fcvenli\u011fi art\u0131rma, taray\u0131c\u0131 \u00f6nbelleklemesi ve Gzip s\u0131k\u0131\u015ft\u0131rma gibi geli\u015fmi\u015f optimizasyon tekniklerini de inceledik. Bu s\u00fcre\u00e7, ilk ba\u015fta karma\u015f\u0131k gibi g\u00f6r\u00fcnse de, do\u011fru ad\u0131mlarla ve biraz pratikle kolayca \u00fcstesinden gelinebilecek bir da\u011f\u0131t\u0131m stratejisi sunar. Art\u0131k React projelerinizi g\u00fcvenle ve performansl\u0131 bir \u015fekilde d\u00fcnyaya a\u00e7abilirsiniz!<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n<dl>\n<dt>React uygulamam\u0131 da\u011f\u0131tmak i\u00e7in neden Nginx kullanmal\u0131y\u0131m?<\/dt>\n<dd>Nginx, y\u00fcksek performansl\u0131 statik dosya sunumu, d\u00fc\u015f\u00fck bellek t\u00fcketimi ve y\u00fcksek e\u015fzamanl\u0131 ba\u011flant\u0131 i\u015fleme yetene\u011fi sayesinde React gibi frontend uygulamalar\u0131 i\u00e7in idealdir. Ayr\u0131ca, ters proxy, y\u00fck dengeleme ve SSL sonland\u0131rma gibi geli\u015fmi\u015f \u00f6zellikler sunarak uygulaman\u0131z\u0131n g\u00fcvenli\u011fini ve \u00f6l\u00e7eklenebilirli\u011fini art\u0131r\u0131r.<\/dd>\n<dt>React uygulamas\u0131nda <code>build<\/code> klas\u00f6r\u00fc ne i\u015fe yarar?<\/dt>\n<dd><code>build<\/code> klas\u00f6r\u00fc, React uygulaman\u0131z\u0131n \u00fcretim ortam\u0131 i\u00e7in optimize edilmi\u015f, s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f ve taray\u0131c\u0131lar\u0131n do\u011frudan \u00e7al\u0131\u015ft\u0131rabilece\u011fi statik dosyalar\u0131n\u0131 (HTML, CSS, JavaScript, resimler vb.) i\u00e7erir. Bu dosyalar, uygulaman\u0131n performans\u0131n\u0131 art\u0131rmak i\u00e7in k\u00fc\u00e7\u00fclt\u00fclm\u00fc\u015f ve optimize edilmi\u015ftir.<\/dd>\n<dt>HTTPS kullanmak neden \u00f6nemlidir?<\/dt>\n<dd>HTTPS, kullan\u0131c\u0131lar\u0131n\u0131zla sunucunuz aras\u0131ndaki t\u00fcm ileti\u015fimi \u015fifreleyerek veri g\u00fcvenli\u011fini sa\u011flar. Bu, hassas bilgilerin (kullan\u0131c\u0131 adlar\u0131, \u015fifreler, kredi kart\u0131 bilgileri) k\u00f6t\u00fc niyetli ki\u015filer taraf\u0131ndan ele ge\u00e7irilmesini \u00f6nler. Ayr\u0131ca, modern taray\u0131c\u0131lar HTTPS kullanmayan siteleri “g\u00fcvenli de\u011fil” olarak i\u015faretler ve SEO s\u0131ralamalar\u0131nda da HTTPS sitelere \u00f6ncelik verir.<\/dd>\n<dt>Nginx yap\u0131land\u0131rmas\u0131nda <code>try_files $uri $uri\/ \/index.html;<\/code> ne anlama gelir?<\/dt>\n<dd>Bu Nginx komutu, React gibi tek sayfa uygulamalar\u0131 (SPA) i\u00e7in kritik \u00f6neme sahiptir. Gelen bir iste\u011fi \u00f6nce dosya olarak (<code>$uri<\/code>), sonra dizin olarak (<code>$uri\/<\/code>) arar. E\u011fer bu yollarda bir dosya veya dizin bulamazsa, iste\u011fi varsay\u0131lan olarak <code>\/index.html<\/code> dosyas\u0131na y\u00f6nlendirir. Bu, React Router’\u0131n URL’yi ele alarak uygulaman\u0131n i\u00e7indeki do\u011fru bile\u015feni g\u00f6stermesini sa\u011flar ve 404 hatalar\u0131n\u0131 \u00f6nler.<\/dd>\n<dt>Nginx yap\u0131land\u0131rma de\u011fi\u015fikliklerinden sonra ne yapmal\u0131y\u0131m?<\/dt>\n<dd>Herhangi bir Nginx yap\u0131land\u0131rma de\u011fi\u015fikli\u011fi yapt\u0131ktan sonra, \u00f6ncelikle yap\u0131land\u0131rma dosyas\u0131nda s\u00f6zdizimi hatas\u0131 olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek i\u00e7in <code>sudo nginx -t<\/code> komutunu \u00e7al\u0131\u015ft\u0131rmal\u0131s\u0131n\u0131z. E\u011fer bir hata yoksa, yeni yap\u0131land\u0131rman\u0131n etkinle\u015fmesi i\u00e7in Nginx servisini yeniden ba\u015flatmal\u0131s\u0131n\u0131z: <code>sudo systemctl restart nginx<\/code>.<\/dd>\n<\/dl>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"React Uygulamas\u0131n\u0131 Nginx ile Ubuntu’ya Nas\u0131l Da\u011f\u0131t\u0131rs\u0131n\u0131z? Modern web uygulamalar\u0131 geli\u015ftirmek heyecan verici bir s\u00fcre\u00e7tir, ancak bu uygulamalar\u0131…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1468],"tags":[],"class_list":{"0":"post-31168","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-ubuntu","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>React Uygulamas\u0131n\u0131 Nginx ile Ubuntu'ya Da\u011f\u0131tmak Neden \u00d6nemli?<\/title>\n<meta name=\"description\" content=\"Modern web uygulamalar\u0131 geli\u015ftirmek heyecan verici bir s\u00fcre\u00e7tir, ancak bu uygulamalar\u0131 kullan\u0131c\u0131lar\u0131n eri\u015fimine sunmak, yani da\u011f\u0131t\u0131m (deployment), bir\u00e7ok geli\u015ftirici i\u00e7in kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir. \u00d6zellikle React gibi pop\u00fcler bir frontend k\u00fct\u00fcphanesiyle geli\u015ftirilen uygulamalar\u0131n, h\u0131zl\u0131 ve g\u00fcvenilir bir \u015fekilde sunulmas\u0131 kritik \u00f6neme sahiptir. Bu makalede, React uygulaman\u0131z\u0131 g\u00fc\u00e7l\u00fc ve esnek bir web sunucusu olan Nginx ile Ubuntu i\u015fletim sistemi \u00fczerinde nas\u0131l da\u011f\u0131taca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m, ger\u00e7ek d\u00fcnya senaryolar\u0131yla ve pratik ipu\u00e7lar\u0131yla ele alaca\u011f\u0131z. Haz\u0131r m\u0131s\u0131n\u0131z? Gelin, bu s\u00fcreci birlikte basitle\u015ftirelim ve uygulaman\u0131z\u0131 canl\u0131ya alal\u0131m!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Uygulamas\u0131n\u0131 Nginx ile Ubuntu'ya Da\u011f\u0131tmak Neden \u00d6nemli?\" \/>\n<meta property=\"og:description\" content=\"Modern web uygulamalar\u0131 geli\u015ftirmek heyecan verici bir s\u00fcre\u00e7tir, ancak bu uygulamalar\u0131 kullan\u0131c\u0131lar\u0131n eri\u015fimine sunmak, yani da\u011f\u0131t\u0131m (deployment), bir\u00e7ok geli\u015ftirici i\u00e7in kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir. \u00d6zellikle React gibi pop\u00fcler bir frontend k\u00fct\u00fcphanesiyle geli\u015ftirilen uygulamalar\u0131n, h\u0131zl\u0131 ve g\u00fcvenilir bir \u015fekilde sunulmas\u0131 kritik \u00f6neme sahiptir. Bu makalede, React uygulaman\u0131z\u0131 g\u00fc\u00e7l\u00fc ve esnek bir web sunucusu olan Nginx ile Ubuntu i\u015fletim sistemi \u00fczerinde nas\u0131l da\u011f\u0131taca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m, ger\u00e7ek d\u00fcnya senaryolar\u0131yla ve pratik ipu\u00e7lar\u0131yla ele alaca\u011f\u0131z. Haz\u0131r m\u0131s\u0131n\u0131z? Gelin, bu s\u00fcreci birlikte basitle\u015ftirelim ve uygulaman\u0131z\u0131 canl\u0131ya alal\u0131m!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-06T13:24:34+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"23 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React Uygulamas\u0131n\u0131 Nginx ile Ubuntu’ya Da\u011f\u0131tmak Neden \u00d6nemli?\",\"datePublished\":\"2025-10-06T13:24:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/\"},\"wordCount\":3872,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Ubuntu\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/\",\"name\":\"React Uygulamas\u0131n\u0131 Nginx ile Ubuntu'ya Da\u011f\u0131tmak Neden \u00d6nemli?\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-06T13:24:34+00:00\",\"description\":\"Modern web uygulamalar\u0131 geli\u015ftirmek heyecan verici bir s\u00fcre\u00e7tir, ancak bu uygulamalar\u0131 kullan\u0131c\u0131lar\u0131n eri\u015fimine sunmak, yani da\u011f\u0131t\u0131m (deployment), bir\u00e7ok geli\u015ftirici i\u00e7in kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir. \u00d6zellikle React gibi pop\u00fcler bir frontend k\u00fct\u00fcphanesiyle geli\u015ftirilen uygulamalar\u0131n, h\u0131zl\u0131 ve g\u00fcvenilir bir \u015fekilde sunulmas\u0131 kritik \u00f6neme sahiptir. Bu makalede, React uygulaman\u0131z\u0131 g\u00fc\u00e7l\u00fc ve esnek bir web sunucusu olan Nginx ile Ubuntu i\u015fletim sistemi \u00fczerinde nas\u0131l da\u011f\u0131taca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m, ger\u00e7ek d\u00fcnya senaryolar\u0131yla ve pratik ipu\u00e7lar\u0131yla ele alaca\u011f\u0131z. Haz\u0131r m\u0131s\u0131n\u0131z? Gelin, bu s\u00fcreci birlikte basitle\u015ftirelim ve uygulaman\u0131z\u0131 canl\u0131ya alal\u0131m!\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Uygulamas\u0131n\u0131 Nginx ile Ubuntu’ya Da\u011f\u0131tmak Neden \u00d6nemli?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n","yoast_head_json":{"title":"React Uygulamas\u0131n\u0131 Nginx ile Ubuntu'ya Da\u011f\u0131tmak Neden \u00d6nemli?","description":"Modern web uygulamalar\u0131 geli\u015ftirmek heyecan verici bir s\u00fcre\u00e7tir, ancak bu uygulamalar\u0131 kullan\u0131c\u0131lar\u0131n eri\u015fimine sunmak, yani da\u011f\u0131t\u0131m (deployment), bir\u00e7ok geli\u015ftirici i\u00e7in kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir. \u00d6zellikle React gibi pop\u00fcler bir frontend k\u00fct\u00fcphanesiyle geli\u015ftirilen uygulamalar\u0131n, h\u0131zl\u0131 ve g\u00fcvenilir bir \u015fekilde sunulmas\u0131 kritik \u00f6neme sahiptir. Bu makalede, React uygulaman\u0131z\u0131 g\u00fc\u00e7l\u00fc ve esnek bir web sunucusu olan Nginx ile Ubuntu i\u015fletim sistemi \u00fczerinde nas\u0131l da\u011f\u0131taca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m, ger\u00e7ek d\u00fcnya senaryolar\u0131yla ve pratik ipu\u00e7lar\u0131yla ele alaca\u011f\u0131z. Haz\u0131r m\u0131s\u0131n\u0131z? Gelin, bu s\u00fcreci birlikte basitle\u015ftirelim ve uygulaman\u0131z\u0131 canl\u0131ya alal\u0131m!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/","og_locale":"tr_TR","og_type":"article","og_title":"React Uygulamas\u0131n\u0131 Nginx ile Ubuntu'ya Da\u011f\u0131tmak Neden \u00d6nemli?","og_description":"Modern web uygulamalar\u0131 geli\u015ftirmek heyecan verici bir s\u00fcre\u00e7tir, ancak bu uygulamalar\u0131 kullan\u0131c\u0131lar\u0131n eri\u015fimine sunmak, yani da\u011f\u0131t\u0131m (deployment), bir\u00e7ok geli\u015ftirici i\u00e7in kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir. \u00d6zellikle React gibi pop\u00fcler bir frontend k\u00fct\u00fcphanesiyle geli\u015ftirilen uygulamalar\u0131n, h\u0131zl\u0131 ve g\u00fcvenilir bir \u015fekilde sunulmas\u0131 kritik \u00f6neme sahiptir. Bu makalede, React uygulaman\u0131z\u0131 g\u00fc\u00e7l\u00fc ve esnek bir web sunucusu olan Nginx ile Ubuntu i\u015fletim sistemi \u00fczerinde nas\u0131l da\u011f\u0131taca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m, ger\u00e7ek d\u00fcnya senaryolar\u0131yla ve pratik ipu\u00e7lar\u0131yla ele alaca\u011f\u0131z. Haz\u0131r m\u0131s\u0131n\u0131z? Gelin, bu s\u00fcreci birlikte basitle\u015ftirelim ve uygulaman\u0131z\u0131 canl\u0131ya alal\u0131m!","og_url":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-06T13:24:34+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"23 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React Uygulamas\u0131n\u0131 Nginx ile Ubuntu’ya Da\u011f\u0131tmak Neden \u00d6nemli?","datePublished":"2025-10-06T13:24:34+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/"},"wordCount":3872,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Ubuntu"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/","url":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/","name":"React Uygulamas\u0131n\u0131 Nginx ile Ubuntu'ya Da\u011f\u0131tmak Neden \u00d6nemli?","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-06T13:24:34+00:00","description":"Modern web uygulamalar\u0131 geli\u015ftirmek heyecan verici bir s\u00fcre\u00e7tir, ancak bu uygulamalar\u0131 kullan\u0131c\u0131lar\u0131n eri\u015fimine sunmak, yani da\u011f\u0131t\u0131m (deployment), bir\u00e7ok geli\u015ftirici i\u00e7in kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir. \u00d6zellikle React gibi pop\u00fcler bir frontend k\u00fct\u00fcphanesiyle geli\u015ftirilen uygulamalar\u0131n, h\u0131zl\u0131 ve g\u00fcvenilir bir \u015fekilde sunulmas\u0131 kritik \u00f6neme sahiptir. Bu makalede, React uygulaman\u0131z\u0131 g\u00fc\u00e7l\u00fc ve esnek bir web sunucusu olan Nginx ile Ubuntu i\u015fletim sistemi \u00fczerinde nas\u0131l da\u011f\u0131taca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m, ger\u00e7ek d\u00fcnya senaryolar\u0131yla ve pratik ipu\u00e7lar\u0131yla ele alaca\u011f\u0131z. Haz\u0131r m\u0131s\u0131n\u0131z? Gelin, bu s\u00fcreci birlikte basitle\u015ftirelim ve uygulaman\u0131z\u0131 canl\u0131ya alal\u0131m!","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Uygulamas\u0131n\u0131 Nginx ile Ubuntu’ya Da\u011f\u0131tmak Neden \u00d6nemli?"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=31168"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31168\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=31168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=31168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=31168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":31168,"date":"2025-10-06T16:24:34","date_gmt":"2025-10-06T13:24:34","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/"},"modified":"2025-10-06T16:24:34","modified_gmt":"2025-10-06T13:24:34","slug":"react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-nginx-ile-ubuntuya-dagitmak-neden-onemli\/","title":{"rendered":"React Uygulamas\u0131n\u0131 Nginx ile Ubuntu’ya Da\u011f\u0131tmak Neden \u00d6nemli?"},"content":{"rendered":"