Alıştırma: Azure Cloud Shell kullanarak statik HTML web uygulaması oluşturma
Ü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.
Korumalı alanda bir dizin oluşturun ve bu dizine gidin.
mkdir htmlapp cd htmlapp
Ö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
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
Ö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. > }
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
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.Kaydetmek için ctrl-s ve çıkmak için ctrl-q komutlarını kullanın.
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.
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.