Alıştırma - Görüntüyü değiştirme ve web uygulamasını yeniden dağıtma

Tamamlandı

Bu ünitede web uygulaması için sürekli dağıtımı yapılandıracak ve Docker görüntüsünün yer aldığı kayıt defterine bağlanan bir web kancası oluşturacaksınız. Ardından web uygulamasının kaynak kodunda değişiklik yapacak ve görüntüyü yeniden derleyeceksiniz. Örnek web uygulamasını barındıran web sitesini yeniden ziyaret edecek ve en yeni sürümün çalıştırıldığını doğrulayacaksınız.

Dekont

Bu alıştırmada bir Azure Container Registry görevi oluşturulmaz. Bunun yerine, örnek uygulama için Docker görüntüsünü el ile yeniden derleyeceksiniz. Yeni Docker görüntüsü oluşturulduğunda web kancası açılır.

Sürekli dağıtımı yapılandırma ve web kancası oluşturma

  1. Azure portalına dönün ve web uygulamanızı seçin. Web uygulamanız için App Service bölmeniz görüntülenir.

  2. Sol menü bölmesindeki Dağıtım'ın altında Dağıtım Merkezi'ni seçin. Uygulama hizmetiniz (web uygulaması) için Dağıtım Merkezi bölmesi görüntülenir.

  3. Ayarlar sekmesindeki Kayıt defteri ayarları'nın altında Sürekli Dağıtım'ı Açık olarak ayarlayın ve üst menü çubuğunda Kaydet'i seçin. Bu ayar, Container Registry'nin Docker görüntüsünü değiştiğinde web uygulamasını uyarmak için kullanacağı bir web kancası yapılandırır.

    Screenshot that shows the container settings for the web app with continuous deployment enabled.

Web uygulamasını güncelleştirme ve web kancasını test etme

  1. Azure Cloud Shell'de dotnet/SampleWeb/Pages klasörüne gidin. Bu klasör, web uygulaması tarafından görüntülenen HTML sayfalarının kaynak kodunu içerir.

    cd ~/mslearn-deploy-run-container-app-service/dotnet/SampleWeb/Pages
    
  2. Aşağıdaki komutları çalıştırarak web uygulamasının varsayılan sayfasını (Index.cshtml) döngü denetiminde ek bir öğe bulunan yeni sürümle değiştirin. Bu komutlar uygulamada sürekli geliştirme simülasyonu oluşturur ve döngüye yeni bir sayfa ekler.

    mv Index.cshtml Index.cshtml.old
    mv Index.cshtml.new Index.cshtml
    
  3. Web uygulamasının görüntüsünü yeniden derlemek ve Container Registry'ye göndermek için sonraki komut kümesini çalıştırın. <container_registry_name> değerini kayıt defterinizin adıyla değiştirin. İkinci komutun sonundaki . karakterini unutmayın. Derlemenin tamamlanmasını bekleyin.

    cd ~/mslearn-deploy-run-container-app-service/dotnet
    az acr build --registry <container_registry_name> --image webimage .
    
  4. Azure portalı giriş sayfasına dönün. En son kaynaklar alanından kapsayıcı kayıt defterinizi seçin. Kapsayıcı kayıt defteri bölmeniz görüntülenir.

  5. Sol menü bölmesindeki Hizmetler'in altında Web kancaları'nı seçin. Kapsayıcı kayıt defteriniz için Web Kancaları bölmesi görüntülenir.

  6. Listedeki tek web kancasını seçin. Kapsayıcı kayıt defteri web kancanız görüntülenir.

  7. Çalıştırdığınız derlemeye ve göndermeye yanıt olarak tetiklenen web kancasının kaydına dikkat edin.

    Screenshot of the webhook showing the push event.

Web uygulamasını yeniden test etme

  1. Tarayıcıda web uygulamanıza dönün. Sekmeyi daha önce kapattıysanız, Azure portalında uygulamanın Genel Bakış sayfasına gidip Gözat'ı seçebilirsiniz. Web uygulaması Container Registry'den yeni görüntüyü yüklerken bir hazırlıksız başlatma gecikmesi olacaktır.

  2. Döngü denetimindeki öğeleri gözden geçirin. Denetimin artık dört sayfa içerdiğine dikkat edin. Yeni sayfa aşağıdaki görüntüye benzer:

    Screenshot of the sample web app.

Web uygulaması yeni görüntü temelinde otomatik olarak güncelleştirilmiş ve yeniden dağıtılmıştır. Kayıt defterinizdeki web kancası hizmeti web uygulamanıza kapsayıcı görüntüsünün değiştirildiğini bildirerek bir güncelleştirmeyi tetikler.

  1. Azure Cloud Shell'de node/routes klasörüne gidin. Bu klasör, web uygulaması tarafından görüntülenen sayfaları oluşturan kaynak kodu içerir.

    cd ~/mslearn-deploy-run-container-app-service/node/routes
    
  2. Cloud Shell düzenleyicisinde açın index.js .

    code index.js
    
  3. Düzenleyicide, görünümüne ExpressMicrosoft Learngeçirilen özelliğin title değerini olarak değiştirmek için kodu değiştirin.

    ...
    res.render('index', { title: 'Microsoft Learn' });
    ...
    

    İşiniz bittiğinde dosyayı kaydettiğinizden emin olun.

  4. Cloud Shell'de sonraki komut kümesini çalıştırarak web uygulamasının görüntüsünü yeniden derleyin ve Container Registry'ye gönderin. <container_registry_name> değerini kayıt defterinizin adıyla değiştirin. İkinci komutun sonundaki . karakterini unutmayın. Derlemenin tamamlanmasını bekleyin.

    cd ~/mslearn-deploy-run-container-app-service/node
    az acr build --registry <container_registry_name> --image webimage .
    
  5. Sol menü bölmesindeki Hizmetler'in altında Web kancaları'nı seçin. Kapsayıcı kayıt defterinizin Web Kancaları bölmesinde listeden tek web kancasını seçin.

  6. Web kancasının çalıştırdığınız derlemeye ve göndermeye yanıt olarak tetiklenen bir kaydı olduğuna dikkat edin.

    Screenshot of the webhook showing the push event.

Web uygulamasını yeniden test etme

  1. Tarayıcıda web uygulamanıza dönün. Sekmeyi daha önce kapattıysanız, Azure portalında web uygulamanızın Genel Bakış sayfasına gidebilir ve üst menü çubuğunda Gözat'ı seçebilirsiniz. Web uygulaması Container Registry'den yeni görüntüyü yüklerken bir hazırlıksız başlatma gecikmesi olacaktır.

  2. Sayfa içeriğinin, kapsayıcı görüntüsünde yapılan güncelleştirmeleri yansıtacak biçimde değiştirildiğini unutmayın.

    Screenshot of the sample web app.

Web uygulaması yeni görüntü temelinde otomatik olarak güncelleştirilmiş ve yeniden dağıtılmıştır. Kayıt defterinizdeki web kancası hizmeti web uygulamanıza kapsayıcı görüntüsünün değiştirildiğini bildirerek bir güncelleştirmeyi tetikler.