<\/div>\n

Merhaba,<\/p>\n

Bu i\u00e7eri\u011fimizde, Angular mimarisinde geli\u015ftirilmi\u015f bir uygulamay\u0131 GitHub e\u015fli\u011finde AWS Amplify’a deploy etmeyi inceleyece\u011fiz. Tabi bunun i\u00e7in Amplify ortam\u0131n\u0131n nas\u0131l kurulaca\u011f\u0131n\u0131, gerekli bar\u0131nd\u0131rma ve kimlik do\u011frulama i\u015flemlerinin nas\u0131l yap\u0131land\u0131r\u0131laca\u011f\u0131n\u0131 ve Amplify’\u0131n altyap\u0131s\u0131ndan yararlanarak y\u0131ld\u0131r\u0131m h\u0131z\u0131nda performans art\u0131\u015f\u0131n\u0131n ve \u00f6l\u00e7eklenebilirli\u011fin nas\u0131l kurgulanaca\u011f\u0131n\u0131 \u00f6\u011frenece\u011fiz. O halde fazla vakit kaybetmeksizin hadi ba\u015flayal\u0131m…<\/p>\n

AWS Amplify Nedir?<\/h4>\n

AWS Amplify, Amazon Web Services(AWS) taraf\u0131ndan sunulan, cloud tabanl\u0131 uygulamalar\u0131n geli\u015ftirilmesini ve da\u011f\u0131t\u0131m\u0131n\u0131 kolayla\u015ft\u0131ran bir ara\u00e7 seti ve hizmet platformudur. Geli\u015ftiricilerin, web ve mobil uygulamalar i\u00e7in kimlik do\u011frulama, depolama, analiz, push bildirimi vs gibi benzeri pek \u00e7ok \u00f6zelli\u011fi kolayca entegre etmesine olanak tan\u0131maktad\u0131r.<\/p>\n

AWS Amplify \u00f6zellikle -modern uygulama geli\u015ftirme-<\/em> pratiklerini benimseyenler i\u00e7in olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r. Tabi nedir bu pratikler?<\/em><\/strong> diye soracaks\u0131n\u0131z hakl\u0131 olarak… Bunlar \u00f6z\u00fcnde belli ba\u015fl\u0131 prensiplerin ve yakla\u015f\u0131mlar\u0131n kabul\u00fcd\u00fcr diyebiliriz. Misal olarak; uygulamalar\u0131n fiziksel sunuculara yahut manuel y\u00f6netilen ortamlara ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 olmaks\u0131z\u0131n cloud tabanl\u0131 geli\u015ftirilmesi ve veritaban\u0131, kimlik do\u011frulama, dosya depolama vs. gibi gereken altyap\u0131lar\u0131n ve servislerin y\u00f6netiminin b\u00fcy\u00fck \u00f6l\u00e7\u00fcde cloud sa\u011flay\u0131c\u0131lar\u0131 taraf\u0131ndan \u00fcstlenilmesi modern uygulama geli\u015ftirme prati\u011fidir diyebiliriz. Benzer mant\u0131kla, monolitik mimariler yerine microservice gibi distributed mimarilerin tasarlanmas\u0131 ve ihtiya\u00e7 noktalar\u0131nda serverless hizmetlerden istifade edilmesi de bir modern uygulama yakla\u015f\u0131m\u0131d\u0131r diyebiliriz. Ayr\u0131ca kodsal de\u011fi\u015fikliklerin oldu\u011fu durumlarda otomatik olarak testlerin \u00e7al\u0131\u015fmas\u0131 ve hatalar\u0131n tespit edilmesi ve ard\u0131ndan h\u0131zla \u00fcretim ortam\u0131na deploy i\u015flemlerinin ger\u00e7ekle\u015ftirilebilmesi i\u00e7in s\u00fcrece CI\/CD(Continuous Integration \/ Continuous Delivery) yakla\u015f\u0131mlar\u0131n\u0131n dahil edilmesi de modern yakla\u015f\u0131m\u0131n olmazsa olmaz\u0131d\u0131r diyebiliriz. T\u00fcm bunlar\u0131n d\u0131\u015f\u0131nda uygulamada g\u00f6zlemlenebilirlik ilkelerinin \u00f6nemsenmesi, \u00f6l\u00e7eklenebilir bir altyap\u0131n\u0131n tasarlanmas\u0131 ve Agile gibi organizasyonel yakla\u015f\u0131mlar\u0131n benimsenmesi de bu s\u00fcrecin bir par\u00e7as\u0131d\u0131r diyebiliriz.<\/p>\n

