Een statische website hosten in Azure Storage

Artikel
05/11/2023

U kunt statische inhoud (HTML-, CSS-, JavaScript- en afbeeldingsbestanden) rechtstreeks vanuit een container in een V2- of BlockBlobStorage-account voor algemeen gebruik leveren. Zie Statische websitehosting in Azure Storage voor meer informatie.

In dit artikel wordt beschreven hoe u het hosten van statische websites inschakelt met behulp van de Azure Portal, de Azure CLI of PowerShell.

Hosting van statische websites inschakelen

Statische websitehosting is een functie die u moet inschakelen voor het opslagaccount.

Meld u aan bij de Azure Portal om aan de slag te gaan.
Zoek uw opslagaccount en selecteer dit om het deelvenster Overzicht van het account weer te geven.
Selecteer in het deelvenster Overzicht het tabblad Mogelijkheden . Selecteer vervolgens Statische website om de configuratiepagina voor de statische website weer te geven.
Selecteer Ingeschakeld om het hosten van statische websites in te schakelen voor het opslagaccount.
Geef in het veld Naam van het indexdocument een standaardindexpagina op (bijvoorbeeld :index.html).

De standaardindexpagina wordt weergegeven wanneer een gebruiker naar de hoofdmap van uw statische website navigeert.
Geef in het veld Pad van foutdocument een standaardfoutpagina op (bijvoorbeeld :404.html).

De standaardfoutpagina wordt weergegeven wanneer een gebruiker probeert te navigeren naar een pagina die niet in uw statische website bestaat.
Klik op Opslaan om de configuratie van de statische site te voltooien.
Er wordt een bevestigingsbericht weergegeven. De eindpunten van uw statische website en andere configuratiegegevens worden weergegeven in het deelvenster Overzicht .

U kunt het hosten van statische websites inschakelen met behulp van de Azure CLI.

Open eerst de Azure Cloud Shell. Als u de Azure CLI lokaal hebt geïnstalleerd, opent u een opdrachtconsoletoepassing zoals Windows PowerShell.
Als uw identiteit is gekoppeld aan meer dan één abonnement, stelt u uw actieve abonnement in op abonnement van het opslagaccount dat als host fungeert voor uw statische website.
```
az account set --subscription <subscription-id>
```
Vervang de waarde van de <subscription-id> tijdelijke aanduiding door de id van uw abonnement.
Statische websitehosting inschakelen.
```
az storage blob service-properties update --account-name <storage-account-name> --static-website --404-document <error-document-name> --index-document <index-document-name>
```
- Vervang de waarde van de tijdelijke plaatsaanduiding <storage-account-name> door de naam van uw opslagaccount.
- Vervang de <error-document-name> tijdelijke aanduiding door de naam van het foutdocument dat voor gebruikers wordt weergegeven wanneer een browser een pagina op uw site aanvraagt die niet bestaat.
- Vervang de <index-document-name> tijdelijke aanduiding door de naam van het indexdocument. Dit document is meestal 'index.html'.

U kunt het hosten van statische websites inschakelen met behulp van de module Azure PowerShell.

Open een Windows PowerShell opdrachtvenster.
Controleer of u Azure PowerShell module Az versie 0.7 of hoger hebt.
```
Get-InstalledModule -Name Az -AllVersions | select Name,Version
```
Als u PowerShell wilt installeren of upgraden, raadpleegt u De Azure PowerShell-module installeren.
Meld u aan bij uw Azure-abonnement met de opdracht Connect-AzAccount en volg de instructies op het scherm.
```
Connect-AzAccount
```
Als uw identiteit is gekoppeld aan meer dan één abonnement, stelt u uw actieve abonnement in op abonnement van het opslagaccount dat als host fungeert voor uw statische website.
```
$context = Get-AzSubscription -SubscriptionId <subscription-id>
Set-AzContext $context
```
Vervang de waarde van de <subscription-id> tijdelijke aanduiding door de id van uw abonnement.
Haal de context van het opslagaccount op die het opslagaccount definieert dat u wilt gebruiken.
```
$storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -AccountName "<storage-account-name>"
$ctx = $storageAccount.Context
```
- Vervang de waarde van de <resource-group-name> tijdelijke aanduiding door de naam van uw resourcegroep.
- Vervang de waarde van de tijdelijke plaatsaanduiding <storage-account-name> door de naam van uw opslagaccount.
Statische websitehosting inschakelen.
```
Enable-AzStorageStaticWebsite -Context $ctx -IndexDocument <index-document-name> -ErrorDocument404Path <error-document-name>
```
- Vervang de <error-document-name> tijdelijke aanduiding door de naam van het foutdocument dat voor gebruikers wordt weergegeven wanneer een browser een pagina op uw site aanvraagt die niet bestaat.
- Vervang de <index-document-name> tijdelijke aanduiding door de naam van het indexdocument. Dit document is meestal 'index.html'.

Bestanden uploaden

De volgende instructies laten zien hoe u bestanden uploadt met behulp van de Azure Portal. U kunt ook AzCopy, PowerShell, CLI of een aangepaste toepassing gebruiken waarmee bestanden kunnen worden geüpload naar de $web container van uw account. Zie Zelfstudie: Een statische website hosten in Blob Storage voor een stapsgewijze zelfstudie over het uploaden van bestanden met behulp van Visual Studio Code.

