Azure Depolama'da statik web sitesi barındırma

Statik içeriği (HTML, CSS, JavaScript ve görüntü dosyaları) doğrudan genel amaçlı V2 veya BlockBlobStorage hesabındaki bir kapsayıcıdan sağlayabilirsiniz. Daha fazla bilgi edinmek için bkz. Azure Depolama'da statik web sitesi barındırma.

Bu makalede, Azure portalını, Azure CLI'yı veya PowerShell'i kullanarak statik web sitesi barındırmayı etkinleştirme adımları gösterilmektedir.

Statik web sitesi barındırmayı etkinleştirme

Statik web sitesi barındırma, depolama hesabında etkinleştirmeniz gereken bir özelliktir.

Portal

1. Başlamak için Azure portalında oturum açın.

2. Depolama hesabınızı bulun ve hesabın Genel Bakış bölmesini görüntülemek için seçin.

3. Genel Bakış bölmesinde Özellikler sekmesini seçin. Ardından, statik web sitesinin yapılandırma sayfasını görüntülemek için Statik web sitesi'ni seçin.

   

4. Depolama hesabı için statik web sitesi barındırmayı etkinleştirmek için Etkin'i seçin.

5. Dizin belgesi adı alanında varsayılan bir dizin sayfası belirtin (Örneğin: index.html).

   Kullanıcı statik web sitenizin köküne gittiği zaman varsayılan dizin sayfası görüntülenir.

6. Hata belgesi yolu alanında varsayılan bir hata sayfası belirtin (Örneğin: 404.html).

   Kullanıcı statik web sitenizde bulunmayan bir sayfaya gitmeyi denediğinde varsayılan hata sayfası görüntülenir.

7. Statik site yapılandırmasını tamamlamak için Kaydet'e tıklayın.

   

8. Bir onay iletisi görüntülenir. Statik web sitesi uç noktalarınız ve diğer yapılandırma bilgileriniz Genel Bakış bölmesinde gösterilir.

   

Azure CLI

Azure CLI kullanarak statik web sitesi barındırmayı etkinleştirebilirsiniz.

1. İlk olarak Azure Cloud Shell'i açın veya Azure CLI'yi yerel olarak yüklediyseniz Windows PowerShell gibi bir komut konsolu uygulaması açın.

2. Kimliğiniz birden fazla abonelikle ilişkiliyse, etkin aboneliğinizi statik web sitenizi barındıracak depolama hesabının aboneliğine ayarlayın.

   az account set --subscription <subscription-id>
   

   <subscription-id> Yer tutucu değerini aboneliğinizin kimliğiyle değiştirin.

3. Statik web sitesi barındırmayı etkinleştirin.

   az storage blob service-properties update --account-name <storage-account-name> --static-website --404-document <error-document-name> --index-document <index-document-name>
   

   • <storage-account-name> Yer tutucu değerini depolama hesabınızın adıyla değiştirin.

   • Yer tutucuyu <error-document-name> , tarayıcı sitenizde var olmayan bir sayfa istediğinde kullanıcılara gösterilecek hata belgesinin adıyla değiştirin.

   • Yer tutucuyu <index-document-name> dizin belgesinin adıyla değiştirin. Bu belge genellikle "index.html".

PowerShell

Azure PowerShell modülünü kullanarak statik web sitesi barındırmayı etkinleştirebilirsiniz.

1. Bir Windows PowerShell komut penceresi açın.

2. Azure PowerShell modülünün Az sürüm 0.7 veya üzeri olduğunu doğrulayın.

   Get-InstalledModule -Name Az -AllVersions | select Name,Version
   

   Yüklemeniz veya yükseltmeniz gerekirse, bkz. Azure PowerShell Modülü yükleme.

3. Connect-AzAccount komutuyla Azure aboneliğinizde oturum açın ve ekrandaki yönergeleri izleyin.

   Connect-AzAccount
   

4. Kimliğiniz birden fazla abonelikle ilişkiliyse, etkin aboneliğinizi statik web sitenizi barındıracak depolama hesabının aboneliğine ayarlayın.

   $context = Get-AzSubscription -SubscriptionId <subscription-id>
   Set-AzContext $context
   

   <subscription-id> Yer tutucu değerini aboneliğinizin kimliğiyle değiştirin.

