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

Makale
05/11/2023

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

Bu makalede Azure portal, Azure CLI veya PowerShell 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.

Başlamak için Azure portal oturum açın.
Depolama hesabınızı bulun ve hesabın Genel Bakış bölmesini görüntülemek için seçin.
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.
Depolama hesabı için statik web sitesi barındırmayı etkinleştirmek için Etkin'i seçin.
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.
Hata belgesi yolu alanında varsayılan bir hata sayfası belirtin (Örneğin: 404.html).

Varsayılan hata sayfası, kullanıcı statik web sitenizde bulunmayan bir sayfaya gitmeyi denediğinde görüntülenir.
Statik site yapılandırmasını tamamlamak için Kaydet'e tıklayın.
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 kullanarak statik web sitesi barındırmayı etkinleştirebilirsiniz.

İlk olarak Azure Cloud Shell açın veya Azure CLI'yı yerel olarak yüklediyseniz Windows PowerShell gibi bir komut konsolu uygulaması açın.
Kimliğiniz birden fazla abonelikle ilişkiliyse, etkin aboneliğinizi statik web sitenizi barındıracak depolama hesabının aboneliği olarak ayarlayın.
```
az account set --subscription <subscription-id>
```
<subscription-id> Yer tutucu değerini aboneliğinizin kimliğiyle değiştirin.
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"dır.

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

bir Windows PowerShell komut penceresi açın.
Az sürüm 0.7 veya sonraki Azure PowerShell modülüne sahip olduğunuzu doğrulayın.
```
Get-InstalledModule -Name Az -AllVersions | select Name,Version
```
Yüklemeniz veya yükseltmeniz gerekirse, bkz. Azure PowerShell Modülü yükleme.
Connect-AzAccount komutuyla Azure aboneliğinizde oturum açın ve ekrandaki yönergeleri izleyin.
```
Connect-AzAccount
```
Kimliğiniz birden fazla abonelikle ilişkiliyse, etkin aboneliğinizi statik web sitenizi barındıracak depolama hesabının aboneliği olarak ayarlayın.
```
$context = Get-AzSubscription -SubscriptionId <subscription-id>
Set-AzContext $context
```
<subscription-id> Yer tutucu değerini aboneliğinizin kimliğiyle değiştirin.
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.
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"dır.

Dosyaları karşıya yükleme

Aşağıdaki yönergelerde, Azure portal kullanarak dosyaları karşıya yükleme işlemi gösterilir. 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 bir öğretici için bkz . Öğretici: Blob Depolama'da statik web sitesi barındırma.

Azure portal statik web sitenizi içeren depolama hesabına gidin. Kapsayıcı listesini görüntülemek için sol gezinti bölmesinde Kapsayıcılar'ı seçin.
Kapsayıcılar bölmesinde $web kapsayıcıyı seçerek kapsayıcının Genel Bakış bölmesini açın.
Genel Bakış bölmesinde Karşıya Yükle simgesini seçerek Blobu karşıya yükle bölmesini açın. Ardından, Dosya tarayıcısını açmak için Blobu karşıya yükle bölmesindeki Dosyalar alanını seçin. Karşıya yüklemek istediğiniz dosyaya gidin, dosyayı 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.
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 ayarlandığından text/htmlemin 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.

Not

Bu özellik gibi yaygın olarak tanınan uzantılar için otomatik olarak .htmlayarlanırtext/html. 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.

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>

Not

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.
Yer tutucuyu <source-path> , karşıya yüklemek istediğiniz dosyaların konumuna giden bir yolla değiştirin.

Not

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 tarafından görülebilen bir dosya paylaşımına başvurmanız gerekir. Bu konum, Bulut paylaşımının kendisi veya Cloud Shell bağladığınız mevcut bir dosya paylaşımı olabilir. Bunun nasıl yapılacağını öğrenmek için bkz. Azure Cloud Shell dosyaları kalıcı hale getirmek.

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

Not

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

<path-to-file> Yer tutucu değerini, karşıya yüklemek istediğiniz dosyanın tam yoluyla 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.

Depolama hesabınızın hesap 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 Depolama statik web siteleri ölçümleri ölçümü

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.

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ıdaki dosyalardaki trafik istatistikleri ölçüm panosunda rapor edilir.

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

Not

Ölçüm verileri, farklı ölçüm API'lerine bağlanarak oluşturulur. Portalda yalnızca veri döndüren üyelere odaklanmak için belirli bir zaman dilimi içinde kullanılan API üyeleri görüntülenir. Gerekli API üyesini seçebildiğinizi güvence altına almak için ilk adım zaman dilimini genişletmektir.
Zaman çerçevesi düğmesine tıklayın, bir zaman dilimi seçin ve uygula'ya tıklayın.
Ad Alanı açılan listesinden Blob'a tıklayın.
Ardından Çıkış ölçümünü seçin.
Toplama seçicisinden Toplam'ı seçin.
Filtre ekle düğmesine tıklayın ve Özellik seçiciden API adı'nı seçin.
Ölçüm raporunu doldurmak için Değerler seçicisinde GetWebContent'in yanındaki kutuyu işaretleyin.

Not

GetWebContent onay kutusu yalnızca bu API üyesi belirli bir zaman dilimi içinde kullanıldıysa görünür. Portalda yalnızca veri döndüren üyelere odaklanmak için belirli bir zaman dilimi içinde kullanılan API üyeleri görüntülenir. Bu listede belirli bir API üyesini bulamazsanız zaman dilimini genişletin.