{"id":36209,"date":"2025-12-10T12:40:44","date_gmt":"2025-12-10T09:40:44","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=36209"},"modified":"2025-12-10T12:40:44","modified_gmt":"2025-12-10T09:40:44","slug":"react-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/","title":{"rendered":"React Uygulaman\u0131z\u0131 Konteyner Kay\u0131t Defteri Kullanarak Da\u011f\u0131tma Rehberi"},"content":{"rendered":"

<\/p>\n

React Uygulaman\u0131z\u0131 Konteyner Kay\u0131t Defteri Kullanarak Da\u011f\u0131tma Rehberi<\/h2>\n

Modern web geli\u015ftirme d\u00fcnyas\u0131nda, uygulamalar\u0131n tutarl\u0131, ta\u015f\u0131nabilir ve \u00f6l\u00e7eklenebilir bir \u015fekilde da\u011f\u0131t\u0131lmas\u0131 kritik bir \u00f6neme sahiptir. React gibi pop\u00fcler bir \u00f6n y\u00fcz k\u00fct\u00fcphanesi ile geli\u015ftirilen uygulamalar da bu gereksinimlerden muaf de\u011fildir. Geli\u015ftirme ortam\u0131n\u0131zda sorunsuz \u00e7al\u0131\u015fan bir uygulaman\u0131n, \u00fcretim ortam\u0131nda da ayn\u0131 \u015fekilde \u00e7al\u0131\u015faca\u011f\u0131n\u0131 garanti etmek, konteynerle\u015ftirme teknolojileri sayesinde \u00e7ok daha kolay hale gelmi\u015ftir. Bu kapsaml\u0131 rehberde, React uygulaman\u0131z\u0131 Docker kullanarak nas\u0131l konteynerize edece\u011finizi, bir konteyner kay\u0131t defterine (Container Registry) nas\u0131l y\u00fckleyece\u011finizi ve son olarak bu kay\u0131t defterinden nas\u0131l da\u011f\u0131taca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n

Giri\u015f: Neden Konteynerler ve Kay\u0131t Defterleri?<\/h3>\n

React, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan a\u00e7\u0131k kaynakl\u0131 bir JavaScript k\u00fct\u00fcphanesidir. Bile\u015fen tabanl\u0131 yap\u0131s\u0131 ve sanal DOM kullan\u0131m\u0131 sayesinde h\u0131zl\u0131 ve etkile\u015fimli tek sayfa uygulamalar\u0131 (SPA) geli\u015ftirmek i\u00e7in idealdir. Ancak, bir React uygulamas\u0131n\u0131n geli\u015ftirme s\u00fcrecinden \u00fcretim ortam\u0131na ge\u00e7i\u015fi, ba\u011f\u0131ml\u0131l\u0131k y\u00f6netimi, ortam yap\u0131land\u0131rmas\u0131 ve sunucu kurulumu gibi \u00e7e\u015fitli zorluklar\u0131 beraberinde getirebilir. \u0130\u015fte tam bu noktada konteynerle\u015ftirme ve konteyner kay\u0131t defterleri devreye girer.<\/p>\n

Konteynerle\u015ftirme Nedir?<\/strong>
\nKonteynerle\u015ftirme, bir uygulamay\u0131 ve onun t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 (kod, \u00e7al\u0131\u015fma zaman\u0131, sistem ara\u00e7lar\u0131, k\u00fct\u00fcphaneler ve ayarlar) izole edilmi\u015f bir ortamda paketleme s\u00fcrecidir. Bu paketlenmi\u015f birimlere “konteyner” denir. Docker, konteyner teknolojisinin en pop\u00fcler uygulay\u0131c\u0131lar\u0131ndan biridir. Bir konteyner, uygulaman\u0131z\u0131n farkl\u0131 ortamlarda (geli\u015ftirme, test, \u00fcretim) her zaman ayn\u0131 \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar, “benim makinemde \u00e7al\u0131\u015f\u0131yordu” sorununu ortadan kald\u0131r\u0131r.<\/p>\n

Konteyner Kay\u0131t Defteri Nedir?<\/strong>
\nBir konteyner kay\u0131t defteri (Container Registry), Docker imajlar\u0131n\u0131 depolamak ve y\u00f6netmek i\u00e7in kullan\u0131lan merkezi bir depodur. T\u0131pk\u0131 Git depolar\u0131n\u0131n kodlar\u0131 saklamas\u0131 gibi, konteyner kay\u0131t defterleri de konteyner imajlar\u0131n\u0131 saklar. Bu imajlar, farkl\u0131 sunuculara veya ortamlara kolayca \u00e7ekilebilir (pull) ve \u00e7al\u0131\u015ft\u0131r\u0131labilir. Docker Hub, AWS ECR, Google Cloud Artifact Registry ve Azure Container Registry gibi bir\u00e7ok pop\u00fcler kay\u0131t defteri hizmeti bulunmaktad\u0131r.<\/p>\n

React Uygulamalar\u0131 i\u00e7in Konteynerle\u015ftirmenin Faydalar\u0131:<\/strong>
\n* Tutarl\u0131l\u0131k:<\/strong> Uygulaman\u0131z her ortamda ayn\u0131 \u015fekilde \u00e7al\u0131\u015f\u0131r.
\n* Ta\u015f\u0131nabilirlik:<\/strong> Konteyner imaj\u0131, Docker’\u0131n kurulu oldu\u011fu herhangi bir sunucuda \u00e7al\u0131\u015fabilir.
\n* \u0130zolasyon:<\/strong> Uygulaman\u0131z\u0131n ba\u011f\u0131ml\u0131l\u0131klar\u0131, ana sistemden ve di\u011fer uygulamalardan izole edilir.
\n* \u00d6l\u00e7eklenebilirlik:<\/strong> Konteynerler, y\u00fck dengeleyiciler ve orkestrasyon ara\u00e7lar\u0131 (Kubernetes gibi) ile kolayca \u00f6l\u00e7eklendirilebilir.
\n* CI\/CD Entegrasyonu:<\/strong> Konteyner imajlar\u0131n\u0131n olu\u015fturulmas\u0131 ve kay\u0131t defterine y\u00fcklenmesi, s\u00fcrekli entegrasyon\/s\u00fcrekli da\u011f\u0131t\u0131m (CI\/CD) s\u00fcre\u00e7lerine kolayca entegre edilebilir.<\/p>\n

Bu rehberin sonunda, React uygulaman\u0131z\u0131 Dockerize etme, bir kay\u0131t defterine g\u00f6nderme ve bu kay\u0131t defterinden da\u011f\u0131tma konusunda sa\u011flam bir anlay\u0131\u015fa sahip olacaks\u0131n\u0131z.<\/p>\n

\u00d6n Gereksinimler<\/h3>\n

Bu rehberi takip edebilmek i\u00e7in a\u015fa\u011f\u0131daki ara\u00e7lar\u0131n sisteminizde kurulu olmas\u0131 gerekmektedir:
\n* Node.js ve npm\/yarn:<\/strong> React uygulamas\u0131 geli\u015ftirmek ve ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00f6netmek i\u00e7in gereklidir.
\n* Docker Desktop:<\/strong> Konteyner imajlar\u0131n\u0131 olu\u015fturmak, \u00e7al\u0131\u015ft\u0131rmak ve y\u00f6netmek i\u00e7in gereklidir.
\n* Bir React Uygulamas\u0131:<\/strong> Mevcut bir React uygulaman\u0131z yoksa, basit bir tane olu\u015fturaca\u011f\u0131z.
\n* Bir Konteyner Kay\u0131t Defteri Hesab\u0131:<\/strong> Bu rehberde Docker Hub’\u0131 kullanaca\u011f\u0131z, ancak prensipler di\u011fer kay\u0131t defterleri i\u00e7in de benzerdir. Docker Hub’da \u00fccretsiz bir hesap olu\u015fturman\u0131z gerekecektir.
\n* Temel Komut Sat\u0131r\u0131 Bilgisi:<\/strong> Terminal veya komut istemcisini kullanmaya a\u015fina olmal\u0131s\u0131n\u0131z.<\/p>\n

\u00d6rnek React Uygulamas\u0131 Olu\u015fturma<\/h3>\n

E\u011fer halihaz\u0131rda bir React uygulaman\u0131z yoksa, create-react-app<\/code> kullanarak h\u0131zl\u0131ca basit bir uygulama olu\u015ftural\u0131m:<\/p>\n

npx create-react-app my-react-app-container\ncd my-react-app-container<\/code><\/pre>\n
Bu komutlar, my-react-app-container<\/code> ad\u0131nda yeni bir React projesi olu\u015fturacak ve projenin dizinine ge\u00e7menizi sa\u011flayacakt\u0131r. Uygulaman\u0131n varsay\u0131lan haliyle \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 test etmek i\u00e7in:<\/p>\n
npm start<\/code><\/pre>\n
Taray\u0131c\u0131n\u0131zda http:\/\/localhost:3000<\/code> adresine giderek React uygulamas\u0131n\u0131n \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 do\u011frulayabilirsiniz. Testi tamamlad\u0131ktan sonra Ctrl+C<\/code> ile geli\u015ftirme sunucusunu durdurun.<\/p>\n
Bir React uygulamas\u0131n\u0131 konteynerize ederken, genellikle uygulaman\u0131n statik dosyalar\u0131n\u0131 (HTML, CSS, JavaScript) derleyip (build) ard\u0131ndan bu dosyalar\u0131 bir web sunucusu (Nginx, Apache gibi) arac\u0131l\u0131\u011f\u0131yla sunar\u0131z. Bu yakla\u015f\u0131m, \u00fcretim ortamlar\u0131 i\u00e7in en verimli ve g\u00fcvenli y\u00f6ntemdir.<\/p>\n
React Uygulamas\u0131n\u0131 Konteynerize Etme<\/h3>\n
React uygulaman\u0131z\u0131 konteynerize etmek i\u00e7in bir Dockerfile<\/code> olu\u015fturman\u0131z gerekmektedir. Dockerfile<\/code>, Docker’\u0131n bir imaj\u0131 nas\u0131l olu\u015fturaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m anlatan bir metin dosyas\u0131d\u0131r. React uygulamalar\u0131 i\u00e7in genellikle \u00e7ok a\u015famal\u0131 (multi-stage) derleme yakla\u015f\u0131m\u0131n\u0131 kullan\u0131r\u0131z. Bu, son imaj\u0131n boyutunu k\u00fc\u00e7\u00fclt\u00fcr ve g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 azalt\u0131r.<\/p>\n
my-react-app-container<\/code> projenizin k\u00f6k dizininde Dockerfile<\/code> ad\u0131nda bir dosya olu\u015fturun ve i\u00e7eri\u011fini a\u015fa\u011f\u0131daki gibi doldurun:<\/p>\n
# A\u015fama 1: Uygulamay\u0131 Derleme (Builder A\u015famas\u0131)\nFROM node:18-alpine AS builder\n\n
\u00c7al\u0131\u015fma dizinini belirle<\/h2>\nWORKDIR \/app\n\n
package.json ve package-lock.json dosyalar\u0131n\u0131 kopyala<\/h2>\n
Bu ad\u0131m, npm install'\u0131n \u00f6nbelle\u011fe al\u0131nmas\u0131n\u0131 sa\u011flar<\/h2>\nCOPY package.json yarn.lock .\/\n\n
Ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckle (yarn kullan\u0131l\u0131yorsa yarn install)<\/h2>\nRUN yarn install --frozen-lockfile\n\n
Kalan t\u00fcm uygulama dosyalar\u0131n\u0131 kopyala<\/h2>\nCOPY . .\n\n
React uygulamas\u0131n\u0131 derle<\/h2>\n
Bu komut, uygulaman\u0131n \u00fcretim i\u00e7in optimize edilmi\u015f statik dosyalar\u0131n\u0131 olu\u015fturur<\/h2>\nRUN yarn build\n\n
A\u015fama 2: Uygulamay\u0131 Sunma (Nginx A\u015famas\u0131)<\/h2>\nFROM nginx:stable-alpine\n\n
Nginx'in varsay\u0131lan yap\u0131land\u0131rmas\u0131n\u0131 sil<\/h2>\n
COPY --from=builder \/app\/nginx.conf \/etc\/nginx\/conf.d\/default.conf # \u00d6zel Nginx yap\u0131land\u0131rmas\u0131 i\u00e7in<\/h2>\n\n
Nginx'in varsay\u0131lan HTML dizinine derlenmi\u015f React uygulamas\u0131n\u0131 kopyala<\/h2>\n
Bu, Nginx'in React uygulamas\u0131n\u0131n statik dosyalar\u0131n\u0131 sunmas\u0131n\u0131 sa\u011flar<\/h2>\nCOPY --from=builder \/app\/build \/usr\/share\/nginx\/html\n\n
Nginx'in 80 numaral\u0131 portu dinlemesini sa\u011fla<\/h2>\nEXPOSE 80\n\n
Konteyner ba\u015flat\u0131ld\u0131\u011f\u0131nda Nginx'i \u00e7al\u0131\u015ft\u0131r<\/h2>\nCMD [\"nginx\", \"-g\", \"daemon off;\"]<\/code><\/pre>\n
Dockerfile A\u00e7\u0131klamas\u0131:<\/strong><\/p>\n
1.  FROM node:18-alpine AS builder<\/code><\/strong>: \u0130lk a\u015fama i\u00e7in node:18-alpine<\/code> temel imaj\u0131n\u0131 kullan\u0131yoruz. alpine<\/code> versiyonlar\u0131 daha k\u00fc\u00e7\u00fckt\u00fcr. Bu a\u015famaya builder<\/code> ad\u0131n\u0131 verdik.
\n2.  WORKDIR \/app<\/code><\/strong>: Konteyner i\u00e7inde \/app<\/code> dizinini \u00e7al\u0131\u015fma dizini olarak belirliyoruz.
\n3.  COPY package.json yarn.lock .\/<\/code><\/strong>: package.json<\/code> ve yarn.lock<\/code> (veya package-lock.json<\/code>) dosyalar\u0131n\u0131 kopyal\u0131yoruz. Bu ad\u0131m, ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fmedi\u011fi s\u00fcrece npm install<\/code> (veya yarn install<\/code>) ad\u0131m\u0131n\u0131n Docker \u00f6nbelle\u011finden faydalanmas\u0131n\u0131 sa\u011flar.
\n4.  RUN yarn install --frozen-lockfile<\/code><\/strong>: Uygulaman\u0131n t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 y\u00fckl\u00fcyoruz. yarn install --frozen-lockfile<\/code> komutu, yarn.lock<\/code> dosyas\u0131ndaki s\u00fcr\u00fcmleri kesinlikle kullan\u0131r ve ba\u011f\u0131ml\u0131l\u0131klar\u0131n tutarl\u0131 olmas\u0131n\u0131 sa\u011flar. npm<\/code> kullan\u0131yorsan\u0131z npm install --legacy-peer-deps<\/code> veya sadece npm install<\/code> kullanabilirsiniz.
\n5.  COPY . .<\/code><\/strong>: Geriye kalan t\u00fcm uygulama dosyalar\u0131n\u0131 (kaynak kodlar\u0131, public klas\u00f6r\u00fc vb.) \u00e7al\u0131\u015fma dizinine kopyal\u0131yoruz.
\n6.  RUN yarn build<\/code><\/strong>: React uygulamas\u0131n\u0131 \u00fcretim i\u00e7in derliyoruz. Bu komut, build<\/code> dizini alt\u0131nda optimize edilmi\u015f statik dosyalar olu\u015fturur.
\n7.  FROM nginx:stable-alpine<\/code><\/strong>: \u0130kinci a\u015fama i\u00e7in nginx:stable-alpine<\/code> temel imaj\u0131n\u0131 kullan\u0131yoruz. Nginx, statik dosyalar\u0131 sunmak i\u00e7in hafif ve y\u00fcksek performansl\u0131 bir web sunucusudur.
\n8.  COPY --from=builder \/app\/build \/usr\/share\/nginx\/html<\/code><\/strong>: Bu kritik ad\u0131mda, ilk a\u015famada (builder<\/code>) olu\u015fturulan derlenmi\u015f React uygulamas\u0131n\u0131n build<\/code> dizinindeki statik dosyalar\u0131n\u0131 Nginx’in varsay\u0131lan web sunucusu dizinine (\/usr\/share\/nginx\/html<\/code>) kopyal\u0131yoruz.
\n9.  EXPOSE 80<\/code><\/strong>: Konteynerin 80 numaral\u0131 portu d\u0131\u015far\u0131ya a\u00e7t\u0131\u011f\u0131n\u0131 belirtiyoruz.
\n10. CMD [\"nginx\", \"-g\", \"daemon off;\"]<\/code><\/strong>: Konteyner ba\u015flat\u0131ld\u0131\u011f\u0131nda Nginx sunucusunu \u00e7al\u0131\u015ft\u0131racak komutu belirliyoruz. -g \"daemon off;\"<\/code> Nginx’in \u00f6n planda \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar, bu da Docker konteynerleri i\u00e7in standart bir uygulamad\u0131r.<\/p>\n
.dockerignore<\/code> Dosyas\u0131 Olu\u015fturma:<\/strong>
\nDockerfile<\/code> ile ayn\u0131 dizine .dockerignore<\/code> ad\u0131nda bir dosya olu\u015fturarak, Docker imaj\u0131na gereksiz dosyalar\u0131n (\u00f6rne\u011fin node_modules<\/code>, .git<\/code>, build<\/code> klas\u00f6r\u00fc) kopyalanmas\u0131n\u0131 engelleyebilirsiniz. Bu, imaj boyutunu k\u00fc\u00e7\u00fclt\u00fcr ve derleme s\u00fcresini h\u0131zland\u0131r\u0131r.<\/p>\n
node_modules\nbuild\n.git\n.env\nDockerfile\n.dockerignore<\/code><\/pre>\n
Docker \u0130maj\u0131n\u0131 Olu\u015fturma:<\/strong>
\n\u015eimdi Dockerfile<\/code>‘\u0131 kullanarak Docker imaj\u0131m\u0131z\u0131 olu\u015ftural\u0131m. Projenizin k\u00f6k dizininde ( Dockerfile<\/code> dosyas\u0131n\u0131n bulundu\u011fu yer) a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
docker build -t my-react-app-image .<\/code><\/pre>\n
*   docker build<\/code>: Docker imaj\u0131 olu\u015fturma komutu.
\n*   -t my-react-app-image<\/code>: Olu\u015fturulan imaja my-react-app-image<\/code> ad\u0131n\u0131 (tag) verir. \u0130maj adlar\u0131 genellikle k\u00fc\u00e7\u00fck harf olmal\u0131d\u0131r.
\n*   .<\/code>: Dockerfile<\/code>‘\u0131n mevcut dizinde oldu\u011funu belirtir.<\/p>\n
Bu komutun \u00e7al\u0131\u015fmas\u0131 biraz zaman alabilir, \u00f6zellikle ilk kez \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda ba\u011f\u0131ml\u0131l\u0131klar\u0131n indirilmesi gerekti\u011fi i\u00e7in. Ba\u015far\u0131l\u0131 bir \u015fekilde tamamland\u0131\u011f\u0131nda, imaj\u0131n\u0131z yerel Docker deponuzda haz\u0131r olacakt\u0131r.<\/p>\n
Docker \u0130maj\u0131n\u0131 Yerel Olarak Test Etme:<\/strong>
\n\u0130maj\u0131n do\u011fru \u00e7al\u0131\u015f\u0131p \u00e7al\u0131\u015fmad\u0131\u011f\u0131n\u0131 do\u011frulamak i\u00e7in yerel olarak bir konteyner \u00e7al\u0131\u015ft\u0131ral\u0131m:<\/p>\n
docker run -p 80:80 my-react-app-image<\/code><\/pre>\n
*   docker run<\/code>: Bir konteyneri \u00e7al\u0131\u015ft\u0131rma komutu.
\n*   -p 80:80<\/code>: Konteynerin 80 numaral\u0131 portunu ana makinenin 80 numaral\u0131 portuna e\u015fler. Bu sayede taray\u0131c\u0131n\u0131zdan http:\/\/localhost<\/code> adresine eri\u015febilirsiniz.
\n*   my-react-app-image<\/code>: \u00c7al\u0131\u015ft\u0131r\u0131lacak imaj\u0131n ad\u0131.<\/p>\n
Taray\u0131c\u0131n\u0131z\u0131 a\u00e7\u0131p http:\/\/localhost<\/code> adresine gidin. React uygulaman\u0131z\u0131n Nginx sunucusu \u00fczerinden sorunsuz bir \u015fekilde \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6rmelisiniz. Testi tamamlad\u0131ktan sonra, konteyneri durdurmak i\u00e7in terminalde Ctrl+C<\/code> tu\u015flar\u0131na bas\u0131n. E\u011fer konteyneri arka planda \u00e7al\u0131\u015ft\u0131rmak isterseniz -d<\/code> (detached) bayra\u011f\u0131n\u0131 kullanabilirsiniz: docker run -d -p 80:80 my-react-app-image<\/code>.<\/p>\n
Konteyner Kay\u0131t Defteri Se\u00e7imi ve Yap\u0131land\u0131rmas\u0131<\/h3>\n
Docker imaj\u0131n\u0131z\u0131 ba\u015far\u0131l\u0131 bir \u015fekilde olu\u015fturduktan ve yerel olarak test ettikten sonra, bu imaj\u0131 bir konteyner kay\u0131t defterine y\u00fcklemeniz gerekmektedir. Bu sayede imaj\u0131n\u0131z, d\u00fcnyan\u0131n herhangi bir yerindeki sunucular taraf\u0131ndan eri\u015filebilir hale gelir.<\/p>\n
Pop\u00fcler Konteyner Kay\u0131t Defterleri:<\/strong>
\n*   Docker Hub:<\/strong> Docker’\u0131n resmi ve en pop\u00fcler herkese a\u00e7\u0131k kay\u0131t defteridir. \u00dccretsiz katman\u0131 mevcuttur.
\n*   AWS Elastic Container Registry (ECR):<\/strong> Amazon Web Services (AWS) ekosistemi i\u00e7inde yer alan y\u00f6netilen bir kay\u0131t defteri hizmetidir.
\n*   Google Cloud Artifact Registry (veya GCR):<\/strong> Google Cloud Platform (GCP) taraf\u0131ndan sunulan, \u00e7e\u015fitli yap\u0131tlar\u0131 (Docker imajlar\u0131 dahil) depolamak i\u00e7in kullan\u0131lan bir hizmettir.
\n*   Azure Container Registry (ACR):<\/strong> Microsoft Azure taraf\u0131ndan sa\u011flanan, y\u00f6netilen bir Docker kay\u0131t defteri hizmetidir.
\n*   GitLab Container Registry:<\/strong> GitLab ile entegre, projeleriniz i\u00e7in \u00f6zel kay\u0131t defteri sunar.<\/p>\n
Bu rehberde Docker Hub’\u0131 kullanaca\u011f\u0131z, \u00e7\u00fcnk\u00fc kullan\u0131m\u0131 kolayd\u0131r ve genel prensipleri anlamak i\u00e7in iyi bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r.<\/p>\n
Docker Hub Hesab\u0131 ve Oturum A\u00e7ma:<\/strong>
\n1.  E\u011fer yoksa Docker Hub web sitesinden (hub.docker.com) \u00fccretsiz bir hesap olu\u015fturun. Kullan\u0131c\u0131 ad\u0131n\u0131z\u0131 not al\u0131n.
\n2.  Yerel terminalinizden Docker Hub’a giri\u015f yap\u0131n:<\/p>\n
docker login<\/code><\/pre>\n
    Komutu \u00e7al\u0131\u015ft\u0131rd\u0131ktan sonra Docker Hub kullan\u0131c\u0131 ad\u0131n\u0131z\u0131 ve parolan\u0131z\u0131 girmeniz istenecektir. Ba\u015far\u0131l\u0131 bir giri\u015fin ard\u0131ndan “Login Succeeded” mesaj\u0131n\u0131 g\u00f6rmelisiniz.<\/p>\n
\u0130maj\u0131 Kay\u0131t Defterine Y\u00fcklemek \u0130\u00e7in Etiketleme (Tagging):<\/strong>
\nBir imaj\u0131 bir kay\u0131t defterine y\u00fcklemeden \u00f6nce, onu kay\u0131t defteri format\u0131na uygun bir \u015fekilde etiketlemeniz (tag) gerekir. Genel format \u015f\u00f6yledir: [registry-host]\/[username]\/[repository-name]:[tag]<\/code>. Docker Hub i\u00e7in registry-host<\/code> k\u0131sm\u0131 varsay\u0131lan olarak atlanabilir.<\/p>\n
Yerel olarak olu\u015fturdu\u011fumuz my-react-app-image<\/code> imaj\u0131n\u0131 Docker Hub hesab\u0131n\u0131za y\u00fcklenecek \u015fekilde etiketleyelim. <\/code> yerine kendi Docker Hub kullan\u0131c\u0131 ad\u0131n\u0131z\u0131 yaz\u0131n:<\/p>\n
docker tag my-react-app-image \/my-react-app:v1.0<\/code><\/pre>\n
*   docker tag<\/code>: Bir imaja yeni bir etiket atama komutu.
\n*   my-react-app-image<\/code>: Etiketlemek istedi\u011fimiz mevcut yerel imaj\u0131n ad\u0131.
\n*   \/my-react-app:v1.0<\/code>: Yeni etiket. Burada my-react-app<\/code> depo ad\u0131n\u0131, v1.0<\/code> ise versiyon etiketini temsil eder. Versiyonlama, imajlar\u0131n\u0131z\u0131 y\u00f6netmek i\u00e7in \u00e7ok \u00f6nemlidir. \u0130lk versiyon i\u00e7in v1.0<\/code> kullanabiliriz.<\/p>\n
Bu komut, orijinal imaj\u0131 kopyalamaz, sadece ona yeni bir referans (etiket) ekler. docker images<\/code> komutunu \u00e7al\u0131\u015ft\u0131rarak yeni etiketi g\u00f6rebilirsiniz.<\/p>\n
Docker \u0130maj\u0131n\u0131 Kay\u0131t Defterine Y\u00fckleme<\/h3>\n
\u0130maj\u0131m\u0131z\u0131 do\u011fru \u015fekilde etiketledikten sonra, onu Docker Hub’a y\u00fckleyebiliriz:<\/p>\n
docker push \/my-react-app:v1.0<\/code><\/pre>\n
*   docker push<\/code>: Etiketlenmi\u015f bir imaj\u0131 belirtilen kay\u0131t defterine y\u00fckleme komutu.<\/p>\n
Bu komut, imaj katmanlar\u0131n\u0131 Docker Hub’a y\u00fckleyecektir. \u0130\u015flem, internet ba\u011flant\u0131n\u0131z\u0131n h\u0131z\u0131na ve imaj boyutuna ba\u011fl\u0131 olarak biraz zaman alabilir. Y\u00fckleme tamamland\u0131\u011f\u0131nda, Docker Hub hesab\u0131n\u0131z\u0131n web aray\u00fcz\u00fcne giderek my-react-app<\/code> ad\u0131nda yeni bir depo ve i\u00e7inde v1.0<\/code> etiketli imaj\u0131n\u0131z\u0131 g\u00f6rebilirsiniz. Bu, imaj\u0131n\u0131z\u0131n ba\u015far\u0131yla buluta y\u00fcklendi\u011fi ve art\u0131k herhangi bir sunucudan eri\u015filebilir oldu\u011fu anlam\u0131na gelir.<\/p>\n
Kay\u0131t Defterinden React Uygulamas\u0131n\u0131 Da\u011f\u0131tma<\/h3>\n
\u0130maj\u0131n\u0131z art\u0131k kay\u0131t defterinde oldu\u011funa g\u00f6re, onu herhangi bir Docker kurulu sunucuda veya bulut hizmetinde da\u011f\u0131tabilirsiniz.<\/p>\n
\u0130maj\u0131 \u00c7ekme (Pulling):<\/strong>
\nUygulaman\u0131z\u0131 da\u011f\u0131tmak istedi\u011finiz sunucuda (bu sizin yerel makinenizden farkl\u0131 bir sunucu olabilir) a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rarak imaj\u0131 kay\u0131t defterinden \u00e7ekebilirsiniz:<\/p>\n
docker pull \/my-react-app:v1.0<\/code><\/pre>\n
Bu komut, belirtilen imaj\u0131 yerel Docker deponuza indirir.<\/p>\n
Konteyneri \u00c7al\u0131\u015ft\u0131rma:<\/strong>
\n\u0130maj\u0131 \u00e7ektikten sonra, t\u0131pk\u0131 yerel testte yapt\u0131\u011f\u0131m\u0131z gibi bir konteyner \u00e7al\u0131\u015ft\u0131rabiliriz. Ancak bu sefer genellikle arka planda (detached mode) \u00e7al\u0131\u015fmas\u0131n\u0131 isteriz:<\/p>\n
docker run -d -p 80:80 --name my-react-app-prod \/my-react-app:v1.0<\/code><\/pre>\n
*   -d<\/code>: Konteyneri arka planda (detached mode) \u00e7al\u0131\u015ft\u0131r\u0131r.
\n*   -p 80:80<\/code>: Sunucunun 80 numaral\u0131 portunu konteynerin 80 numaral\u0131 portuna e\u015fler.
\n*   --name my-react-app-prod<\/code>: Konteynera my-react-app-prod<\/code> ad\u0131n\u0131 verir. Bu, konteyneri daha kolay y\u00f6netmenizi sa\u011flar.<\/p>\n
Bu komutu \u00e7al\u0131\u015ft\u0131rd\u0131ktan sonra, sunucunuzun IP adresini veya alan ad\u0131n\u0131 kullanarak taray\u0131c\u0131n\u0131zdan React uygulaman\u0131za eri\u015febilmelisiniz.<\/p>\n
Da\u011f\u0131t\u0131m Senaryolar\u0131:<\/strong><\/p>\n
*   Basit VM\/Sunucu:<\/strong> Yukar\u0131daki ad\u0131mlar, Docker’\u0131n kurulu oldu\u011fu herhangi bir sanal makine (VM) veya fiziksel sunucuda uygulaman\u0131z\u0131 \u00e7al\u0131\u015ft\u0131rmak i\u00e7in yeterlidir.
\n*   Docker Compose:<\/strong> E\u011fer uygulaman\u0131z birden fazla servisten (\u00f6rne\u011fin, React \u00f6n y\u00fcz\u00fc, Node.js arka y\u00fcz\u00fc, veritaban\u0131) olu\u015fuyorsa, Docker Compose kullanarak t\u00fcm servisleri tek bir docker-compose.yml<\/code> dosyas\u0131 ile tan\u0131mlayabilir ve y\u00f6netebilirsiniz.
\n*   Kubernetes:<\/strong> B\u00fcy\u00fck \u00f6l\u00e7ekli, y\u00fcksek kullan\u0131labilirlikli ve karma\u015f\u0131k uygulamalar i\u00e7in Kubernetes gibi konteyner orkestrasyon platformlar\u0131 kullan\u0131l\u0131r. Kubernetes, konteynerlerinizi otomatik olarak da\u011f\u0131t\u0131r, \u00f6l\u00e7ekler, y\u00f6netir ve iyile\u015ftirir. Bu, bu rehberin kapsam\u0131n\u0131n \u00f6tesinde olsa da, konteynerle\u015ftirmenin do\u011fal bir sonraki ad\u0131m\u0131d\u0131r.
\n*   Bulut Hizmetleri:<\/strong> Bir\u00e7ok bulut sa\u011flay\u0131c\u0131s\u0131, konteynerize edilmi\u015f uygulamalar\u0131 da\u011f\u0131tmak i\u00e7in \u00f6zel hizmetler sunar:
\n    *   AWS Elastic Container Service (ECS) \/ AWS Fargate:<\/strong> Konteynerleri y\u00f6netmek i\u00e7in Amazon’un kendi orkestrasyon hizmetleri.
\n    *   Google Cloud Run:<\/strong> Sunucusuz (serverless) bir platformda konteynerleri \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131r.
\n    *   Azure Container Instances (ACI) \/ Azure App Service for Containers:<\/strong> Azure’da konteynerleri h\u0131zl\u0131ca \u00e7al\u0131\u015ft\u0131rmak veya web uygulamas\u0131 olarak da\u011f\u0131tmak i\u00e7in.<\/p>\n
Bu hizmetler, kay\u0131t defterinizden imajlar\u0131 otomatik olarak \u00e7ekip da\u011f\u0131t\u0131m s\u00fcrecini y\u00f6netebilir.<\/p>\n
En \u0130yi Uygulamalar ve \u0130leri Konular<\/h3>\n
Konteynerle\u015ftirme s\u00fcrecinizi daha verimli, g\u00fcvenli ve s\u00fcrd\u00fcr\u00fclebilir hale getirmek i\u00e7in baz\u0131 en iyi uygulamalar\u0131 ve ileri konular\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmal\u0131s\u0131n\u0131z:<\/p>\n
1. G\u00fcvenlik:<\/strong>
\n*   Minimal Temel \u0130majlar:<\/strong> alpine<\/code> tabanl\u0131 imajlar gibi daha k\u00fc\u00e7\u00fck ve minimal temel imajlar kullan\u0131n. Bu, imaj boyutunu k\u00fc\u00e7\u00fclt\u00fcr ve potansiyel g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 azalt\u0131r.
\n*   Root Olmayan Kullan\u0131c\u0131lar:<\/strong> Konteyner i\u00e7inde root kullan\u0131c\u0131s\u0131 olarak \u00e7al\u0131\u015fmaktan ka\u00e7\u0131n\u0131n. Dockerfile<\/code> i\u00e7inde USER<\/code> komutunu kullanarak \u00f6zel bir kullan\u0131c\u0131 olu\u015fturabilir ve bu kullan\u0131c\u0131yla \u00e7al\u0131\u015fabilirsiniz.
\n*   Ba\u011f\u0131ml\u0131l\u0131k Taramas\u0131:<\/strong> G\u00fcvenlik a\u00e7\u0131klar\u0131 i\u00e7in ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131z\u0131 d\u00fczenli olarak taray\u0131n. npm audit<\/code> veya \u00fc\u00e7\u00fcnc\u00fc taraf ara\u00e7lar (\u00f6rne\u011fin Snyk, Trivy) kullanabilirsiniz.
\n*   \u0130maj Taramas\u0131:<\/strong> Konteyner kay\u0131t defterlerinin \u00e7o\u011fu, y\u00fcklenen imajlar\u0131 bilinen g\u00fcvenlik a\u00e7\u0131klar\u0131 i\u00e7in tarama \u00f6zelli\u011fi sunar. Bu \u00f6zellikleri etkinle\u015ftirin.
\n*   Hassas Veriler:<\/strong> API anahtarlar\u0131, veritaban\u0131 \u015fifreleri gibi hassas bilgileri Dockerfile<\/code>‘a veya imaja asla g\u00f6mmeyin. Bunun yerine ortam de\u011fi\u015fkenleri, Docker Secrets veya Kubernetes Secrets gibi g\u00fcvenli y\u00f6ntemler kullan\u0131n.<\/p>\n
2. Performans ve Optimizasyon:<\/strong>
\n*   \u00c7ok A\u015famal\u0131 Derleme (Multi-Stage Builds):<\/strong> Bu rehberde kulland\u0131\u011f\u0131m\u0131z gibi, \u00e7ok a\u015famal\u0131 derlemeler son imaj boyutunu \u00f6nemli \u00f6l\u00e7\u00fcde k\u00fc\u00e7\u00fclt\u00fcr. Geli\u015ftirme ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 ve derleme ara\u00e7lar\u0131n\u0131 nihai \u00fcretim imaj\u0131na dahil etmez.
\n*   Katman \u00d6nbellekleme:<\/strong> Dockerfile<\/code> komutlar\u0131n\u0131n s\u0131ras\u0131 \u00f6nemlidir. S\u0131k de\u011fi\u015fen komutlar\u0131 (\u00f6rne\u011fin COPY . .<\/code>) Dockerfile<\/code>‘\u0131n sonlar\u0131na do\u011fru yerle\u015ftirerek, s\u0131k de\u011fi\u015fmeyen katmanlar\u0131n (\u00f6rne\u011fin RUN yarn install<\/code>) Docker \u00f6nbelle\u011finden faydalanmas\u0131n\u0131 sa\u011flay\u0131n.
\n*   \u0130maj Boyutu Optimizasyonu:<\/strong> Gereksiz dosyalar\u0131 .dockerignore<\/code> ile hari\u00e7 tutun. Sadece uygulaman\u0131z\u0131n \u00e7al\u0131\u015fmas\u0131 i\u00e7in kesinlikle gerekli olanlar\u0131 dahil edin.
\n*   Gzip S\u0131k\u0131\u015ft\u0131rma:<\/strong> Nginx gibi web sunucular\u0131, statik dosyalar\u0131 sunarken otomatik olarak Gzip s\u0131k\u0131\u015ft\u0131rmas\u0131 uygulayabilir. Bu, a\u011f trafi\u011fini azalt\u0131r ve uygulaman\u0131n daha h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar. Nginx yap\u0131land\u0131rman\u0131zda bunu etkinle\u015ftirdi\u011finizden emin olun.<\/p>\n
3. CI\/CD Entegrasyonu:<\/strong>
\n*   Konteynerle\u015ftirme, s\u00fcrekli entegrasyon ve s\u00fcrekli da\u011f\u0131t\u0131m (CI\/CD) i\u015flem hatlar\u0131n\u0131n omurgas\u0131n\u0131 olu\u015fturur. GitHub Actions, GitLab CI\/CD, Jenkins, CircleCI gibi ara\u00e7larla otomatik bir i\u015f ak\u0131\u015f\u0131 olu\u015fturabilirsiniz:
\n    1.  Kodu Git deposuna her itti\u011finizde (push), CI\/CD sistemi tetiklenir.
\n    2.  Dockerfile<\/code> kullan\u0131larak yeni bir Docker imaj\u0131 olu\u015fturulur.
\n    3.  Olu\u015fturulan imaj, belirlenen bir etiketle (\u00f6rne\u011fin git commit hash<\/code> veya versiyon numaras\u0131<\/code>) konteyner kay\u0131t defterine y\u00fcklenir.
\n    4.  Opsiyonel olarak, yeni imaj otomatik olarak test veya \u00fcretim ortam\u0131na da\u011f\u0131t\u0131l\u0131r.<\/p>\n
4. Versiyonlama:<\/strong>
\n*   Semantik Versiyonlama:<\/strong> \u0130majlar\u0131n\u0131z\u0131 v1.0.0<\/code>, v1.0.1<\/code> gibi semantik versiyon numaralar\u0131yla etiketleyin. Bu, farkl\u0131 versiyonlar\u0131 y\u00f6netmeyi ve geri d\u00f6nmeyi kolayla\u015ft\u0131r\u0131r.
\n*   latest<\/code> Etiketi:<\/strong> latest<\/code> etiketini kullanmaktan ka\u00e7\u0131n\u0131n veya dikkatli kullan\u0131n. latest<\/code> etiketi, her zaman en son y\u00fcklenen imaja i\u015faret eder ve bu da \u00fcretim ortam\u0131nda beklenmedik de\u011fi\u015fikliklere yol a\u00e7abilir. Belirli versiyon etiketlerini kullanmak daha g\u00fcvenlidir.<\/p>\n
5. Ortam Spesifik Yap\u0131land\u0131rmalar:<\/strong>
\n*   Farkl\u0131 ortamlar (geli\u015ftirme, test, \u00fcretim) i\u00e7in farkl\u0131 yap\u0131land\u0131rmalar\u0131n\u0131z olabilir. Bu durumda, .env<\/code> dosyalar\u0131n\u0131 konteyner i\u00e7ine kopyalamaktan ka\u00e7\u0131n\u0131n ve ortam de\u011fi\u015fkenlerini kullan\u0131n. Docker Compose veya Kubernetes gibi ara\u00e7lar, ortam de\u011fi\u015fkenlerini konteynerlere g\u00fcvenli bir \u015fekilde iletmek i\u00e7in mekanizmalar sunar.<\/p>\n
Sonu\u00e7<\/h3>\n
Bu rehberde, React uygulaman\u0131z\u0131 Docker kullanarak nas\u0131l konteynerize edece\u011finizi, bir konteyner kay\u0131t defterine nas\u0131l y\u00fckleyece\u011finizi ve bu kay\u0131t defterinden nas\u0131l da\u011f\u0131taca\u011f\u0131n\u0131z\u0131 detayl\u0131 bir \u015fekilde \u00f6\u011frendiniz. Konteynerle\u015ftirme, modern uygulama da\u011f\u0131t\u0131m\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r ve uygulaman\u0131z\u0131n tutarl\u0131l\u0131\u011f\u0131n\u0131, ta\u015f\u0131nabilirli\u011fini ve \u00f6l\u00e7eklenebilirli\u011fini art\u0131r\u0131r.<\/p>\n
React uygulaman\u0131z\u0131 bir konteyner i\u00e7inde paketleyerek, “benim makinemde \u00e7al\u0131\u015f\u0131yordu” sorununu ortadan kald\u0131r\u0131rs\u0131n\u0131z ve geli\u015ftirme ortam\u0131n\u0131zdan \u00fcretim ortam\u0131na sorunsuz bir ge\u00e7i\u015f sa\u011flars\u0131n\u0131z. Konteyner kay\u0131t defterleri, bu konteyner imajlar\u0131n\u0131 depolamak ve y\u00f6netmek i\u00e7in merkezi bir konum sunar, b\u00f6ylece uygulaman\u0131z\u0131 herhangi bir sunucuda kolayca da\u011f\u0131tabilirsiniz.<\/p>\n
Bu ad\u0131mlar\u0131 takip ederek, React projelerinizin da\u011f\u0131t\u0131m s\u00fcrecini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilir ve CI\/CD i\u015flem hatlar\u0131na entegrasyon i\u00e7in sa\u011flam bir temel olu\u015fturabilirsiniz. Konteynerle\u015ftirme d\u00fcnyas\u0131 olduk\u00e7a geni\u015f ve derin olup, Docker Compose, Kubernetes ve \u00e7e\u015fitli bulut konteyner hizmetleri gibi konular\u0131 ke\u015ffetmek, da\u011f\u0131t\u0131m yeteneklerinizi daha da ileriye ta\u015f\u0131yacakt\u0131r. Unutmay\u0131n, pratik yapmak ve farkl\u0131 senaryolar\u0131 denemek, bu teknolojilerde ustala\u015fman\u0131n anahtar\u0131d\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"React Uygulaman\u0131z\u0131 Konteyner Kay\u0131t Defteri Kullanarak Da\u011f\u0131tma Rehberi\nModern web geli\u015ftirme d\u00fcnyas\u0131nda, uygulamalar\u0131n tutarl\u0131, ta\u015f\u0131nabili","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-36209","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nReact Uygulaman\u0131z\u0131 Konteyner Kay\u0131t Defteri Kullanarak 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-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Uygulaman\u0131z\u0131 Konteyner Kay\u0131t Defteri Kullanarak Da\u011f\u0131tma Rehberi\" \/>\n<meta property=\"og:description\" content=\"React Uygulaman\u0131z\u0131 Konteyner Kay\u0131t Defteri Kullanarak Da\u011f\u0131tma Rehberi Modern web geli\u015ftirme d\u00fcnyas\u0131nda, uygulamalar\u0131n tutarl\u0131, ta\u015f\u0131nabili\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-10T09:40:44+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=\"17 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"React Uygulaman\u0131z\u0131 Konteyner Kay\u0131t Defteri Kullanarak Da\u011f\u0131tma Rehberi\",\"datePublished\":\"2025-12-10T09:40:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/\"},\"wordCount\":2986,\"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-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/\",\"name\":\"React Uygulaman\u0131z\u0131 Konteyner Kay\u0131t Defteri Kullanarak Da\u011f\u0131tma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-12-10T09:40:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Uygulaman\u0131z\u0131 Konteyner Kay\u0131t Defteri Kullanarak 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 Uygulaman\u0131z\u0131 Konteyner Kay\u0131t Defteri Kullanarak 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-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"React Uygulaman\u0131z\u0131 Konteyner Kay\u0131t Defteri Kullanarak Da\u011f\u0131tma Rehberi","og_description":"React Uygulaman\u0131z\u0131 Konteyner Kay\u0131t Defteri Kullanarak Da\u011f\u0131tma Rehberi Modern web geli\u015ftirme d\u00fcnyas\u0131nda, uygulamalar\u0131n tutarl\u0131, ta\u015f\u0131nabili","og_url":"https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-12-10T09:40:44+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"17 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"React Uygulaman\u0131z\u0131 Konteyner Kay\u0131t Defteri Kullanarak Da\u011f\u0131tma Rehberi","datePublished":"2025-12-10T09:40:44+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/"},"wordCount":2986,"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-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/","name":"React Uygulaman\u0131z\u0131 Konteyner Kay\u0131t Defteri Kullanarak Da\u011f\u0131tma Rehberi - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-12-10T09:40:44+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-konteyner-kayit-defteri-kullanarak-dagitma-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Uygulaman\u0131z\u0131 Konteyner Kay\u0131t Defteri Kullanarak 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\/36209","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=36209"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36209\/revisions"}],"predecessor-version":[{"id":36210,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/36209\/revisions\/36210"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=36209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=36209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=36209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}