Een statische website hosten in Azure Storage

Je kunt statische inhoud (HTML, CSS, JavaScript en afbeeldingsbestanden) direct serveren vanuit een container in een algemene v2 of BlockBlobStorage account. Zie Statische websitehosting in Azure Storage voor meer informatie.

In dit artikel leest u hoe u hosting van statische websites inschakelt met behulp van Azure Portal, De Azure CLI of PowerShell.

Hosting van statische websites inschakelen

Schakel statische websitehosting in op het opslagaccount in.

Portaal

1. Meld u aan bij het Azure-portaal.

2. Zoek uw opslagaccount en selecteer het om het deelvenster Overzicht van het account weer te geven.

3. Selecteer in het deelvenster Overzicht het tabblad Mogelijkheden . Selecteer vervolgens statische website om de configuratiepagina voor de statische website weer te geven.

   

4. Selecteer Ingeschakeld om het hosten van statische websites voor het opslagaccount in te schakelen.

5. In het veld Indexdocumentnaam voer je een standaard indexpagina in (bijvoorbeeld index.html).

   De standaard indexpagina verschijnt wanneer je naar de wortel van je statische website navigeert.

6. Voer in het veld Foutdocumentpad een standaard foutpagina in (bijvoorbeeld 404.html).

   De standaard foutpagina verschijnt wanneer je naar een pagina navigeert die niet bestaat in je statische website.

7. Selecteer Opslaan om de statische siteconfiguratie af te ronden.

   

8. Nadat je de configuratie hebt opgeslagen, verschijnt er een bevestigingsbericht. Het Overzichtspaneel toont je statische website-eindpunten en andere configuratie-informatie.

   

Azure CLI

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

1. Open eerst de Azure Cloud Shell of open een opdrachtconsoletoepassing zoals Windows PowerShell als u de Azure CLI lokaal hebt geïnstalleerd .

2. Als je identiteit aan meer dan één abonnement is gekoppeld, stel je actieve abonnement dan in op het abonnement van het opslagaccount dat je statische website host. Vervang de waarde van de <subscription-id> tijdelijke aanduiding door de id van uw abonnement.

   az account set --subscription <subscription-id>
   

   Vervang de waarde van de <subscription-id> tijdelijke aanduiding door de id van uw abonnement.

3. 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> plaatshouder door de naam van het foutendocument dat verschijnt wanneer een browser een pagina op je site aanvraagt die niet bestaat.

   • Vervang de <index-document-name> tijdelijke aanduiding door de naam van het indexdocument. Dit document is vaak index.html.

PowerShell

U kunt hosting van statische websites inschakelen met behulp van de Azure PowerShell-module.

1. Open een Windows PowerShell-opdrachtvenster.

2. Controleer of u de Azure PowerShell-module Az versie 0.7 of hoger hebt.

   Get-InstalledModule -Name Az -AllVersions | Select-Object Name, Version
   

   Als u PowerShell wilt installeren of upgraden, raadpleegt u De Azure PowerShell-module installeren.

3. Meld u aan bij uw Azure-abonnement met de opdracht Connect-AzAccount en volg de instructies op het scherm.

   Connect-AzAccount
   

4. Als je identiteit aan meer dan één abonnement is gekoppeld, stel je actieve abonnement dan in op het abonnement van het opslagaccount dat je statische website host.

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

   Vervang de waarde van de <subscription-id> tijdelijke aanduiding door de id van uw abonnement.

5. Haal de context van het opslagaccount op waarmee het opslagaccount wordt gedefinieerd 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.

6. Statische websitehosting inschakelen.

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

   • Vervang de <error-document-name> plaatshouder door de naam van het foutendocument dat verschijnt wanneer een browser een pagina op je site aanvraagt die niet bestaat.

   • Vervang de <index-document-name> tijdelijke aanduiding door de naam van het indexdocument. Dit document is vaak index.html.

Bestanden uploaden

Portaal

In de volgende instructies ziet u hoe u bestanden uploadt met behulp van Azure Portal. Je kunt ook AzCopy, Azure PowerShell, Azure CLI of een aangepaste applicatie gebruiken om bestanden naar de $web container van je account te uploaden. Voor een stapsgewijze tutorial die bestanden uploadt met Visual Studio Code, zie Tutorial: Host een statische website op Blob Storage.

1. Navigeer in Azure Portal naar het opslagaccount met uw statische website. Selecteer Containers in het linkernavigatiedeelvenster om de lijst met containers weer te geven.

