{"id":28544,"date":"2025-09-01T03:30:26","date_gmt":"2025-09-01T00:30:26","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-github-actions-ve-aws-ile-otomatik-olarak-yayinlayin\/"},"modified":"2025-09-01T03:30:26","modified_gmt":"2025-09-01T00:30:26","slug":"react-uygulamanizi-github-actions-ve-aws-ile-otomatik-olarak-yayinlayin","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-uygulamanizi-github-actions-ve-aws-ile-otomatik-olarak-yayinlayin\/","title":{"rendered":"React Uygulaman\u0131z\u0131 GitHub Actions ve AWS ile Otomatik Olarak Yay\u0131nlay\u0131n"},"content":{"rendered":"

React Uygulaman\u0131z\u0131 GitHub Actions ve AWS ile Otomatik Olarak Yay\u0131nlay\u0131n<\/p>\n

Her g\u00fcncellemeyi manuel olarak yay\u0131nlamak, zaman\u0131n\u0131z\u0131n ve enerjinizin b\u00fcy\u00fck bir k\u0131sm\u0131n\u0131 t\u00fcketiyor mu? React uygulaman\u0131z\u0131n geli\u015ftirme s\u00fcrecini h\u0131zland\u0131rmak ve otomatikle\u015ftirmek i\u00e7in GitHub Actions ve AWS’nin g\u00fcc\u00fcnden yararlan\u0131n. Bu makale, React uygulaman\u0131z\u0131 GitHub Actions ve AWS’yi kullanarak otomatik olarak nas\u0131l yay\u0131nlayaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayacak ve geli\u015fmi\u015f teknikleri ele alacakt\u0131r. \u00d6\u011frenme yol haritan\u0131zda ilerledik\u00e7e, daha karma\u015f\u0131k da\u011f\u0131t\u0131m senaryolar\u0131n\u0131 kolayl\u0131kla y\u00f6netebileceksiniz.<\/p>\n

React, GitHub Actions ve AWS: Temel Kavramlar<\/h2>\n

Bu rehberde, React uygulamas\u0131n\u0131 otomatik olarak yay\u0131nlamak i\u00e7in \u00fc\u00e7 temel teknolojiyi birle\u015ftirece\u011fiz. \u00d6ncelikle, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in kullan\u0131lan pop\u00fcler bir JavaScript k\u00fct\u00fcphanesi olan React’i tan\u0131yal\u0131m. Ard\u0131ndan, otomasyon i\u015flerimizi halletmek i\u00e7in kulland\u0131\u011f\u0131m\u0131z GitHub Actions’\u0131 ve son olarak da bulut altyap\u0131m\u0131z\u0131 sa\u011flayan AWS’yi inceleyece\u011fiz.<\/p>\n

React<\/strong>, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in bile\u015fen tabanl\u0131 bir yakla\u015f\u0131m sunar. Karma\u015f\u0131k uygulamalar\u0131 daha y\u00f6netilebilir par\u00e7alara ay\u0131rmam\u0131z\u0131 sa\u011flar ve kod tekrar\u0131n\u0131 azalt\u0131r. Bir React uygulamas\u0131, genellikle bir dizi bile\u015fenden olu\u015fur ve bu bile\u015fenler, veri ve olaylarla etkile\u015fim halindedir. Bu bile\u015fenler, JavaScript, HTML ve CSS kullan\u0131larak olu\u015fturulur.<\/p>\n

GitHub Actions<\/strong>, kodunuzu GitHub’da otomatikle\u015ftirmenizi sa\u011flayan bir CI\/CD (S\u00fcrekli Entegrasyon\/S\u00fcrekli Da\u011f\u0131t\u0131m) platformudur. Kodunuz bir depoya g\u00f6nderildi\u011finde, otomatik olarak belirli g\u00f6revleri yerine getirir. Bu g\u00f6revler, kodunuzun derlenmesini, test edilmesini ve yay\u0131nlanmas\u0131n\u0131 i\u00e7erebilir. GitHub Actions, i\u015f ak\u0131\u015flar\u0131n\u0131 (workflows) tan\u0131mlamak i\u00e7in YAML dosyalar\u0131 kullan\u0131r, bu sayede \u00f6zelle\u015ftirilebilir ve tekrar kullan\u0131labilir i\u015f ak\u0131\u015flar\u0131 olu\u015fturabilirsiniz.<\/p>\n

Amazon Web Services (AWS)<\/strong>, bulut tabanl\u0131 \u00e7e\u015fitli hizmetler sunan bir platformdur. Uygulaman\u0131z\u0131 bar\u0131nd\u0131rmak, veri depolamak ve di\u011fer bir\u00e7ok g\u00f6revi ger\u00e7ekle\u015ftirmek i\u00e7in AWS hizmetlerini kullanabiliriz. Bu makalede, AWS S3 (Simple Storage Service) ve AWS CloudFront (bir CDN hizmeti) kullanaca\u011f\u0131z.<\/p>\n

GitHub Reposunuzun Haz\u0131rlanmas\u0131: Ad\u0131m Ad\u0131m K\u0131lavuz<\/h2>\n

\u00d6ncelikle, GitHub deponuza ihtiyac\u0131n\u0131z olacak. E\u011fer zaten bir deponuz yoksa, yeni bir depo olu\u015fturun ve React projenizi bu depoya y\u00fckleyin. Projenizin package.json<\/code> dosyas\u0131nda, uygulaman\u0131z\u0131 olu\u015fturmak ve yay\u0131nlamak i\u00e7in gerekli komutlar bulunmal\u0131d\u0131r. Bu komutlar genellikle npm run build<\/code> (veya yarn build<\/code>) gibi komutlard\u0131r. Bu komut, uygulaman\u0131z\u0131 olu\u015fturur ve genellikle build<\/code> adl\u0131 bir klas\u00f6r i\u00e7inde yay\u0131nlanmaya haz\u0131r dosyalar\u0131 olu\u015fturur. Ayr\u0131ca, AWS’ye eri\u015fim sa\u011flamak i\u00e7in gerekli olan AWS kimlik bilgileri deponuza eklenmelidir. Bu bilgiler genellikle aws_access_key_id<\/code>, aws_secret_access_key<\/code> ve aws_region<\/code> gibi de\u011fi\u015fkenler olarak depolan\u0131r ve GitHub Secrets kullanarak g\u00fcvenli bir \u015fekilde saklan\u0131r.<\/p>\n

Sonraki ad\u0131mda, GitHub Actions i\u015f ak\u0131\u015f\u0131n\u0131z\u0131 tan\u0131mlayaca\u011f\u0131n\u0131z .github\/workflows<\/code> klas\u00f6r\u00fcn\u00fc olu\u015fturman\u0131z gerekir. Bu klas\u00f6r\u00fcn i\u00e7ine, deploy.yml<\/code> gibi bir dosya ekleyin ve a\u015fa\u011f\u0131daki YAML kodunu ekleyin:<\/p>\n

name: Deploy to AWS S3\n\non:\n  push:\n    branches:\n      - main # Ana dal\u0131n\u0131z\u0131n ad\u0131\n\njobs:\n  deploy:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout code\n        uses: actions\/checkout@v3\n\n      - name: Setup Node.js\n        uses: actions\/setup-node@v3\n        with:\n          node-version: 16 # Kulland\u0131\u011f\u0131n\u0131z Node.js s\u00fcr\u00fcm\u00fc\n\n      - name: Install dependencies\n        run: npm install\n\n      - name: Build the React app\n        run: npm run build\n\n      - name: Configure AWS credentials\n        uses: aws-actions\/configure-aws-credentials@v1\n        with:\n          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}\n          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}\n          aws-region: ${{ secrets.AWS_REGION }}\n\n      - name: Deploy to AWS S3\n        run: aws s3 sync .\/build s3:\/\/your-s3-bucket-name --delete<\/pre>\n
<\/code><\/p>\n
Bu kodda, your-s3-bucket-name<\/code> yerine kendi S3 kovas\u0131n\u0131n ad\u0131n\u0131 yazman\u0131z gerekir.  AWS kimlik bilgilerinizi de GitHub Secrets'te AWS_ACCESS_KEY_ID<\/code>, AWS_SECRET_ACCESS_KEY<\/code> ve AWS_REGION<\/code> olarak tan\u0131mlaman\u0131z gerekmektedir.  Bu, kimlik bilgilerinizin kodunuzda a\u00e7\u0131k\u00e7a g\u00f6r\u00fcnmesini \u00f6nleyerek g\u00fcvenli\u011fi sa\u011flar.  Daha fazla bilgi i\u00e7in Fatih Soysal'\u0131n<\/a> yaz\u0131lar\u0131n\u0131 inceleyebilirsiniz.<\/p>\n
AWS S3 ve CloudFront Entegrasyonu: Performans\u0131 Art\u0131rmak<\/h2>\n
Uygulaman\u0131z\u0131 S3'e yay\u0131nlad\u0131ktan sonra, performans\u0131 art\u0131rmak ve k\u00fcresel eri\u015fimi sa\u011flamak i\u00e7in AWS CloudFront'u kullanabilirsiniz.  CloudFront, bir i\u00e7erik da\u011f\u0131t\u0131m a\u011f\u0131 (CDN) hizmetidir ve i\u00e7eriklerinizi d\u00fcnyan\u0131n d\u00f6rt bir yan\u0131ndaki sunuculara da\u011f\u0131tarak kullan\u0131c\u0131lar\u0131n\u0131za daha h\u0131zl\u0131 y\u00fckleme s\u00fcreleri sa\u011flar.  CloudFront'u S3 kovas\u0131na ba\u011flamak i\u00e7in, AWS konsolunda CloudFront da\u011f\u0131t\u0131m\u0131n\u0131z\u0131 olu\u015ftururken S3 kovas\u0131n\u0131 kaynak olarak se\u00e7meniz yeterlidir.<\/p>\n
CloudFront'un kullan\u0131m\u0131, \u00f6zellikle b\u00fcy\u00fck ve statik dosyalar i\u00e7eren web uygulamalar\u0131 i\u00e7in \u00f6nemli bir performans art\u0131\u015f\u0131 sa\u011flar.  Kullan\u0131c\u0131lar, kendi b\u00f6lgelerine en yak\u0131n sunuculardan i\u00e7eri\u011fe eri\u015firler, bu da indirme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.  Ayr\u0131ca, CloudFront, g\u00fcvenlik \u00f6zellikleri ve \u00f6zelle\u015ftirilebilir davran\u0131\u015flar sunar.  \u00d6rne\u011fin, \u00f6zel bir etki alan\u0131 kullanabilir ve HTTP'den HTTPS'ye otomatik y\u00f6nlendirme gibi ek g\u00fcvenlik katmanlar\u0131 ekleyebilirsiniz.<\/p>\n
\u00d6rne\u011fin, bir e-ticaret uygulamas\u0131 i\u00e7in, CloudFront, \u00fcr\u00fcn resimleri ve di\u011fer statik dosyalar\u0131n h\u0131zl\u0131 bir \u015fekilde y\u00fcklenmesini sa\u011flayarak kullan\u0131c\u0131 deneyimini iyile\u015ftirir.  Bir haber sitesi i\u00e7in, CloudFront, haber i\u00e7eriklerinin farkl\u0131 konumlardaki kullan\u0131c\u0131lara h\u0131zl\u0131 bir \u015fekilde ula\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n
\u0130leri D\u00fczey Teknikler: \u00d6zel Durumlar ve Optimizasyon<\/h2>\n
Daha geli\u015fmi\u015f senaryolar i\u00e7in, a\u015fa\u011f\u0131daki teknikleri d\u00fc\u015f\u00fcnebilirsiniz:<\/p>\n
Otomatik Geri D\u00f6n\u00fc\u015f\u00fcm (Rollback):<\/h3>\n
Yay\u0131nlama s\u00fcrecinde hata olu\u015fmas\u0131 durumunda, otomatik geri d\u00f6n\u00fc\u015f\u00fcm mekanizmas\u0131 uygulamak olduk\u00e7a \u00f6nemlidir.  Bu, \u00f6nceki ba\u015far\u0131l\u0131 s\u00fcr\u00fcm\u00fc otomatik olarak geri y\u00fcklemenizi sa\u011flar. GitHub Actions'ta, bu i\u015flem, bir hata durumunda belirli ad\u0131mlar\u0131n \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131yla sa\u011flanabilir.<\/p>\n
Docker Kullan\u0131m\u0131:<\/h3>\n
Uygulaman\u0131z\u0131 Docker konteynerinde paketleyerek, tutarl\u0131 bir \u00e7al\u0131\u015fma ortam\u0131 sa\u011flayabilir ve farkl\u0131 ortamlar aras\u0131nda kolay ta\u015f\u0131nabilirlik elde edebilirsiniz.  Bu, geli\u015ftirme, test ve \u00fcretim ortamlar\u0131 aras\u0131nda tutarl\u0131l\u0131\u011f\u0131 sa\u011flar ve olas\u0131 uyumluluk sorunlar\u0131n\u0131 \u00f6nler.  AWS Elastic Container Service (ECS) veya Elastic Kubernetes Service (EKS) gibi hizmetlerle Docker g\u00f6r\u00fcnt\u00fclerini \u00e7al\u0131\u015ft\u0131rabilirsiniz.<\/p>\n
HTTPS ve G\u00fcvenlik:<\/h3>\n
Dikkat!<\/strong> Uygulaman\u0131z\u0131n g\u00fcvenli\u011fini sa\u011flamak i\u00e7in, her zaman HTTPS kullan\u0131n.  AWS Certificate Manager (ACM) ile \u00fccretsiz SSL sertifikalar\u0131 alabilirsiniz.<\/div>\n<\/p>\n
Uygulaman\u0131z\u0131n g\u00fcvenli\u011fini sa\u011flamak i\u00e7in, AWS WAF (Web Application Firewall) gibi g\u00fcvenlik hizmetlerini kullanarak g\u00fcvenlik duvar\u0131 olu\u015fturabilirsiniz.  Ayr\u0131ca, d\u00fczenli g\u00fcvenlik taramalar\u0131 yaparak olas\u0131 g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 tespit etmeniz ve d\u00fczeltmeniz \u00f6nerilir.<\/p>\n
Ger\u00e7ek D\u00fcnya Senaryolar\u0131 ve Vaka \u00c7al\u0131\u015fmalar\u0131<\/h2>\n
Bir e-ticaret platformu d\u00fc\u015f\u00fcn\u00fcn: Her yeni \u00fcr\u00fcn eklemesi, fiyat g\u00fcncellemesi veya tasar\u0131m de\u011fi\u015fikli\u011fi, uygulaman\u0131n yeniden yay\u0131nlanmas\u0131n\u0131 gerektirir. Manuel yay\u0131nlama i\u015flemi zaman al\u0131c\u0131 ve hata yapmaya m\u00fcsaittir.  GitHub Actions ve AWS ile bu i\u015flem otomatikle\u015ftirilir ve her g\u00fcncelleme h\u0131zl\u0131 ve g\u00fcvenilir bir \u015fekilde yay\u0131nlan\u0131r.  Bu, m\u00fc\u015fteri deneyimini iyile\u015ftirir ve i\u015fletmenin daha \u00e7evik olmas\u0131n\u0131 sa\u011flar.<\/p>\n
Bir ba\u015fka \u00f6rnek olarak, s\u00fcrekli g\u00fcncellenen bir haber sitesini ele alal\u0131m.  Yeni haberler eklendi\u011finde,  otomatik yay\u0131nlama sistemi, i\u00e7eri\u011fi an\u0131nda kullan\u0131c\u0131larla payla\u015f\u0131r.  Bu, rekabet avantaj\u0131 sa\u011flar ve kullan\u0131c\u0131lara en g\u00fcncel bilgileri h\u0131zl\u0131 bir \u015fekilde sunar.  Manuel yay\u0131nlama, haberlerin yay\u0131nlanmas\u0131nda gecikmelere yol a\u00e7abilir ve bu da \u00f6nemli haberlerin zaman\u0131nda yay\u0131nlanmas\u0131n\u0131 engelleyebilir.<\/p>\n
\u00d6\u011frenme Yol Haritas\u0131<\/h2>\n
Bu konuyu \u00f6\u011frenmek i\u00e7in a\u015fa\u011f\u0131daki yol haritas\u0131n\u0131 takip edebilirsiniz:<\/p>\n
Yeni Ba\u015flayan:<\/h3>\n
React temel bilgilerini \u00f6\u011frenin.  GitHub ve AWS hesaplar\u0131 olu\u015fturun.  Basit bir React uygulamas\u0131n\u0131 olu\u015fturun ve GitHub'a y\u00fckleyin.  Bu makaledeki temel ad\u0131mlar\u0131 takip ederek, uygulaman\u0131z\u0131 S3'e yay\u0131nlay\u0131n.<\/p>\n
Orta Seviye:<\/h3>\n
GitHub Actions'\u0131 daha detayl\u0131 \u00f6\u011frenin.  YAML dosyalar\u0131n\u0131 kullanarak karma\u015f\u0131k i\u015f ak\u0131\u015flar\u0131 olu\u015fturun.  AWS CloudFront'u entegre ederek performans\u0131 art\u0131r\u0131n.  Otomatik geri d\u00f6n\u00fc\u015f\u00fcm (rollback) mekanizmas\u0131 olu\u015fturun.<\/p>\n
\u0130leri Seviye:<\/h3>\n
Docker kullanarak uygulaman\u0131z\u0131 konteynerle\u015ftirin ve AWS ECS veya EKS \u00fczerinde \u00e7al\u0131\u015ft\u0131r\u0131n.  AWS WAF gibi g\u00fcvenlik hizmetlerini kullanarak uygulaman\u0131z\u0131 koruyun.  Karma\u015f\u0131k da\u011f\u0131t\u0131m senaryolar\u0131n\u0131 y\u00f6netin ve performans optimizasyonu tekniklerini uygulay\u0131n.<\/p>\n
Sonu\u00e7<\/h2>\n
GitHub Actions ve AWS'yi kullanarak React uygulaman\u0131z\u0131 otomatik olarak yay\u0131nlamak, geli\u015ftirme s\u00fcrecini \u00f6nemli \u00f6l\u00e7\u00fcde h\u0131zland\u0131r\u0131r, tutarl\u0131l\u0131\u011f\u0131 sa\u011flar ve hata olas\u0131l\u0131\u011f\u0131n\u0131 azalt\u0131r.  Bu makalede, temel ad\u0131mlardan ileri d\u00fczey tekniklere kadar geni\u015f bir yelpazede bilgi vermeye \u00e7al\u0131\u015ft\u0131k.  Umar\u0131z bu rehber, React uygulaman\u0131z\u0131 otomatik olarak yay\u0131nlama yolculu\u011funuzda size yard\u0131mc\u0131 olur.<\/p>\n
S\u0131k\u00e7a Sorulan Sorular<\/h3>\n