Alıştırma: Azure Cloud Shell kullanarak statik HTML web uygulaması oluşturma

Tamamlandı

Ücretsiz korumalı alan, Azure’ın küresel bölgelerinin bir alt kümesinde kaynak oluşturmanıza olanak tanır. Kaynak oluştururken aşağıdaki listeden bir bölge seçin:

  • Batı ABD 2
  • Orta Güney ABD
  • Central US
  • Doğu ABD
  • West Europe
  • Güneydoğu Asya
  • Doğu Japonya
  • Güney Brezilya
  • Güneydoğu Avustralya
  • Orta Hindistan

Bu alıştırmada, Azure CLI az webapp up komutunu kullanarak Azure Uygulaması Service'e temel bir HTML+CSS sitesi dağıtacaksınız. Ardından kodu güncelleştirip aynı komutu kullanarak yeniden dağıtacaksınız.

komutu az webapp up , web uygulamaları oluşturmayı ve güncelleştirmeyi kolaylaştırır. Yürütürken aşağıdaki eylemleri gerçekleştirir:

  • Belirtilmemişse varsayılan bir kaynak grubu oluşturun.
  • Bir varsayılan uygulama hizmeti planı oluşturur.
  • Belirtilen adla bir uygulama oluşturur.
  • Dosyaları geçerli çalışma dizininden web uygulamasına sıkıştırıp dağıtır.

Örnek uygulamayı indirme

Bu bölümde örnek uygulamayı indirmek ve bazı komutların girilmesini kolaylaştırmak için değişkenleri ayarlamak için korumalı alanı kullanacaksınız.

  1. Korumalı alanda bir dizin oluşturun ve bu dizine gidin.

    mkdir htmlapp
    
    cd htmlapp
    
  2. Örnek uygulama deposunu htmlapp dizininize kopyalamak için aşağıdaki git komutu çalıştırın.

    git clone https://github.com/Azure-Samples/html-docs-hello-world.git
    
  3. Aşağıdaki komutları çalıştırarak kaynak grubu ve uygulama adlarını tutacak değişkenleri ayarlayın.

    resourceGroup=$(az group list --query "[].{id:name}" -o tsv)
    appName=az204app$RANDOM
    

Web uygulaması oluşturma

  1. Örnek kodu içeren dizine geçin ve az webapp up komutunu çalıştırın.

    cd html-docs-hello-world
    
    az webapp up -g $resourceGroup -n $appName --html
    

    Bu komutun çalıştırılması birkaç dakika sürebilir. Çalışırken, aşağıdaki örneğe benzer bilgiler görüntüler.

    {
    "app_url": "https://<myAppName>.azurewebsites.net",
    "location": "westeurope",
    "name": "<app_name>",
    "os": "Windows",
    "resourcegroup": "<resource_group_name>",
    "serverfarm": "appsvc_asp_Windows_westeurope",
    "sku": "FREE",
    "src_path": "/home/<username>/demoHTML/html-docs-hello-world ",
    < JSON data removed for brevity. >
    }
    
  2. Tarayıcınızda yeni bir sekme açın ve uygulama URL'sine (https://<myAppName>.azurewebsites.net) gidin ve uygulamanın çalıştığını doğrulayın; sayfanın üst kısmındaki başlığı not alın. Sonraki bölüm için tarayıcıyı uygulamada açık bırakın.

    Dekont

    Önceki komutun çıktısından kopyalayabilir <myAppName>.azurewebsites.net veya çıkıştaki URL'yi seçerek siteyi yeni bir sekmede açabilirsiniz.

Uygulamayı güncelleştirme ve yeniden dağıtma

  1. Cloud Shell'de, düzenleyiciyi açmak için yazın code index.html . Başlık etiketinde <h1> Azure Uygulaması Hizmeti - Örnek Statik HTML Sitesi'niAzure Uygulaması Hizmet Güncelleştirildi olarak veya istediğiniz başka bir şeyle değiştirin.

  2. Kaydetmek için ctrl-s ve çıkmak için ctrl-q komutlarını kullanın.

  3. Uygulamayı daha önce kullandığınız komutla yeniden az webapp up dağıtın.

    az webapp up -g $resourceGroup -n $appName --html 
    

    Bahşiş

    Önceki komutlarda gezinmek için klavyenizdeki yukarı oku kullanabilirsiniz.

  4. Dağıtım tamamlandıktan sonra, yukarıdaki "Web uygulamasını oluşturma" bölümündeki 2. adımdan tarayıcıya geri dönün ve sayfayı yenileyin.