<\/div>\n

Merhaba,<\/p>\n

Bir \u00f6nceki Azure\u2019da Entity Framework Core \u0130le Migration \u0130\u015flemleri<\/a> ba\u015fl\u0131kl\u0131 makalemizde Azure \u00fczerinde Entity Framework Core ile migrate i\u015flemlerinin nas\u0131l yap\u0131ld\u0131\u011f\u0131n\u0131 \u00f6rnek bir API \u00fczerinden incelemi\u015f bulunmaktay\u0131z. Bu i\u00e7eri\u011fimizde ise \u00e7a\u011fda\u015f UI teknolojilerinden biri olan Angular mimarisiyle geli\u015ftirilmi\u015f bir web uygulamas\u0131n\u0131n Azure’da nas\u0131l deploy edildi\u011fini inceleyece\u011fiz.<\/p>\n

Gereksinimler<\/h3>\n
Her\u015feyden \u00f6nce hali haz\u0131rda bir Angular projesi olu\u015fturunuz. Bunun yan\u0131nda Visual Studio Code edit\u00f6r\u00fcn\u00fc edininiz ve ilgili edit\u00f6r \u00fczerinden Azure bulutu ile gerekli ba\u011flant\u0131 ve deploy i\u015flemlerinin sorumlulu\u011funu \u00fcstlenecek olan “Azure App Service<\/a>” eklentisini y\u00fckleyiniz.
\n $\"Angular$ <\/a>
\nArd\u0131ndan ilgili eklenti \u00fczerinden Azure hesab\u0131na “Sign in to Azure” diyerek giri\u015f yap\u0131n\u0131z.
\n $\"Angular$ <\/a>
\nGiri\u015f talebinde bulunduktan sonra a\u00e7\u0131lan internet taray\u0131c\u0131s\u0131 arac\u0131l\u0131\u011f\u0131yla Microsoft hesab\u0131n\u0131z \u00fczerinden Azure’a giri\u015f yapman\u0131z yeterli olacakt\u0131r.<\/p>\n
\u015eimdi bu \u00f6n i\u015flemler neticesindeki haz\u0131rbulunu\u015fluluk akabinde Azure \u00fczerinde Angular uygulamas\u0131n\u0131 yay\u0131nlayabilmek i\u00e7in bir Web Uygulamas\u0131 olu\u015fturmaya ge\u00e7ebiliriz.<\/p>\n

Angular Uygulamas\u0131 \u0130\u00e7in Azure’da Web Uygulamas\u0131 Olu\u015fturma<\/h3>\n
\u015eu ana kadar Azure ile ilgili klavyeye alm\u0131\u015f oldu\u011fumuz t\u00fcm makalelerimizde portal.azure.com<\/a> adresi \u00fczerinden i\u015flemlerimizi ger\u00e7ekle\u015ftirmi\u015f bulunmaktay\u0131z. Yine ayn\u0131 yerden yola devam edece\u011fiz \ud83d\ude42 \u0130lgili adrese girdikten sonra portal \u00fczerindeki “Azure hizmetleri” k\u0131sm\u0131ndan “Uygulama Hizmetleri” sekmesine t\u0131klay\u0131n\u0131z.
\n $\"Angular$ <\/a><\/p>\n
A\u00e7\u0131lan sayfa \u00fczerinden bir web uygulamas\u0131 olu\u015fturabilmek i\u00e7in “Ekle” butonuna t\u0131klay\u0131n\u0131z.
\n $\"Angular$ <\/a><\/p>\n
Ard\u0131ndan gelen sayfadaki alanlar\u0131 uygun de\u011ferlerle doldurunuz. Buradaki alanlar\u0131n niteliklerine dair isimleri yeterince a\u00e7\u0131klay\u0131c\u0131 olmalar\u0131ndan dolay\u0131 gerekli izahatlerin detayl\u0131 yap\u0131lma ihtiyac\u0131 hissedilmemi\u015ftir.
\n $\"Angular$ <\/a><\/p>\n
Velhas\u0131l ilgili alanlar\u0131 doldurduktan sonra, \u00f6nce “G\u00f6zden ge\u00e7ir + olu\u015ftur” butonuna ard\u0131ndan gerekli inceleme yap\u0131ld\u0131ktan sonrada “Olu\u015ftur” butonuna t\u0131klay\u0131n\u0131z. Bu i\u015flem neticesinde Angular projesini yay\u0131nlayaca\u011f\u0131m\u0131z web uygulamas\u0131n\u0131 olu\u015fturmu\u015f bulunmaktay\u0131z.<\/p>\n

Angular Uygulamas\u0131n\u0131 Deploy Etme<\/h3>\n

Olu\u015fturulan Angular uygulamas\u0131n\u0131 Azure’da deploy edebilmek i\u00e7in \u00f6ncelikle “build” edilmesi gerekmektedir.<\/p>\n

