{"id":14665,"date":"2025-03-09T11:45:14","date_gmt":"2025-03-09T08:45:14","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/docker-ve-nginx-ile-react-uygulamasini-yayinlamak\/"},"modified":"2025-03-09T11:45:14","modified_gmt":"2025-03-09T08:45:14","slug":"docker-ve-nginx-ile-react-uygulamasini-yayinlamak","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/docker-ve-nginx-ile-react-uygulamasini-yayinlamak\/","title":{"rendered":"Docker ve Nginx ile React Uygulamas\u0131n\u0131 Yay\u0131nlamak"},"content":{"rendered":"

<\/p>\n

Docker ve Nginx ile React Uygulamas\u0131n\u0131 Yay\u0131nlamak<\/p>\n

Merhaba! Ben Fatih Soysal ve bug\u00fcn sizlere React uygulamalar\u0131n\u0131z\u0131 Docker ve Nginx kullanarak nas\u0131l kolayca ve verimli bir \u015fekilde yay\u0131mlayaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu y\u00f6ntem, uygulaman\u0131z\u0131n g\u00fcvenilirli\u011fini, performans\u0131n\u0131 ve \u00f6l\u00e7eklenebilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131racakt\u0131r. \u00d6ncelikle, neden bu y\u00f6ntemi tercih etmeliyiz? Bunun cevab\u0131 olduk\u00e7a basit: Docker, uygulaman\u0131z\u0131n \u00e7al\u0131\u015fmas\u0131 i\u00e7in gerekli t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131 tek bir paket haline getirirken, Nginx ise performansl\u0131 bir ters proxy ve web sunucusu olarak hizmet vererek, uygulaman\u0131z\u0131n h\u0131zl\u0131 ve g\u00fcvenli bir \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n

Gerekli Haz\u0131rl\u0131klar<\/h2>\n

Ba\u015flamadan \u00f6nce birka\u00e7 \u00f6n ko\u015fulu yerine getirmemiz gerekiyor. Bunlar; Docker ve Docker Compose’un sisteminize kurulu olmas\u0131d\u0131r. Kurulum i\u015flemlerini Docker’\u0131n resmi web sitesinden (https:\/\/www.docker.com\/<\/a>) inceleyebilirsiniz. Ayr\u0131ca, bir React uygulaman\u0131z\u0131n olmas\u0131 da \u015fart. E\u011fer hen\u00fcz bir React projeniz yoksa, Create React App kullanarak kolayca bir tane olu\u015fturabilirsiniz.<\/p>\n

Dockerfile Olu\u015fturma<\/h2>\n

\u0130lk ad\u0131m\u0131m\u0131z, React uygulamam\u0131z i\u00e7in bir Dockerfile olu\u015fturmak. Bu dosya, Docker’\u0131n uygulaman\u0131z\u0131 nas\u0131l olu\u015fturaca\u011f\u0131n\u0131 ve \u00e7al\u0131\u015ft\u0131raca\u011f\u0131n\u0131 tan\u0131mlar. A\u015fa\u011f\u0131daki Dockerfile \u00f6rne\u011fini inceleyin ve projenizin k\u00f6k dizinine Dockerfile olarak kaydedin:<\/p>\n

\nFROM node:16-alpine AS build\nWORKDIR \/app\nCOPY package*.json .\/\nRUN npm install\nCOPY . .\nRUN npm run build\n\nFROM nginx:alpine\nCOPY --from=build \/app\/build \/usr\/share\/nginx\/html\nEXPOSE 80\n<\/code><\/pre>\n
Bu Dockerfile, \u00f6nce bir build a\u015famas\u0131 olu\u015fturarak Node.js ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 y\u00fckler ve React uygulaman\u0131z\u0131 \u00fcretir.  Sonras\u0131nda ise,  Nginx tabanl\u0131 bir image’\u0131 kullanarak \u00fcretilen uygulamay\u0131 Nginx’in dok\u00fcman k\u00f6k dizinine kopyalar.  Sonu\u00e7 olarak,  Nginx, haz\u0131rlanan React uygulamas\u0131n\u0131 sunar.<\/p>\n
docker-compose.yml Olu\u015fturma<\/h2>\n
Daha sonra, Docker Compose kullanarak uygulamam\u0131z\u0131 kolayca y\u00f6netece\u011fiz. Bunun i\u00e7in docker-compose.yml dosyas\u0131n\u0131 olu\u015ftural\u0131m:<\/p>\n
\nversion: \"3.9\"\nservices:\n  web:\n    build: .\n    ports:\n      - \"80:80\"\n    volumes:\n      - .\/build:\/usr\/share\/nginx\/html\n<\/code><\/pre>\n
Bu dosya,  web servisini tan\u0131mlar ve  Dockerfile’\u0131 kullanarak bir container olu\u015fturur.  Ayr\u0131ca,  80 numaral\u0131 portu,  container’\u0131n 80 numaral\u0131 portuna e\u015fler.  Bu sayede,  uygulaman\u0131z\u0131 taray\u0131c\u0131n\u0131zdan eri\u015febilirsiniz.  volumes k\u0131sm\u0131, geli\u015ftirme s\u00fcrecinde de\u011fi\u015fiklikleri an\u0131nda yans\u0131tmak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
Uygulamay\u0131 Yay\u0131nlama<\/h2>\n
Her \u015fey haz\u0131r oldu\u011funda, a\u015fa\u011f\u0131daki komutlar\u0131 s\u0131ras\u0131yla \u00e7al\u0131\u015ft\u0131rarak uygulaman\u0131z\u0131 yay\u0131mlayabilirsiniz:<\/p>\n
\ndocker-compose up --build -d\n<\/code><\/pre>\n
Bu komut,  docker-compose.yml dosyas\u0131n\u0131 kullanarak uygulaman\u0131z\u0131 olu\u015fturacak,  ve arka planda \u00e7al\u0131\u015ft\u0131racakt\u0131r.  Uygulaman\u0131z\u0131  http:\/\/localhost adresinden ziyaret edebilirsiniz.  Uygulamay\u0131 durdurmak i\u00e7in ise  docker-compose down komutunu kullanabilirsiniz.<\/p>\n
Sonu\u00e7<\/h2>\n
Docker ve Nginx kullanarak React uygulamalar\u0131n\u0131z\u0131 yay\u0131mlamak, hem kolay hem de verimli bir y\u00f6ntemdir.  Bu y\u00f6ntem, uygulaman\u0131z\u0131n \u00f6l\u00e7eklenebilirli\u011fini ve g\u00fcvenilirli\u011fini art\u0131r\u0131r. Umar\u0131m bu makale size yard\u0131mc\u0131 olmu\u015ftur.  Daha fazla bilgi ve farkl\u0131 projeler i\u00e7in fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz.<\/p>\n
Ayr\u0131ca, konu hakk\u0131nda daha fazla bilgi edinmek i\u00e7in a\u015fa\u011f\u0131daki kaynaklara da g\u00f6z atabilirsiniz:<\/p>\n