5. Kullanmak istediğiniz depolama hesabını tanımlayan depolama hesabı bağlamını alın.

   $storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -AccountName "<storage-account-name>"
   $ctx = $storageAccount.Context
   

   • <resource-group-name> Yer tutucu değerini kaynak grubunuzun adıyla değiştirin.

   • <storage-account-name> Yer tutucu değerini depolama hesabınızın adıyla değiştirin.

6. Statik web sitesi barındırmayı etkinleştirin.

   Enable-AzStorageStaticWebsite -Context $ctx -IndexDocument <index-document-name> -ErrorDocument404Path <error-document-name>
   

   • Yer tutucuyu <error-document-name> , tarayıcı sitenizde var olmayan bir sayfa istediğinde kullanıcılara gösterilecek hata belgesinin adıyla değiştirin.

   • Yer tutucuyu <index-document-name> dizin belgesinin adıyla değiştirin. Bu belge genellikle "index.html".

Dosya yükle

Portal

Aşağıdaki yönergelerde, Azure portalını kullanarak dosyaları karşıya yükleme işlemi gösterilmektedir. AzCopy, PowerShell, CLI veya hesabınızın $web kapsayıcısına dosya yükleyebilen herhangi bir özel uygulamayı da kullanabilirsiniz. Visual Studio Code kullanarak dosyaları karşıya yükleyen adım adım eğitici için bkz Tutorial: Blob Depolama'da statik web sitesi barındırma.

1. Azure portalında statik web sitenizi içeren depolama hesabına gidin. Sol gezinti bölmesinde Kapsayıcılar'ı seçerek kapsayıcı listesini görüntüleyin.

2. Kapsayıcılar bölmesinde $web kapsayıcıyı seçerek kapsayıcının Genel Bakış bölmesini açın.

   

3. Genel Bakış bölmesinde Karşıya Yükle simgesini seçerek Blobu karşıya yükle bölmesini açın. Ardından, Karşıya yükleme blobu bölmesindeki Dosyalar alanını seçerek dosya tarayıcısını açın. Yüklemek istediğiniz dosyaya gidin, seçin ve ardından Dosyalar alanını doldurmak için Aç'ı seçin. İsteğe bağlı olarak, Dosyalar zaten varsa üzerine yaz onay kutusunu seçin.

   

4. Tarayıcının dosyanın içeriğini görüntülemesini istiyorsanız, bu dosyanın içerik türünün olarak text/htmlayarlandığından emin olun. Bunu doğrulamak için önceki adımda karşıya yüklediğiniz blobun adını seçerek Genel Bakış bölmesini açın. Değerin CONTENT-TYPE özellik alanında ayarlandığından emin olun.

   

   Uyarı

   Bu özellik, text/html gibi yaygın olarak tanınan uzantılar için otomatik olarak .html olarak ayarlanır. Ancak, bazı durumlarda bunu kendiniz ayarlamanız gerekir. Bu özelliği olarak text/htmlayarlamazsanız, tarayıcı kullanıcılardan içeriği işlemek yerine dosyayı indirmelerini ister. Bu özellik önceki adımda ayarlanabilir.

Azure CLI

Nesneleri bir kaynak dizinden $web kapsayıcısına yükleyin.

Bu örnekte Azure Cloud Shell oturumundan komut çalıştırdığınız varsayılır.

az storage blob upload-batch -s <source-path> -d '$web' --account-name <storage-account-name>

Uyarı

Tarayıcı kullanıcılardan içeriği işlemek yerine dosyayı indirmelerini isterse, komutuna ekleyebilirsiniz --content-type 'text/html; charset=utf-8' .

• <storage-account-name> Yer tutucu değerini depolama hesabınızın adıyla değiştirin.

• <source-path> yer tutucusunu, yüklemek istediğiniz dosyaların konumuna giden bir yolla değiştirin.

Uyarı

Azure CLI'nın konum yüklemesini kullanıyorsanız, yerel bilgisayarınızdaki herhangi bir konumun yolunu kullanabilirsiniz (Örneğin: C:\myFolder.

