Angular Uygulamasını Azure’da Deploy Etme

Merhaba,

Bir önceki Azure’da Entity Framework Core İle Migration İşlemleri başlıklı makalemizde Azure üzerinde Entity Framework Core ile migrate işlemlerinin nasıl yapıldığını örnek bir API üzerinden incelemiş bulunmaktayız. Bu içeriğimizde ise çağdaş UI teknolojilerinden biri olan Angular mimarisiyle geliştirilmiş bir web uygulamasının Azure’da nasıl deploy edildiğini inceleyeceğiz.

Gereksinimler

Herşeyden önce hali hazırda bir Angular projesi oluşturunuz. Bunun yanında Visual Studio Code editörünü edininiz ve ilgili editör üzerinden Azure bulutu ile gerekli bağlantı ve deploy işlemlerinin sorumluluğunu üstlenecek olan “Azure App Service” eklentisini yükleyiniz.
Angular Uygulamasını Azure'da Deploy Etme
Ardından ilgili eklenti üzerinden Azure hesabına “Sign in to Azure” diyerek giriş yapınız.
Angular Uygulamasını Azure'da Deploy Etme
Giriş talebinde bulunduktan sonra açılan internet tarayıcısı aracılığıyla Microsoft hesabınız üzerinden Azure’a giriş yapmanız yeterli olacaktır.

Şimdi bu ön işlemler neticesindeki hazırbulunuşluluk akabinde Azure üzerinde Angular uygulamasını yayınlayabilmek için bir Web Uygulaması oluşturmaya geçebiliriz.

Angular Uygulaması İçin Azure’da Web Uygulaması Oluşturma

Şu ana kadar Azure ile ilgili klavyeye almış olduğumuz tüm makalelerimizde portal.azure.com adresi üzerinden işlemlerimizi gerçekleştirmiş bulunmaktayız. Yine aynı yerden yola devam edeceğiz 🙂 İlgili adrese girdikten sonra portal üzerindeki “Azure hizmetleri” kısmından “Uygulama Hizmetleri” sekmesine tıklayınız.
Angular Uygulamasını Azure'da Deploy Etme

Açılan sayfa üzerinden bir web uygulaması oluşturabilmek için “Ekle” butonuna tıklayınız.
Angular Uygulamasını Azure'da Deploy Etme

Ardından gelen sayfadaki alanları uygun değerlerle doldurunuz. Buradaki alanların niteliklerine dair isimleri yeterince açıklayıcı olmalarından dolayı gerekli izahatlerin detaylı yapılma ihtiyacı hissedilmemiştir.
Angular Uygulamasını Azure'da Deploy Etme

Velhasıl ilgili alanları doldurduktan sonra, önce “Gözden geçir + oluştur” butonuna ardından gerekli inceleme yapıldıktan sonrada “Oluştur” butonuna tıklayınız. Bu işlem neticesinde Angular projesini yayınlayacağımız web uygulamasını oluşturmuş bulunmaktayız.

Angular Uygulamasını Deploy Etme

Oluşturulan Angular uygulamasını Azure’da deploy edebilmek için öncelikle “build” edilmesi gerekmektedir.

ng build

Angular Uygulamasını Azure'da Deploy Etme

Build işleminin neticesinde uygulamanın ana dizinine “dist/[projename]” klasörü eklenmiş olacaktır.
Angular Uygulamasını Azure'da Deploy Etme
Yukarıdaki ekran görüntüsünde olduğu gibi ilgili klasöre sağ tıklayarak “Deploy to Web App” sekmesine tıklayınız.
Angular Uygulamasını Azure'da Deploy Etme
Bu işlem akabinde karşımıza Azure hesabımızda bulunan tüm web uygulamaları gelecektir. Burada Angular uygulaması için oluşturduğumuz web uygulaması hesabını seçiyoruz ve enter tuşuna basıyoruz.
Angular Uygulamasını Azure'da Deploy Etme
Evet… Görüldüğü üzere deploy süreci başlamış bulunmaktadır. Eee artık bu sürecin bitmesi için gerekli sabrı gösterip, beklememiz gerekmektedir 🙂

Ve sabrın sonu selamet 🙂
https://azureprojesi.azurewebsites.net/personel adresine göz atarsanız eğer Angular uygulamasının deploy edildiğini göreceksiniz.

“The resource you are looking for has been removed, had its name changed, or is temporarily unavailable” Hatası ve Çözümü

Angular uygulamasını deploy ettikten sonra kaynağa dair “The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.” olası hatasını alabilirsiniz. İlgili hatanın çözümü için aşağıdaki gibi tüm istekleri https protokolüne yönlendirecek kodları barındıran bir web.config dosyası tasarlamanız gerekmektedir.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <clear />
                <rule name="Redirect to https" stopProcessing="true">
                    <match url="(.*)" />
                    <conditions>
                        <add input="{HTTPS}" pattern="off" ignoreCase="true" />
                    </conditions>
                    <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
                </rule>
                <rule name="AngularJS Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Tasarladığınız ilgili dosyayı build edilmiş Angular çıktısının bulunduğu dizine yerleştirip, tekrar deploy ediniz.

Tüm bu işlemler neticesinde Angular uygulamasını başarılı bir şekilde deploy etmiş ve yayına almış bulunmaktayız.

İlgilenenlerin faydalanması dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*