2. Selecteer in het Container-paneel de $web container om het Overzichtspaneel van de container te openen.

   

3. Selecteer in het OverzichtspaneelUploaden. Selecteer in het Upload blob-paneel het Bestanden-veld om de bestandsbrowser te openen. Navigeer naar het bestand, selecteer het en selecteer dan Open. Selecteer optioneel Overschrijven als bestanden al bestaan.

   

4. Als je wilt dat de browser de inhoud van het bestand weergeeft, zorg er dan voor dat het inhoudstype van dat bestand is ingesteld op text/html. Om deze instelling te verifiëren, selecteer je de naam van de blob die je in de vorige stap hebt geüpload om het Overzichtspaneel te openen. Zorg ervoor dat de waarde is ingesteld in het eigenschapsveld CONTENT-TYPE .

   

   Opmerking

   Deze eigenschap wordt automatisch ingesteld op text/html voor algemeen erkende extensies zoals .html. In sommige gevallen moet je het echter zelf instellen. Als je deze eigenschap niet instelt op text/html, vraagt de browser gebruikers het bestand te downloaden in plaats van de inhoud weer te geven. Je kunt deze eigenschap in de vorige stap instellen.

Azure CLI

Upload objecten naar de $web container vanuit een bronmap.

Dit voorbeeld gaat ervan uit dat je commando's uitvoert vanuit een Azure Cloud Shell-sessie.

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

Opmerking

Als de browser je vraagt het bestand te downloaden in plaats van de inhoud te renderen, voeg --content-type 'text/html; charset=utf-8' dan toe aan het commando.

• 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.

Opmerking

Als je een lokale installatie van Azure CLI gebruikt, gebruik dan het pad naar elke locatie op je lokale computer (bijvoorbeeld, C:\myFolder).

Als je Azure Cloud Shell gebruikt, verwijs dan naar een bestandsdeling die zichtbaar is voor Cloud Shell. Deze locatie kan de bestandsdeling zijn voor Cloud Shell zelf of een bestaande bestandsdeling die je vanuit Cloud Shell mount. Zie Persistente bestanden in Azure Cloud Shell om te leren hoe dit te doen.

PowerShell

Upload objecten naar de $web container vanuit een bronmap.

# Upload a file
Set-AzStorageBlobContent -File "<path-to-file>" `
   -Container '$web' `
   -Blob "<blob-name>" `
   -Context $ctx

Opmerking

Als de browser je vraagt het bestand te downloaden in plaats van de inhoud te renderen, voeg -Properties @{ ContentType = "text/html; charset=utf-8";} dan toe aan het commando.

• Vervang de <path-to-file> tijdelijke waarde door het volledig gekwalificeerde pad naar het bestand dat je wilt uploaden (bijvoorbeeld, C:\temp\index.html).

• Vervang de <blob-name> placeholderwaarde door de naam die je aan de resulterende blob wilt geven (bijvoorbeeld index.html).

De URL van de website zoeken

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

Portaal

Selecteer Statistische Website in het deelvenster dat naast de overzichtspagina van uw opslagaccount wordt weergegeven. De URL van uw site wordt weergegeven in het veld Primair eindpunt .

Azure CLI

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.

PowerShell

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 inschakelen op statische websitepagina's

Nadat je metrics hebt ingeschakeld, rapporteert het metrics-dashboard verkeersstatistieken voor bestanden in de $web container.

1. Selecteer Metrics in het Monitor-gedeelte van het opslagaccountmenu.

   

   Opmerking

   Het portaal toont alleen API-leden die data teruggeven binnen de geselecteerde tijdsbestek. Verleng de tijdsperiode om het benodigde API-lid beschikbaar te maken.

2. Selecteer de tijdslimiet, selecteer een tijdsbestek en selecteer vervolgens Toepassen.

   

3. Selecteer Blob in de vervolgkeuzelijst Namespace.

   

4. Selecteer de Egress-metriek .

   

5. Selecteer Sum in de aggregatiekiezer .

   

6. Selecteer het toevoegingsfilter en selecteer vervolgens de API-naam in de Property-selector .

   

7. Selecteer het selectievakje naast GetWebContent in de Values selector om het metricsrapport in te vullen.

   

   Opmerking

   Het selectievakje GetWebContent verschijnt alleen als dat API-lid binnen de geselecteerde termijn is gebruikt. Als je het niet kunt vinden, verleng dan de tijdsbestek.

Volgende stappen

• Wijs een aangepast domein toe aan een Azure Blob Storage-eindpunt.