\r\nng build\r\n<\/pre>\n<\/a><\/p>\n
Build i\u015fleminin neticesinde uygulaman\u0131n ana dizinine “dist\/[projename]” klas\u00f6r\u00fc eklenmi\u015f olacakt\u0131r.
\n<\/a>
\nYukar\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde oldu\u011fu gibi ilgili klas\u00f6re sa\u011f t\u0131klayarak “Deploy to Web App” sekmesine t\u0131klay\u0131n\u0131z.
\n<\/a>
\nBu i\u015flem akabinde kar\u015f\u0131m\u0131za Azure hesab\u0131m\u0131zda bulunan t\u00fcm web uygulamalar\u0131 gelecektir. Burada Angular uygulamas\u0131 i\u00e7in olu\u015fturdu\u011fumuz web uygulamas\u0131 hesab\u0131n\u0131 se\u00e7iyoruz ve enter tu\u015funa bas\u0131yoruz.
\n<\/a>
\nEvet… G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere deploy s\u00fcreci ba\u015flam\u0131\u015f bulunmaktad\u0131r. Eee art\u0131k bu s\u00fcrecin bitmesi i\u00e7in gerekli sabr\u0131 g\u00f6sterip, beklememiz gerekmektedir \ud83d\ude42<\/p>\n
Ve sabr\u0131n sonu selamet \ud83d\ude42
\nhttps:\/\/azureprojesi.azurewebsites.net\/personel<\/a> adresine g\u00f6z atarsan\u0131z e\u011fer Angular uygulamas\u0131n\u0131n deploy edildi\u011fini g\u00f6receksiniz.<\/p>\n
“The resource you are looking for has been removed, had its name changed, or is temporarily unavailable” Hatas\u0131 ve \u00c7\u00f6z\u00fcm\u00fc<\/h3>\nAngular uygulamas\u0131n\u0131 deploy ettikten sonra kayna\u011fa dair “The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.<\/em>” olas\u0131 hatas\u0131n\u0131 alabilirsiniz. \u0130lgili hatan\u0131n \u00e7\u00f6z\u00fcm\u00fc i\u00e7in a\u015fa\u011f\u0131daki gibi t\u00fcm istekleri https protokol\u00fcne y\u00f6nlendirecek kodlar\u0131 bar\u0131nd\u0131ran bir web.config dosyas\u0131 tasarlaman\u0131z gerekmektedir.<\/p>\n
\r\n<?xml version="1.0" encoding="UTF-8"?>\r\n<configuration>\r\n    <system.webServer>\r\n        <rewrite>\r\n            <rules>\r\n                <clear \/>\r\n                <rule name="Redirect to https" stopProcessing="true">\r\n                    <match url="(.*)" \/>\r\n                    <conditions>\r\n                        <add input="{HTTPS}" pattern="off" ignoreCase="true" \/>\r\n                    <\/conditions>\r\n                    <action type="Redirect" url="https:\/\/{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" \/>\r\n                <\/rule>\r\n                <rule name="AngularJS Routes" stopProcessing="true">\r\n                    <match url=".*" \/>\r\n                    <conditions logicalGrouping="MatchAll">\r\n                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" \/>\r\n                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" \/>\r\n                    <\/conditions>\r\n                    <action type="Rewrite" url="\/" \/>\r\n                <\/rule>\r\n            <\/rules>\r\n        <\/rewrite>\r\n    <\/system.webServer>\r\n<\/configuration>\r\n<\/pre>\nTasarlad\u0131\u011f\u0131n\u0131z ilgili dosyay\u0131 build edilmi\u015f Angular \u00e7\u0131kt\u0131s\u0131n\u0131n bulundu\u011fu dizine yerle\u015ftirip, tekrar deploy ediniz.<\/p>\n
T\u00fcm bu i\u015flemler neticesinde Angular uygulamas\u0131n\u0131 ba\u015far\u0131l\u0131 bir \u015fekilde deploy etmi\u015f ve yay\u0131na alm\u0131\u015f bulunmaktay\u0131z.<\/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, Bir \u00f6nceki Azure\u2019da Entity Framework Core \u0130le Migration \u0130\u015flemleri ba\u015fl\u0131kl\u0131 makalemizde Azure \u00fczerinde Entity Framework Core ile migrate i\u015flemlerinin nas\u0131l yap\u0131ld\u0131\u011f\u0131n\u0131 \u00f6rnek bir API \u00fczerinden incelemi\u015f bulunmaktay\u0131z. Bu i\u00e7eri\u011fimizde ise \u00e7a\u011fda\u015f UI teknolojilerinden...<\/p>\n","protected":false},"author":1,"featured_media":13125,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2420,2144,2415,2599,2756,3018,3121],"tags":[3128,3130,3129,3132,3131,3127],"class_list":["post-13195","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-angular-4","category-angular-5","category-angular-6","category-angular-7","category-angular-8","category-azure","tag-angular-azure","tag-angular-build","tag-angular-deploy","tag-angular-uygulamasini-azureda-deploy-etme","tag-azure-angular-deploy","tag-azure-app-service"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/13195","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=13195"}],"version-history":[{"count":35,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/13195\/revisions"}],"predecessor-version":[{"id":13244,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/13195\/revisions\/13244"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/13125"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=13195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=13195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=13195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}