\u0130\u015fte t\u00fcm bu s\u00fcre\u00e7te AWS Amplify bizlere \u015fu konularda ciddi avantajlar sa\u011flamaktad\u0131r;<\/p>\n

\n
Kolay Entegrasyon<\/em><\/strong>
\nReact, Vue, Angular vs. gibi pop\u00fcler frontend ve mobil frameworklerle kolayca entegre olabilmekte ve \u00f6zellikle CLI ve k\u00fct\u00fcphaneler sayesinde de h\u0131zla yap\u0131land\u0131r\u0131labilmektedir.\n<\/li>\n
H\u0131zl\u0131 Kurulum ve Y\u00f6netim<\/em><\/strong>
\nCognito, API Gateway, S3, DynamoDB vs. gibi AWS servislerini tek \u00e7at\u0131 alt\u0131nda toplamakta ve y\u00f6netebilmektedir. Ayr\u0131ca backend servislerini birka\u00e7 komutla kurup g\u00fcncelleyerek h\u0131zl\u0131ca prototip olu\u015fturabilmek ve production ortam\u0131na ge\u00e7i\u015f sa\u011flayabilmektedir.\n<\/li>\n
Otomatik Deploy (CI\/CD)<\/em><\/strong>
\nAWS Amplify, geli\u015ftirme a\u015famas\u0131nda CI\/CD s\u00fcre\u00e7lerine dair otomasyon ak\u0131\u015f\u0131 sunmakta ve kod de\u011fi\u015fikliklerinde uygulamalar\u0131n otomatik olarak yeniden yap\u0131land\u0131r\u0131larak deploy edilmesini sa\u011flamaktad\u0131r.\n<\/li>\n
\u00d6l\u00e7eklenebilirlik ve G\u00fcvenlik<\/em><\/strong>
\nAWS altyap\u0131s\u0131n\u0131 kulland\u0131\u011f\u0131 i\u00e7in uygulamalar\u0131n anl\u0131k trafik art\u0131\u015flar\u0131na kar\u015f\u0131 y\u00fcksek g\u00fcvenlik standartlar\u0131yla korunmas\u0131 ve bunun yan\u0131nda otomatik olarak \u00f6l\u00e7eklendirilmesi m\u00fcmk\u00fcnd\u00fcr.\n<\/li>\n<\/ul>\n
\u00d6zetle AWS Amplify, modern web ve mobil uygulamalar\u0131 h\u0131zl\u0131ca geli\u015ftirmek, \u00f6l\u00e7eklendirmek, g\u00fcvenli hale getirmek ve tek bir platform \u00fczerinden y\u00f6netmek isteyen geli\u015ftiriciler i\u00e7in tasarlanm\u0131\u015f bir \u00e7\u00f6z\u00fcmd\u00fcr diyebiliriz.<\/p>\n
Ba\u015flarken<\/h4>\n
\u015eimdi i\u00e7erik boyunca AWS Amplify \u00fczerinde incelemede bulunurken kullanabilmek i\u00e7in halihaz\u0131rda bir Angular uygulamas\u0131 olu\u015ftural\u0131m ve bunu GitHub’a y\u00fckleyelim. (GitHub projesi i\u00e7in bknz : AWS.Amplify.Example<\/a>)
\n<\/span><\/p>\n
AWS Amplify’\u0131 Yap\u0131land\u0131ral\u0131m<\/h4>\n
Art\u0131k haz\u0131r oldu\u011fumuza g\u00f6re Angular uygulamam\u0131z\u0131 host edebilmek i\u00e7in AWS Aplify’\u0131 yap\u0131land\u0131rmam\u0131z gerekecektir. Bunun i\u00e7in AWS Console \u00fczerinden AWS Amplify’\u0131 a\u015fa\u011f\u0131daki g\u00f6rseldeki gibi arat\u0131p, a\u00e7al\u0131m. $\"Angular$ <\/a>\u0130lgili servise t\u0131klad\u0131\u011f\u0131m\u0131zda a\u015fa\u011f\u0131daki gibi bir a\u00e7\u0131l\u0131\u015f sayfas\u0131 bizleri kar\u015f\u0131layacakt\u0131r. $\"Angular$ <\/a>Burada Deploy an app<\/em> butonuna t\u0131klayarak devam edelim.<\/p>\n
Tabi yap\u0131lacak \u00e7al\u0131\u015fmadan \u00f6nce taraf\u0131m\u0131zca kullan\u0131lan kod deposunun ilgili servise ba\u011flanmas\u0131 gerekecektir. $\"Angular$ <\/a>G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere AWS Amplify’da GitHub d\u0131\u015f\u0131nda bir\u00e7ok platforma ba\u011flanabilmek s\u00f6z konusudur. Bizler GitHub’\u0131 se\u00e7erek yolumuza devam edelim.<\/p>\n
Tabi GitHub hesab\u0131yla ilgili AWS Amplify’\u0131n yetkilendirilmesi gerekecektir. Burada bir pencere \u00fczerinden bu i\u015flemleri hallettikten sonra art\u0131k \u00fczerinde \u00e7al\u0131\u015f\u0131lacak repo’yu a\u015fa\u011f\u0131daki g\u00f6rseldeki gibi se\u00e7elim ve ilerleyelim. $\"Angular$ <\/a>Sonraki ekranda ise derleme talimatlar\u0131n\u0131n yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6rece\u011fiz. $\"Angular$ <\/a>Burada talimatlar\u0131 istek do\u011frultusunda daha net bir \u015fekilde g\u00f6rebilmek i\u00e7in Edit YML File<\/em> butonuna t\u0131klayabilir ve hatta isterseniz burada kendinize g\u00f6re d\u00fczenlemeler de yapabilirsiniz. $\"Angular$ <\/a><\/p>\n
\n
\r\nversion: 1\r\nfrontend:\r\n phases:\r\n preBuild:\r\n commands:\r\n - npm ci --cache .npm --prefer-offline\r\n build:\r\n commands:\r\n - npm run build\r\n artifacts:\r\n baseDirectory: dist\/aws.amplify.example\r\n files:\r\n - '**\/*'\r\n cache:\r\n paths:\r\n - .npm\/**\/*\r\n\r\n<\/pre>\n<\/div>\n
Ayr\u0131ca bu kodu amplify.yml<\/em> ad\u0131nda bir dosya ile GitHub reposuna ekleyerek, hem Amplify’da ki kodu ge\u00e7ersiz k\u0131labilir hem de kaynak kod denetim s\u00fcre\u00e7lerinde derleme komutlar\u0131n\u0131 da daha s\u00fcrd\u00fcr\u00fclebilir k\u0131labilirsiniz. Ve biryandan da AWS Amplify taraf\u0131ndan bu dosyan\u0131n otomatik olarak al\u0131nmas\u0131n\u0131 sa\u011flayabilirsiniz.<\/p>\n
\nDikkat!
\nKulland\u0131\u011f\u0131m Angular s\u00fcr\u00fcm\u00fcnden kaynakl\u0131 deploy s\u00fcrecinde ald\u0131\u011f\u0131m t\u00fcrl\u00fc s\u00fcr\u00fcm hatalar\u0131n\u0131n \u00e7\u00f6z\u00fcm\u00fcn\u00fc bu .yml dosyas\u0131n\u0131n i\u00e7eri\u011fini a\u015fa\u011f\u0131daki gibi de\u011fi\u015ftirerek ger\u00e7ekle\u015ftirmi\u015f bulunuyorum.<\/p>\n
\r\nversion: 1\r\nfrontend:\r\n phases:\r\n preBuild:\r\n commands:\r\n - nvm install 18.19.0\r\n - nvm use 18.19.0\r\n - node -v\r\n - npm ci\r\n build:\r\n commands:\r\n - npm run build\r\n artifacts:\r\n baseDirectory: dist\/aws.amplify.example\/browser\r\n files:\r\n - '**\/*'\r\n cache:\r\n paths:\r\n - node_modules\/**\/*\r\n<\/pre>\n<\/div>\n
Nihai olarak Save and deploy<\/em> butonuna t\u0131klayal\u0131m ve uygulamay\u0131 deploy edelim… $\"Angular$ <\/a>Evet, g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere ilk deploy’u ba\u015far\u0131yla ger\u00e7ekle\u015ftirmi\u015f bulunuyoruz. $\"Angular$ <\/a>Hatta test etmek i\u00e7in Domain<\/em> alan\u0131ndaki linke t\u0131klayarak uygulamay\u0131 taray\u0131c\u0131da g\u00f6r\u00fcnt\u00fcleyebilirsiniz. $\"Angular$ <\/a>Benim yapt\u0131\u011f\u0131m \u00e7al\u0131\u015fma projesinde y\u00fcz tan\u0131ma i\u015flemini \u00f6rnek olarak ele ald\u0131\u011f\u0131m i\u00e7in b\u00f6yle bir i\u00e7eri\u011fin bizleri kar\u015f\u0131lamas\u0131 gayet do\u011fal. Burada m\u00fchim olan ba\u015far\u0131yla deploy i\u015fleminin ger\u00e7ekle\u015ftirildi\u011fini g\u00f6rmemiz. Art\u0131k, uygulama \u00fczerinde yap\u0131lan geli\u015ftirmeler neticesinde her commit’e kar\u015f\u0131l\u0131k AWS Amplify’da deploy otomatik olarak ba\u015flat\u0131lacak ve ba\u015far\u0131yla tamamland\u0131\u011f\u0131 taktirde yeni s\u00fcr\u00fcm production’a yans\u0131t\u0131lacakt\u0131r.<\/p>\n
\u00d6zel Domain Ad\u0131 Almak<\/h4>\n
AWS Amplify’da deploy edilmi\u015f uygulamalara haz\u0131r domain’ler yerine \u00f6zel adresler de belirleyebilmekteyiz. Bunun i\u00e7in ilgili uygulaman\u0131n ‘Hosting’ sekmesinden ‘Custom Domain’ men\u00fcs\u00fcne gelinmesi ve buradan da ‘Add domain’ butonuna t\u0131klanmas\u0131 yeterlidir. $\"Angular$ <\/a>Ard\u0131ndan a\u00e7\u0131lan ekranda istenilen domain’i yazarak, uygun oldu\u011fu taktirde \u00fccreti mukabilinde al\u0131p ilgili uygulamayla ili\u015fkilendirerek kullanabilirsiniz. $\"Angular$ <\/a><\/p>\n
CI\/CD<\/h4>\n
AWS Amplify’\u0131 tercih etmemizin as\u0131l amac\u0131 s\u00fcrekli da\u011f\u0131t\u0131m(continuous deployment)’d\u0131r. Yani \u00f6nceki sat\u0131rlarda da temas etti\u011fimiz gibi uygulaman\u0131n reposuna yeni bir push yap\u0131ld\u0131\u011f\u0131 taktirde provision-build-deploy s\u00fcrecinin otomatik olarak tetiklenmesini sa\u011flamakt\u0131r. B\u00f6ylece main branc’de olan de\u011fi\u015fiklikler herhangi bir insan m\u00fcdahalesine gerek duyulmaks\u0131z\u0131n m\u00fcmk\u00fcn olan en k\u0131sa s\u00fcrede deploy edilerek production’a yans\u0131t\u0131lmaktad\u0131r.<\/p>\n
Pull Requests Preview<\/h4>\n
AWS Amplify’da Pull Request Preview, bir pull request a\u00e7\u0131ld\u0131\u011f\u0131nda otomatik olarak uygulaman\u0131n bir \u00f6nizleme s\u00fcr\u00fcm\u00fcn\u00fc deploy eden bir \u00f6zelliktir. Bu \u00f6zellik sayesinde, geli\u015ftirme s\u00fcrecinde yap\u0131lan de\u011fi\u015fiklikler canl\u0131 ortama al\u0131nmadan \u00f6nce test edilebilir ve ekip \u00fcyeleri taraf\u0131ndan g\u00f6zden ge\u00e7irilebilir.<\/p>\n
Bu \u00f6zelli\u011fi kullanabilmek i\u00e7in main branch’in(master) yan\u0131nda bir branch daha olu\u015fturulmal\u0131 ve ard\u0131ndan uygulamadaki de\u011fi\u015fiklikler bu branch’e g\u00f6nderilmelidir. Misal olarak, bizler ‘preview’ isminde bir branch olu\u015fturdu\u011fumuzu varsay\u0131p, de\u011fi\u015fiklikleri bu branch’e push’larsak e\u011fer a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde oldu\u011fu gibi GitHub’da bu yeni branch’e gelen yeniliklerin oldu\u011funu s\u00f6yleyen bir uyar\u0131 g\u00f6rece\u011fiz. $\"Angular$ <\/a>Compare & pull request<\/em> butonuna t\u0131klay\u0131p ard\u0131ndan a\u015fa\u011f\u0131daki g\u00f6rselde oldu\u011fu gibi yeni bir pull request olu\u015fturursak, $\"Angular$ <\/a>yeni a\u00e7\u0131lan ekranda AWS Amplify Console Web Preview<\/em> uygulamas\u0131n\u0131 g\u00f6rece\u011fiz. $\"Angular$ <\/a>Uygulama i\u015flenirken bir yandan da AWS Amplify’a geri d\u00f6n\u00fcp branch’lere g\u00f6z atarsak e\u011fer test branch’inin de listelendi\u011fini g\u00f6rm\u00fc\u015f olaca\u011f\u0131z. $\"Angular$ <\/a>\u0130\u015fte bu kadar…<\/p>\n
T\u00fcm bunlar\u0131n d\u0131\u015f\u0131nda AWS Amplify, yaln\u0131zca static web uygulamalar\u0131n\u0131 bar\u0131nd\u0131rmaktan ziyade backend i\u015flemlerini de kar\u015f\u0131layabilmekte ve bir yandan da AWS Cognito<\/a> ile de authentication ger\u00e7ekle\u015ftirebilmektedir. Ayr\u0131ca unutulmamal\u0131d\u0131r ki; deploy etti\u011fimiz uygulamalar\u0131n k\u00fcresel olarak kullan\u0131labilir \u015fekilde CDN’lere otomatik olarak host edilmesini de sa\u011flayabilmektedir. Ve tabi ba\u015fka nice i\u015flemleri de…<\/p>\n
Nihai olarak;
\nAWS Amplify ile dakikalar i\u00e7erisinde bir Angular uygulamas\u0131n\u0131n nas\u0131l deploy edili\u011fini, main branch’e yeni bir de\u011fi\u015fiklik g\u00f6nderildi\u011finde otomatik bir \u015fekilde derleme i\u015fleminin nas\u0131l tetiklendi\u011fini ve uygulaman\u0131n yeni s\u00fcr\u00fcm\u00fcn\u00fcn zahmetsizce nas\u0131l yay\u0131nlanabildi\u011fini deneyimlemi\u015f bulunuyoruz. Bunlar\u0131n yan\u0131nda \u00f6zel domain y\u00f6netimi, pull request preview vs. gibi birka\u00e7 ba\u015fka \u00f6zelli\u011finde fark\u0131ndal\u0131\u011f\u0131n\u0131 olu\u015fturmu\u015f oluyoruz.<\/p>\n
\u0130htiya\u00e7 dahilinde veriminden istifade etmeniz \u00fcmidiyle… \ud83d\ude42<\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bu i\u00e7eri\u011fimizde, Angular mimarisinde geli\u015ftirilmi\u015f bir uygulamay\u0131 GitHub e\u015fli\u011finde AWS Amplify’a deploy etmeyi inceleyece\u011fiz. Tabi bunun i\u00e7in Amplify ortam\u0131n\u0131n nas\u0131l kurulaca\u011f\u0131n\u0131, gerekli bar\u0131nd\u0131rma ve kimlik do\u011frulama i\u015flemlerinin nas\u0131l yap\u0131land\u0131r\u0131laca\u011f\u0131n\u0131 ve Amplify’\u0131n altyap\u0131s\u0131ndan yararlanarak...<\/p>\n","protected":false},"author":1,"featured_media":27473,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2420,4730],"tags":[5205,5204],"class_list":["post-27448","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-aws","tag-aws-amplify","tag-aws-amplify-nedir"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27448","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=27448"}],"version-history":[{"count":10,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27448\/revisions"}],"predecessor-version":[{"id":27474,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27448\/revisions\/27474"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/27473"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=27448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=27448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=27448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}