Navigeer in de Azure Portal naar het opslagaccount met uw statische website. Selecteer Containers in het linkernavigatiedeelvenster om de lijst met containers weer te geven.
Selecteer in het deelvenster Containers de $web container om het deelvenster Overzicht van de container te openen.
Selecteer in het deelvenster Overzicht het pictogram Uploaden om het deelvenster Blob uploaden te openen. Selecteer vervolgens het veld Bestanden in het deelvenster Blob uploaden om de bestandsbrowser te openen. Navigeer naar het bestand dat u wilt uploaden, selecteer het en selecteer vervolgens Openen om het veld Bestanden in te vullen. Schakel eventueel het selectievakje Overschrijven als bestanden al bestaan in.
Als u wilt dat de browser de inhoud van het bestand weergeeft, moet u ervoor zorgen dat het inhoudstype van dat bestand is ingesteld op text/html. Als u dit wilt controleren, selecteert u de naam van de blob die u in de vorige stap hebt geüpload om het bijbehorende deelvenster Overzicht te openen. Zorg ervoor dat de waarde is ingesteld in het eigenschapsveld CONTENT-TYPE .

Notitie

Deze eigenschap wordt automatisch ingesteld op text/html voor veelgebruikte extensies, zoals .html. In sommige gevallen moet u dit echter zelf instellen. Als u deze eigenschap niet instelt op text/html, vraagt de browser gebruikers om het bestand te downloaden in plaats van de inhoud weer te geven. Deze eigenschap kan in de vorige stap worden ingesteld.

Objecten uploaden naar de $web container vanuit een bronmap.

In dit voorbeeld wordt ervan uitgegaan dat u opdrachten uitvoert vanuit Azure Cloud Shell sessie.

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

Notitie

Als de browser gebruikers vraagt om het bestand te downloaden in plaats van de inhoud weer te geven, kunt u toevoegen --content-type 'text/html; charset=utf-8' aan de opdracht.

Vervang de waarde van de tijdelijke plaatsaanduiding <storage-account-name> door de naam van uw opslagaccount.
Vervang de <source-path> tijdelijke aanduiding door een pad naar de locatie van de bestanden die u wilt uploaden.

Notitie

Als u een locatie-installatie van Azure CLI gebruikt, kunt u het pad naar elke locatie op uw lokale computer gebruiken (bijvoorbeeld: C:\myFolder.

Als u Azure Cloud Shell gebruikt, moet u verwijzen naar een bestandsshare die zichtbaar is voor de Cloud Shell. Deze locatie kan de bestandsshare van de cloudshare zelf zijn of een bestaande bestandsshare die u koppelt vanuit de Cloud Shell. Zie Bestanden behouden in Azure Cloud Shell voor meer informatie over hoe u dit doet.

Objecten uploaden naar de $web container vanuit een bronmap.

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

Notitie

Als de browser gebruikers vraagt om het bestand te downloaden in plaats van de inhoud weer te geven, kunt u toevoegen -Properties @{ ContentType = "text/html; charset=utf-8";} aan de opdracht.

Vervang de waarde van de <path-to-file> tijdelijke aanduiding door het volledig gekwalificeerde pad naar het bestand dat u wilt uploaden (bijvoorbeeld: C:\temp\index.html).
Vervang de waarde van de <blob-name> tijdelijke aanduiding door de naam die u de resulterende blob wilt geven (bijvoorbeeld: index.html).

De URL van de website zoeken

U kunt de pagina's van uw site vanuit een browser bekijken met behulp van de openbare URL van de website.

Selecteer Statische website in het deelvenster dat wordt weergegeven naast de accountoverzichtspagina van uw opslagaccount. De URL van uw site wordt weergegeven in het veld Primair eindpunt .

Metrische gegevens over statische websites van Azure Storage

Zoek de openbare URL van uw statische website met behulp van de volgende opdracht:

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

Vervang de waarde van de tijdelijke plaatsaanduiding <storage-account-name> door de naam van uw opslagaccount.
Vervang de waarde van de <resource-group-name> tijdelijke aanduiding door de naam van uw resourcegroep.

Zoek de openbare URL van uw statische website met behulp van de volgende opdracht:

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

Vervang de waarde van de <resource-group-name> tijdelijke aanduiding door de naam van uw resourcegroep.
Vervang de waarde van de tijdelijke plaatsaanduiding <storage-account-name> door de naam van uw opslagaccount.

Metrische gegevens op statische webpagina's inschakelen

Zodra u metrische gegevens hebt ingeschakeld, worden verkeersstatistieken voor bestanden in de $web container gerapporteerd in het dashboard met metrische gegevens.

Klik op Metrische gegevens in de sectie Bewaken van het menu opslagaccount.

Notitie

Metrische gegevens worden gegenereerd door ze te koppelen aan verschillende API's voor metrische gegevens. In de portal worden alleen API-leden weergegeven die binnen een bepaald tijdsbestek worden gebruikt, zodat ze zich alleen kunnen richten op leden die gegevens retourneren. Om ervoor te zorgen dat u het benodigde API-lid kunt selecteren, is de eerste stap het uitbreiden van het tijdsbestek.
Klik op de knop Tijdsbestek, kies een tijdsbestek en klik vervolgens op Toepassen.
Selecteer Blob in de vervolgkeuzelijst Naamruimte .
Selecteer vervolgens de metrische waarde Uitgaand verkeer.
Selecteer Som in de aggregatiekiezer .
Klik op de knop Filter toevoegen en kies API-naam in de eigenschappenkiezer .
Schakel het selectievakje naast GetWebContent in de waardenkiezer in om het rapport met metrische gegevens te vullen.

Notitie

Het selectievakje GetWebContent wordt alleen weergegeven als dat API-lid binnen een bepaald tijdsbestek is gebruikt. In de portal worden alleen API-leden weergegeven die binnen een bepaald tijdsbestek worden gebruikt, zodat ze zich alleen kunnen richten op leden die gegevens retourneren. Als u een specifiek API-lid niet in deze lijst kunt vinden, vouwt u het tijdsbestek uit.