Azure Cloud Shell kullanıyorsanız Cloud Shell'de görünen bir dosya paylaşımına başvurmanız gerekir. Bu konum, Bulut paylaşımının dosya paylaşımı veya Cloud Shell'den bağladığınız mevcut bir dosya paylaşımı olabilir. Bunun nasıl yapılacağını öğrenmek için bkz . Azure Cloud Shell'de dosyaları kalıcı hale getirmek.

PowerShell

Nesneleri bir kaynak dizinden $web kapsayıcısına yükleyin.

# upload a file
set-AzStorageblobcontent -File "<path-to-file>" `
-Container `$web `
-Blob "<blob-name>" `
-Context $ctx

Uyarı

Tarayıcı kullanıcılardan içeriği işlemek yerine dosyayı indirmelerini isterse, komutuna ekleyebilirsiniz -Properties @{ ContentType = "text/html; charset=utf-8";} .

• Karşıya yüklemek istediğiniz dosyanın tam yolunu, <path-to-file> yer tutucu değeri ile değiştirin (örneğin: C:\temp\index.html).

• <blob-name> Yer tutucu değerini, sonuçta elde edilen bloba vermek istediğiniz adla değiştirin (Örneğin: index.html).

Web sitesi URL'sini bulma

Web sitesinin genel URL'sini kullanarak sitenizin sayfalarını bir tarayıcıdan görüntüleyebilirsiniz.

Portal

Depolama hesabınızın hesaba genel bakış sayfasının yanında görünen bölmede Statik Web Sitesi'ni seçin. Sitenizin URL'si Birincil uç nokta alanında görünür.

Azure CLI

Aşağıdaki komutu kullanarak statik web sitenizin genel URL'sini bulun:

az storage account show -n <storage-account-name> -g <resource-group-name> --query "primaryEndpoints.web" --output tsv

• <storage-account-name> Yer tutucu değerini depolama hesabınızın adıyla değiştirin.

• <resource-group-name> Yer tutucu değerini kaynak grubunuzun adıyla değiştirin.

PowerShell

Aşağıdaki komutu kullanarak statik web sitenizin genel URL'sini bulun:

 $storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -Name "<storage-account-name>"
Write-Output $storageAccount.PrimaryEndpoints.Web

• <resource-group-name> Yer tutucu değerini kaynak grubunuzun adıyla değiştirin.

• <storage-account-name> Yer tutucu değerini depolama hesabınızın adıyla değiştirin.

Statik web sitesi sayfalarında ölçümleri etkinleştirme

Ölçümleri etkinleştirdikten sonra, $web kapsayıcısı içindeki dosyalara ilişkin trafik istatistikleri ölçüm panosunda bildirilir.

1. Depolama hesabı menüsünün İzleyici bölümünün altındaki Ölçümler'e tıklayın.

   

   Uyarı

   Ölçüm verileri, farklı ölçüm API'lerine bağlanarak oluşturulur. Portal yalnızca veri döndüren üyelere odaklanmak için belirli bir zaman çerçevesinde kullanılan API üyelerini görüntüler. Gerekli API üyesini seçebilmenizi sağlamak için ilk adım zaman dilimini genişletmektir.

2. Zaman çerçevesi düğmesine tıklayın, bir zaman dilimi seçin ve uygula'ya tıklayın.

   

3. Ad Alanı açılan listesinden Blob'u seçin.

   

4. Ardından Çıkış ölçümünü seçin.

   

5. Toplama seçicisinden Topla'ya tıklayın.

   

6. Filtre ekle düğmesine tıklayın ve Özellik seçiciden API adı'nı seçin.

   

7. Ölçüm raporunu doldurmak için Değerler seçicisinde GetWebContent'in yanındaki kutuyu işaretleyin.

   

   Uyarı

   GetWebContent onay kutusu yalnızca bu API üyesi belirli bir zaman dilimi içinde kullanıldıysa görünür. Portal yalnızca veri döndüren üyelere odaklanmak için belirli bir zaman çerçevesinde kullanılan API üyelerini görüntüler. Bu listede belirli bir API üyesini bulamıyorsanız zaman dilimini genişletin.

Sonraki adımlar

• Özel bir etki alanını statik web sitenizle nasıl yapılandıracağınızı öğrenin. Bkz. Özel bir etki alanını Azure Blob Depolama uç noktasına eşleme.