{"id":44003,"date":"2026-08-11T08:00:26","date_gmt":"2026-08-11T05:00:26","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=44003"},"modified":"2026-08-11T08:00:40","modified_gmt":"2026-08-11T05:00:40","slug":"react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi\/","title":{"rendered":"React Uygulamas\u0131n\u0131 DigitalOcean App Platform’a Da\u011f\u0131tma Rehberi"},"content":{"rendered":"

React Uygulamas\u0131n\u0131 DigitalOcean App Platform’a Da\u011f\u0131tma Rehberi<\/h2>\n

Modern web geli\u015ftirmenin vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelen React, bile\u015fen tabanl\u0131 mimarisi ve g\u00fc\u00e7l\u00fc ekosistemi ile geli\u015ftiricilere esnek ve \u00f6l\u00e7eklenebilir uygulamalar olu\u015fturma imkan\u0131 sunar. Ancak, bir React uygulamas\u0131n\u0131 geli\u015ftirmi\u015f olmak, onu canl\u0131ya almak ve geni\u015f kitlelere ula\u015ft\u0131rmak i\u00e7in yeterli de\u011fildir. Bu noktada, g\u00fcvenilir ve \u00f6l\u00e7eklenebilir bir bar\u0131nd\u0131rma \u00e7\u00f6z\u00fcm\u00fc devreye girer. DigitalOcean App Platform, geli\u015ftiricilerin uygulamalar\u0131n\u0131 h\u0131zla da\u011f\u0131tmalar\u0131na, y\u00f6netmelerine ve \u00f6l\u00e7eklendirmelerine olanak tan\u0131yan, kullan\u0131c\u0131 dostu bir bulut platformudur. Bu makalede, bir React uygulamas\u0131n\u0131 DigitalOcean App Platform’a nas\u0131l da\u011f\u0131tabilece\u011finizi ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n

DigitalOcean App Platform’a Genel Bak\u0131\u015f<\/h3>\n

DigitalOcean App Platform, kodunuzu do\u011frudan Git deponuzdan alarak otomatik olarak derleyen, da\u011f\u0131tan ve \u00f6l\u00e7eklendiren y\u00f6netilen bir hizmettir. Geli\u015ftiricilerin altyap\u0131 y\u00f6netimiyle u\u011fra\u015fmak yerine, kodlar\u0131na odaklanmalar\u0131n\u0131 sa\u011flar. App Platform, \u00e7e\u015fitli programlama dilleri ve \u00e7er\u00e7eveleri i\u00e7in yerle\u015fik deste\u011fe sahiptir ve Docker konteynerlerini de destekler. Bu, React gibi pop\u00fcler \u00f6n y\u00fcz (frontend) \u00e7er\u00e7eveleriyle olu\u015fturulmu\u015f uygulamalar\u0131n da\u011f\u0131t\u0131m\u0131 i\u00e7in ideal bir \u00e7\u00f6z\u00fcm haline getirir.<\/p>\n

App Platform’un sundu\u011fu temel avantajlar \u015funlard\u0131r:<\/p>\n

* Otomatik Da\u011f\u0131t\u0131m (CI\/CD):<\/strong> Git deponuzdaki de\u011fi\u015fiklikleri izler ve otomatik olarak yeni s\u00fcr\u00fcmleri da\u011f\u0131t\u0131r.
\n* Y\u00f6netilen Altyap\u0131:<\/strong> Sunucu y\u00f6netimi, yamalama, g\u00fcvenlik ve \u00f6l\u00e7eklendirme gibi altyap\u0131sal g\u00f6revleri DigitalOcean \u00fcstlenir.
\n* \u00d6l\u00e7eklenebilirlik:<\/strong> Trafik art\u0131\u015flar\u0131na g\u00f6re uygulaman\u0131z\u0131 otomatik veya manuel olarak \u00f6l\u00e7eklendirebilirsiniz.
\n* Veritaban\u0131 ve Bellek \u0130\u00e7i Veri Yap\u0131lar\u0131 Entegrasyonu:<\/strong> App Platform, PostgreSQL, Redis gibi pop\u00fcler veritaban\u0131 ve bellek i\u00e7i veri yap\u0131lar\u0131n\u0131 kolayca entegre etmenizi sa\u011flar.
\n* SSL Sertifikalar\u0131:<\/strong> Otomatik olarak \u00fccretsiz SSL sertifikalar\u0131 sa\u011flar ve y\u00f6netir.
\n* Kullan\u0131c\u0131 Dostu Aray\u00fcz:<\/strong> Karma\u015f\u0131k komut sat\u0131r\u0131 i\u015flemleri yerine web tabanl\u0131 bir aray\u00fcz sunar.<\/p>\n

\u00d6n Gereksinimler<\/h3>\n

DigitalOcean App Platform’a bir React uygulamas\u0131n\u0131 da\u011f\u0131tmadan \u00f6nce a\u015fa\u011f\u0131daki \u00f6n gereksinimlere sahip olman\u0131z gerekir:<\/p>\n

1. DigitalOcean Hesab\u0131:<\/strong> Hen\u00fcz bir hesab\u0131n\u0131z yoksa, [https:\/\/www.digitalocean.com\/](https:\/\/www.digitalocean.com\/) adresinden \u00fccretsiz bir hesap olu\u015fturabilirsiniz.
\n2. Git Deposu:<\/strong> React uygulaman\u0131z\u0131n kaynak kodunun bulundu\u011fu bir Git deposu (GitHub, GitLab, Bitbucket vb.).
\n3. React Uygulamas\u0131:<\/strong> Da\u011f\u0131tmak istedi\u011finiz, \u00e7al\u0131\u015f\u0131r durumda bir React uygulamas\u0131. Uygulaman\u0131z\u0131n bir package.json<\/code> dosyas\u0131na sahip olmas\u0131 ve build i\u015flemini desteklemesi \u00f6nemlidir.
\n4. Node.js ve npm\/Yarn:<\/strong> Lokal ortam\u0131n\u0131zda Node.js ve paket y\u00f6neticilerinden (npm veya Yarn) birine sahip olman\u0131z, uygulaman\u0131z\u0131 test etmek ve build etmek i\u00e7in faydal\u0131 olacakt\u0131r.<\/p>\n

React Uygulamas\u0131n\u0131 Haz\u0131rlama<\/h3>\n

DigitalOcean App Platform’a da\u011f\u0131t\u0131m yapmadan \u00f6nce React uygulaman\u0131z\u0131n baz\u0131 temel yap\u0131land\u0131rmalara sahip oldu\u011fundan emin olmal\u0131s\u0131n\u0131z.<\/p>\n

1. Build Komutunu Yap\u0131land\u0131rma<\/h4>\n

React uygulamalar\u0131 genellikle create-react-app<\/code> gibi ara\u00e7larla olu\u015fturulur ve bu ara\u00e7lar varsay\u0131lan olarak bir build komutu i\u00e7erir. package.json<\/code> dosyan\u0131zda scripts<\/code> b\u00f6l\u00fcm\u00fcnde build<\/code> anahtar\u0131na kar\u015f\u0131l\u0131k gelen komutun do\u011fru oldu\u011fundan emin olun. Genellikle bu komut \u015f\u00f6yledir:<\/p>\n

"scripts": {\n  "start": "react-scripts start",\n  "build": "react-scripts build",\n  "test": "react-scripts test",\n  "eject": "react-scripts eject"\n}<\/code><\/pre>\n
npm run build<\/code> veya yarn build<\/code> komutu \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda, uygulaman\u0131z\u0131n statik dosyalar\u0131n\u0131 (HTML, CSS, JavaScript) build<\/code> klas\u00f6r\u00fcne olu\u015fturacakt\u0131r. App Platform bu klas\u00f6r\u00fc kullanarak uygulaman\u0131z\u0131 sunacakt\u0131r.<\/p>\n
2. Statik Dosyalar\u0131n Sunulmas\u0131<\/h4>\n
React uygulamalar\u0131 tek sayfa uygulamalar\u0131 (SPA) oldu\u011fu i\u00e7in, sunucu taraf\u0131nda do\u011fru \u015fekilde y\u00f6nlendirilmesi gerekir. E\u011fer uygulaman\u0131z\u0131 bir Node.js sunucusu (\u00f6rne\u011fin Express.js) ile sunuyorsan\u0131z, bu y\u00f6nlendirmeyi sunucu taraf\u0131nda yapman\u0131z gerekir. Ancak, DigitalOcean App Platform, statik siteleri do\u011frudan sunabilme yetene\u011fine sahiptir.<\/p>\n
E\u011fer uygulaman\u0131z yaln\u0131zca statik dosyalar olarak da\u011f\u0131t\u0131lacaksa, herhangi bir ek sunucu yap\u0131land\u0131rmas\u0131na gerek yoktur. App Platform, build<\/code> klas\u00f6r\u00fcndeki dosyalar\u0131 otomatik olarak alg\u0131lar ve sunar.<\/p>\n
E\u011fer uygulaman\u0131z bir Node.js arka ucu ile birlikte geliyorsa veya \u00f6zel bir sunucu yap\u0131land\u0131rmas\u0131 gerekiyorsa, Procfile<\/code> kullanman\u0131z gerekebilir.<\/p>\n
3. Procfile (\u0130ste\u011fe Ba\u011fl\u0131 ama \u00d6nemli)<\/em><\/h4>\n
E\u011fer uygulaman\u0131z bir Node.js sunucusu ile \u00e7al\u0131\u015facaksa veya App Platform’un uygulaman\u0131z\u0131 nas\u0131l ba\u015flataca\u011f\u0131n\u0131 belirtmeniz gerekiyorsa, projenizin k\u00f6k dizinine Procfile<\/code> ad\u0131nda bir dosya eklemelisiniz. Bu dosya, uygulaman\u0131z\u0131n hangi komutla \u00e7al\u0131\u015ft\u0131r\u0131laca\u011f\u0131n\u0131 DigitalOcean’a bildirir.<\/p>\n
\u00d6rne\u011fin, Express.js tabanl\u0131 bir Node.js uygulaman\u0131z varsa ve ana dosyan\u0131z server.js<\/code> ise, Procfile<\/code> \u015f\u00f6yle g\u00f6r\u00fcnebilir:<\/p>\n
web: node server.js<\/code><\/pre>\n
E\u011fer create-react-app<\/code> ile olu\u015fturulmu\u015f bir uygulamay\u0131 statik olarak de\u011fil de bir Node.js sunucusu ile sunmak istiyorsan\u0131z, package.json<\/code>‘da start<\/code> script’ini kullanabilirsiniz:<\/p>\n
"scripts": {\n  "start": "node server.js", \/\/ Veya ba\u015fka bir ba\u015flang\u0131\u00e7 komutu\n  "build": "react-scripts build"\n}<\/code><\/pre>\n
Ve Procfile<\/code> \u015f\u00f6yle olur:<\/p>\n
web: npm start<\/code><\/pre>\n
Veya Yarn kullan\u0131yorsan\u0131z:<\/p>\n
web: yarn start<\/code><\/pre>\n
Procfile<\/code>‘\u0131 olu\u015fturduktan sonra, bu dosyay\u0131 da Git deponuza commit etmeyi unutmay\u0131n.<\/p>\n
4. Ortam De\u011fi\u015fkenleri (Environment Variables)<\/em><\/h4>\n
Uygulaman\u0131z\u0131n hassas bilgileri (API anahtarlar\u0131, veritaban\u0131 kimlik bilgileri vb.) veya yap\u0131land\u0131rma ayarlar\u0131 i\u00e7in ortam de\u011fi\u015fkenleri kullanman\u0131z \u00f6nemlidir. Bu de\u011fi\u015fkenleri do\u011frudan kodunuza g\u00f6mmek yerine, DigitalOcean App Platform \u00fczerinden tan\u0131mlayabilirsiniz. Bu, g\u00fcvenli\u011fi art\u0131r\u0131r ve farkl\u0131 ortamlar (geli\u015ftirme, \u00fcretim) i\u00e7in kolayca yap\u0131land\u0131rma yapman\u0131z\u0131 sa\u011flar.<\/p>\n
DigitalOcean App Platform’a Da\u011f\u0131t\u0131m Ad\u0131mlar\u0131<\/h3>\n
Art\u0131k React uygulaman\u0131z haz\u0131r oldu\u011funa g\u00f6re, onu DigitalOcean App Platform’a da\u011f\u0131tma ad\u0131mlar\u0131na ge\u00e7ebiliriz.<\/p>\n
Ad\u0131m 1: DigitalOcean Hesab\u0131n\u0131za Giri\u015f Yap\u0131n ve Yeni Bir Uygulama Olu\u015fturun<\/h4>\n
1.  DigitalOcean kontrol panelinize giri\u015f yap\u0131n.
\n2.  Sol men\u00fcden “Apps” se\u00e7ene\u011fine t\u0131klay\u0131n.
\n3.  “Create App” d\u00fc\u011fmesine t\u0131klay\u0131n.<\/p>\n
Ad\u0131m 2: Kaynak Kod Deponuzu Ba\u011flay\u0131n<\/h4>\n
DigitalOcean sizden uygulaman\u0131z\u0131n kaynak kodunu nereden \u00e7ekece\u011fini belirtmenizi isteyecektir.<\/p>\n
1.  GitHub, GitLab veya Bitbucket gibi Git sa\u011flay\u0131c\u0131n\u0131z\u0131 se\u00e7in.
\n2.  Hesab\u0131n\u0131z\u0131 DigitalOcean ile yetkilendirin.
\n3.  Da\u011f\u0131tmak istedi\u011finiz React uygulamas\u0131n\u0131n bulundu\u011fu depoyu se\u00e7in.
\n4.  Deponuzda birden fazla branch varsa, da\u011f\u0131tmak istedi\u011finiz branch’i se\u00e7in. Genellikle main<\/code> veya master<\/code> branch’i kullan\u0131l\u0131r.
\n5.  “Next” d\u00fc\u011fmesine t\u0131klay\u0131n.<\/p>\n
Ad\u0131m 3: Yap\u0131land\u0131rma (Build and Deploy)<\/em><\/h4>\n
Bu ad\u0131mda DigitalOcean, deponuzdaki kodu analiz edecek ve uygulaman\u0131z\u0131n t\u00fcr\u00fcn\u00fc alg\u0131layacakt\u0131r.<\/p>\n
*   Detect automatically:<\/strong> DigitalOcean genellikle uygulaman\u0131z\u0131 otomatik olarak alg\u0131lar. React uygulamalar\u0131 i\u00e7in genellikle bir “Frontend” veya “Static Site” t\u00fcr\u00fc se\u00e7ene\u011fi sunulur. E\u011fer Node.js sunucusu kullan\u0131yorsan\u0131z, “Web Service” olarak alg\u0131lanabilir.
\n*   Build Command:<\/strong> E\u011fer otomatik alg\u0131lama do\u011fru de\u011filse veya \u00f6zel bir build komutu kullan\u0131yorsan\u0131z, buraya npm run build<\/code> veya yarn build<\/code> gibi komutu girebilirsiniz.
\n*   Output Directory:<\/strong> Build i\u015flemi sonucunda olu\u015fan statik dosyalar\u0131n bulundu\u011fu dizini belirtin. Genellikle build<\/code> klas\u00f6r\u00fcd\u00fcr.
\n*   Run Command:<\/strong> E\u011fer uygulaman\u0131z bir Node.js sunucusu ile \u00e7al\u0131\u015facaksa, Procfile<\/code>‘da belirtti\u011finiz komut burada otomatik olarak doldurulacakt\u0131r. E\u011fer Procfile<\/code> kullanm\u0131yorsan\u0131z, uygulaman\u0131z\u0131 ba\u015flatacak komutu (\u00f6rne\u011fin npm start<\/code>) buraya girebilirsiniz.
\n*   Environment Variables:<\/strong> Uygulaman\u0131z\u0131n gerektirdi\u011fi ortam de\u011fi\u015fkenlerini buradan ekleyebilirsiniz. “New Variable” d\u00fc\u011fmesine t\u0131klayarak de\u011fi\u015fken ad\u0131n\u0131 ve de\u011ferini girin.<\/p>\n
Herhangi bir de\u011fi\u015fiklik yapt\u0131ktan sonra “Next” d\u00fc\u011fmesine t\u0131klay\u0131n.<\/p>\n
Ad\u0131m 4: Plan ve \u00d6l\u00e7eklendirme Ayarlar\u0131<\/h4>\n
Bu ad\u0131mda, uygulaman\u0131z i\u00e7in bir plan se\u00e7meniz ve \u00f6l\u00e7eklendirme ayarlar\u0131n\u0131 yap\u0131land\u0131rman\u0131z istenir.<\/p>\n
*   Plan:<\/strong> DigitalOcean, \u00fccretsiz bir “Free” katman\u0131n\u0131n yan\u0131 s\u0131ra farkl\u0131 \u00f6zelliklere sahip \u00fccretli planlar sunar. Uygulaman\u0131z\u0131n ihtiya\u00e7lar\u0131na g\u00f6re bir plan se\u00e7in. \u00dccretsiz katman, k\u00fc\u00e7\u00fck projeler ve denemeler i\u00e7in yeterli olabilir.
\n*   Auto-scaling:<\/strong> Uygulaman\u0131z\u0131n trafi\u011fine g\u00f6re otomatik olarak \u00f6l\u00e7eklenmesini veya manuel olarak \u00f6l\u00e7eklendirme ayarlar\u0131n\u0131 buradan yapabilirsiniz.
\n*   Database (\u0130ste\u011fe Ba\u011fl\u0131):<\/strong> E\u011fer uygulaman\u0131z bir veritaban\u0131 gerektiriyorsa, bu ad\u0131mda bir PostgreSQL veya Redis veritaban\u0131 ekleyebilirsiniz. “Add Database” d\u00fc\u011fmesine t\u0131klayarak veritaban\u0131 t\u00fcr\u00fcn\u00fc ve plan\u0131n\u0131 se\u00e7in.<\/p>\n
Ayarlar\u0131n\u0131z\u0131 g\u00f6zden ge\u00e7irdikten sonra “Next” d\u00fc\u011fmesine t\u0131klay\u0131n.<\/p>\n
Ad\u0131m 5: G\u00f6zden Ge\u00e7irme ve Da\u011f\u0131tma<\/h4>\n
Son ad\u0131mda, yapt\u0131\u011f\u0131n\u0131z t\u00fcm yap\u0131land\u0131rmalar\u0131n bir \u00f6zetini g\u00f6receksiniz. Her \u015fey do\u011fruysa, “Create Resources” d\u00fc\u011fmesine t\u0131klayarak uygulaman\u0131z\u0131 da\u011f\u0131tmaya ba\u015flayabilirsiniz.<\/p>\n
DigitalOcean, deponuzdaki kodu \u00e7ekecek, build i\u015flemini ger\u00e7ekle\u015ftirecek ve uygulaman\u0131z\u0131 canl\u0131ya alacakt\u0131r. Bu i\u015flem birka\u00e7 dakika s\u00fcrebilir.<\/p>\n
Da\u011f\u0131t\u0131m tamamland\u0131ktan sonra, uygulaman\u0131z\u0131n canl\u0131 URL’sini g\u00f6receksiniz. Bu URL’ye t\u0131klayarak uygulaman\u0131z\u0131 ziyaret edebilirsiniz.<\/p>\n
CI\/CD (S\u00fcrekli Entegrasyon \/ S\u00fcrekli Da\u011f\u0131t\u0131m) Ayarlar\u0131<\/h3>\n
DigitalOcean App Platform’un en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri otomatik CI\/CD ak\u0131\u015f\u0131d\u0131r. Deponuzdaki belirli bir branch’e her yeni commit g\u00f6nderdi\u011finizde, App Platform bu de\u011fi\u015fikli\u011fi alg\u0131lar, uygulaman\u0131z\u0131 yeniden build eder ve canl\u0131ya da\u011f\u0131t\u0131r.<\/p>\n
Bu \u00f6zelli\u011fi etkinle\u015ftirmek i\u00e7in, uygulaman\u0131z\u0131 ilk olu\u015ftururken deponuzu ba\u011flad\u0131\u011f\u0131n\u0131zda zaten yap\u0131lm\u0131\u015f olmal\u0131d\u0131r. E\u011fer de\u011filse, uygulaman\u0131z\u0131n ayarlar\u0131ndan “Deployments” sekmesine giderek CI\/CD ayarlar\u0131n\u0131 yap\u0131land\u0131rabilirsiniz.<\/p>\n
*   Branch:<\/strong> Hangi branch’teki de\u011fi\u015fikliklerin otomatik olarak da\u011f\u0131t\u0131laca\u011f\u0131n\u0131 belirtin.
\n*   Build on push:<\/strong> Bu se\u00e7ene\u011fi etkinle\u015ftirerek her commit’te otomatik da\u011f\u0131t\u0131m\u0131 sa\u011flay\u0131n.<\/p>\n
Bu ayarlar sayesinde, her geli\u015ftirdi\u011finiz \u00f6zelli\u011fi veya hata d\u00fczeltmesini h\u0131zla canl\u0131ya alabilirsiniz.<\/p>\n
Ortam De\u011fi\u015fkenleri Y\u00f6netimi<\/h3>\n
Uygulaman\u0131z\u0131n g\u00fcvenli\u011fi ve esnekli\u011fi i\u00e7in ortam de\u011fi\u015fkenlerini do\u011fru y\u00f6netmek kritiktir. DigitalOcean App Platform, bu konuda size yard\u0131mc\u0131 olur.<\/p>\n
1.  Da\u011f\u0131tt\u0131\u011f\u0131n\u0131z uygulaman\u0131n kontrol paneline gidin.
\n2.  “Settings” sekmesine t\u0131klay\u0131n.
\n3.  “Environment Variables” b\u00f6l\u00fcm\u00fcne gidin.
\n4.  Burada mevcut ortam de\u011fi\u015fkenlerini g\u00f6rebilir, yeni de\u011fi\u015fkenler ekleyebilir, mevcut de\u011fi\u015fkenleri d\u00fczenleyebilir veya silebilirsiniz.<\/p>\n
Ortam de\u011fi\u015fkenleri, uygulaman\u0131z\u0131n farkl\u0131 ortamlar i\u00e7in (geli\u015ftirme, test, \u00fcretim) farkl\u0131 ayarlara sahip olmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, bir geli\u015ftirme ortam\u0131nda farkl\u0131 bir API anahtar\u0131 kullan\u0131rken, \u00fcretim ortam\u0131nda farkl\u0131 bir anahtar kullanabilirsiniz.<\/p>\n
Veritaban\u0131 Entegrasyonu<\/h3>\n
E\u011fer React uygulaman\u0131z bir veritaban\u0131na ihtiya\u00e7 duyuyorsa, DigitalOcean App Platform bunu kolayla\u015ft\u0131r\u0131r.<\/p>\n
1.  Uygulaman\u0131z\u0131 olu\u015ftururken veya daha sonra “Resources” sekmesinden bir veritaban\u0131 ekleyebilirsiniz.
\n2.  Desteklenen veritaban\u0131 t\u00fcrleri aras\u0131nda PostgreSQL, MySQL, Redis bulunur.
\n3.  Veritaban\u0131 se\u00e7imi yapt\u0131ktan sonra, DigitalOcean size veritaban\u0131 ba\u011flant\u0131 bilgilerini (host, port, kullan\u0131c\u0131 ad\u0131, \u015fifre, veritaban\u0131 ad\u0131) sa\u011flayacakt\u0131r.
\n4.  Bu bilgileri uygulaman\u0131z\u0131n ortam de\u011fi\u015fkenlerine ekleyerek veritaban\u0131n\u0131za eri\u015febilirsiniz.<\/p>\n
\u00d6rne\u011fin, PostgreSQL veritaban\u0131 i\u00e7in ortam de\u011fi\u015fkenleri \u015f\u00f6yle olabilir:<\/p>\n
*   POSTGRES_HOST<\/code>
\n*   POSTGRES_PORT<\/code>
\n*   POSTGRES_USER<\/code>
\n*   POSTGRES_PASSWORD<\/code>
\n*   POSTGRES_DB<\/code><\/p>\n
Uygulaman\u0131z\u0131n arka ucunda bu de\u011fi\u015fkenleri kullanarak veritaban\u0131 ba\u011flant\u0131s\u0131n\u0131 kurabilirsiniz.<\/p>\n
Sorun Giderme ve Loglar<\/h3>\n
Herhangi bir da\u011f\u0131t\u0131m sorununda veya uygulaman\u0131z\u0131n \u00e7al\u0131\u015fma zaman\u0131nda kar\u015f\u0131la\u015f\u0131lan hatalarda, DigitalOcean App Platform’un loglama yetenekleri \u00e7ok de\u011ferlidir.<\/p>\n
1.  Uygulaman\u0131z\u0131n kontrol paneline gidin.
\n2.  “Logs” sekmesine t\u0131klay\u0131n.
\n3.  Burada, uygulaman\u0131z\u0131n \u00e7\u0131kt\u0131s\u0131n\u0131, hatalar\u0131n\u0131 ve di\u011fer log mesajlar\u0131n\u0131 g\u00f6rebilirsiniz. Bu loglar, sorunun kayna\u011f\u0131n\u0131 tespit etmek ve \u00e7\u00f6zmek i\u00e7in kritik \u00f6neme sahiptir.
\n4.  Build s\u0131ras\u0131nda olu\u015fan hatalar\u0131 g\u00f6rmek i\u00e7in de “Deployments” sekmesindeki ilgili da\u011f\u0131t\u0131m\u0131n detaylar\u0131na bakabilirsiniz.<\/p>\n
Performans Optimizasyonu ve \u00d6l\u00e7eklendirme<\/h3>\n
Uygulaman\u0131z canl\u0131ya al\u0131nd\u0131ktan sonra, performans\u0131n\u0131 izlemek ve gerekti\u011finde \u00f6l\u00e7eklendirmek \u00f6nemlidir.<\/p>\n
*   \u00d6l\u00e7eklendirme:<\/strong> “Resources” sekmesinden veya da\u011f\u0131t\u0131m s\u0131ras\u0131nda belirledi\u011finiz \u00f6l\u00e7eklendirme ayarlar\u0131n\u0131 y\u00f6netebilirsiniz. Uygulaman\u0131z\u0131n trafi\u011fi artt\u0131\u011f\u0131nda, daha fazla kaynak (CPU, RAM) atayarak veya daha fazla \u00f6rnek (instance) \u00e7al\u0131\u015ft\u0131rarak \u00f6l\u00e7eklendirebilirsiniz.
\n*   Caching:<\/strong> React uygulamalar\u0131nda \u00f6nbellekleme (caching) performans\u0131n art\u0131r\u0131lmas\u0131nda \u00f6nemli bir rol oynar. CDN (Content Delivery Network) kullan\u0131m\u0131, statik dosyalar\u0131n\u0131z\u0131n daha h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar. DigitalOcean App Platform, varsay\u0131lan olarak CDN deste\u011fi sunar.
\n*   Kod Optimizasyonu:<\/strong> React kodunuzu optimize etmek (\u00f6rne\u011fin, React.memo<\/code>, useCallback<\/code>, useMemo<\/code> kullan\u0131m\u0131, code splitting) uygulaman\u0131z\u0131n daha h\u0131zl\u0131 y\u00fcklenmesini ve daha ak\u0131c\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n
Sonu\u00e7<\/h3>\n
DigitalOcean App Platform, React uygulamalar\u0131n\u0131 canl\u0131ya almak i\u00e7in g\u00fc\u00e7l\u00fc, esnek ve kullan\u0131c\u0131 dostu bir \u00e7\u00f6z\u00fcm sunar. Otomatik CI\/CD ak\u0131\u015f\u0131, y\u00f6netilen altyap\u0131 ve \u00f6l\u00e7eklenebilirlik \u00f6zellikleri sayesinde geli\u015ftiriciler, altyap\u0131 y\u00f6netimiyle u\u011fra\u015fmak yerine kodlar\u0131na odaklanabilirler. Bu rehberde, bir React uygulamas\u0131n\u0131 DigitalOcean App Platform’a da\u011f\u0131tmak i\u00e7in gereken ad\u0131mlar\u0131, \u00f6n gereksinimleri ve \u00f6nemli yap\u0131land\u0131rma noktalar\u0131n\u0131 detayl\u0131 bir \u015fekilde ele ald\u0131k. Bu ad\u0131mlar\u0131 takip ederek, React uygulaman\u0131z\u0131 h\u0131zla ve g\u00fcvenle canl\u0131ya alabilirsiniz.<\/p>\n
\u00d6rnek kod:<\/strong> github.com\/fatihsoysalcom\/digitalocean-app-platform-react-deploy<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"React Uygulamas\u0131n\u0131 DigitalOcean App Platform’a Da\u011f\u0131tma Rehberi Modern web geli\u015ftirmenin vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelen React, bile\u015fen tabanl\u0131 mimarisi ve g\u00fc\u00e7l\u00fc ekosistemi ile geli\u015ftiricilere esnek ve \u00f6l\u00e7eklenebilir uygulamalar olu\u015fturma imkan\u0131 sunar.","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":[128],"tags":[],"class_list":{"0":"post-44003","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nReact Uygulamas\u0131n\u0131 DigitalOcean App Platform'a Da\u011f\u0131tma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\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-digitalocean-app-platforma-dagitma-rehberi\/\" \/>\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 DigitalOcean App Platform'a Da\u011f\u0131tma Rehberi\" \/>\n<meta property=\"og:description\" content=\"React Uygulamas\u0131n\u0131 DigitalOcean App Platform'a Da\u011f\u0131tma Rehberi Modern web geli\u015ftirmenin vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelen React, bile\u015fen tabanl\u0131 mimarisi ve g\u00fc\u00e7l\u00fc ekosistemi ile geli\u015ftiricilere esnek ve \u00f6l\u00e7eklenebilir uygulamalar olu\u015fturma imkan\u0131 sunar.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-11T05:00:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-11T05:00:40+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=\"11 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-digitalocean-app-platforma-dagitma-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React Uygulamas\u0131n\u0131 DigitalOcean App Platform’a Da\u011f\u0131tma Rehberi\",\"datePublished\":\"2026-08-11T05:00:26+00:00\",\"dateModified\":\"2026-08-11T05:00:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi\/\"},\"wordCount\":2141,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"React\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi\/\",\"name\":\"React Uygulamas\u0131n\u0131 DigitalOcean App Platform'a Da\u011f\u0131tma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-08-11T05:00:26+00:00\",\"dateModified\":\"2026-08-11T05:00:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Uygulamas\u0131n\u0131 DigitalOcean App Platform’a Da\u011f\u0131tma Rehberi\"}]},{\"@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 SEO Premium plugin. -->","yoast_head_json":{"title":"React Uygulamas\u0131n\u0131 DigitalOcean App Platform'a Da\u011f\u0131tma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","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-digitalocean-app-platforma-dagitma-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"React Uygulamas\u0131n\u0131 DigitalOcean App Platform'a Da\u011f\u0131tma Rehberi","og_description":"React Uygulamas\u0131n\u0131 DigitalOcean App Platform'a Da\u011f\u0131tma Rehberi Modern web geli\u015ftirmenin vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelen React, bile\u015fen tabanl\u0131 mimarisi ve g\u00fc\u00e7l\u00fc ekosistemi ile geli\u015ftiricilere esnek ve \u00f6l\u00e7eklenebilir uygulamalar olu\u015fturma imkan\u0131 sunar.","og_url":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-08-11T05:00:26+00:00","article_modified_time":"2026-08-11T05:00:40+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"11 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React Uygulamas\u0131n\u0131 DigitalOcean App Platform’a Da\u011f\u0131tma Rehberi","datePublished":"2026-08-11T05:00:26+00:00","dateModified":"2026-08-11T05:00:40+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi\/"},"wordCount":2141,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["React"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi\/","name":"React Uygulamas\u0131n\u0131 DigitalOcean App Platform'a Da\u011f\u0131tma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-08-11T05:00:26+00:00","dateModified":"2026-08-11T05:00:40+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamasini-digitalocean-app-platforma-dagitma-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Uygulamas\u0131n\u0131 DigitalOcean App Platform’a Da\u011f\u0131tma Rehberi"}]},{"@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\/44003","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=44003"}],"version-history":[{"count":2,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/44003\/revisions"}],"predecessor-version":[{"id":44005,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/44003\/revisions\/44005"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=44003"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=44003"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=44003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}