Een statische website hosten in Azure Storage

U kunt statische inhoud (HTML-, CSS-, JavaScript- en afbeeldingsbestanden) rechtstreeks vanuit een container in een algemeen V2- of BlockBlobStorage-account leveren. 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

Het hosten van statische websites is een functie die u moet inschakelen voor het opslagaccount.

Portaal

1. Meld u aan bij Azure Portal om aan de slag te gaan.

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. Geef in het veld Indexdocumentnaam een standaardindexpagina op (bijvoorbeeld: index.html).

   De standaardindexpagina wordt weergegeven wanneer een gebruiker naar de hoofdmap van uw statische website navigeert.

6. Specificeer in het Foutdocument padveld een standaard foutpagina (bijvoorbeeld: 404.html).

   De standaardfoutpagina wordt weergegeven wanneer een gebruiker probeert te navigeren naar een pagina die niet bestaat in uw statische website.

7. Klik op Opslaan om de configuratie van de statische site te voltooien.

   

8. Er wordt een bevestigingsbericht weergegeven. Uw statische website-eindpunten en andere configuratiegegevens worden weergegeven in het deelvenster Overzicht .

   

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 uw identiteit is gekoppeld aan meer dan één abonnement, stelt u uw actieve abonnement in op het 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.

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> tijdelijke aanduiding door de naam van het foutdocument dat aan 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'.

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 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 uw identiteit is gekoppeld aan meer dan één abonnement, stelt u uw actieve abonnement in op het 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.

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> tijdelijke aanduiding door de naam van het foutdocument dat aan 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

Portaal

In de volgende instructies ziet u hoe u bestanden uploadt met behulp van Azure Portal. U kunt ook AzCopy, PowerShell, CLI of een aangepaste toepassing gebruiken die bestanden kan uploaden naar de $web container van uw account. Zie Zelfstudie: Een statische website hosten in Blob Storage voor een stapsgewijze zelfstudie voor het uploaden van bestanden met behulp van Visual Studio Code.

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 deelvenster Containers de $web container om het deelvenster Overzicht van de container te openen.

   

3. 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 te vullen. Schakel desgewenst het selectievakje Overschrijven in als bestanden al bestaan .

   

4. Als u van plan bent om de inhoud van het bestand weer te geven in de browser, 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 deelvenster Overzicht 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 u dit echter zelf instellen. Als u deze eigenschap text/htmlniet instelt, wordt in de browser gebruikers gevraagd het bestand te downloaden in plaats van de inhoud weer te geven. Deze eigenschap kan worden ingesteld in de vorige stap.

Azure CLI

Objecten uploaden naar de $web-container vanuit een bronmap.

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

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

Opmerking

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

• 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 u een locatie-installatie van Azure CLI gebruikt, kunt u het pad naar een willekeurige 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 Cloud-share zelf zijn of een bestaande bestandsshare die u koppelt vanuit de Cloud Shell. Zie Persistente bestanden in Azure Cloud Shell om te leren hoe dit te doen.

PowerShell

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

Opmerking

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

• 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 <blob-name> tijdelijke aanduidingswaarde 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 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

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

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

   

   Opmerking

   Metrische gegevens worden gegenereerd door verschillende API's voor metrische gegevens te koppelen. In de portal worden alleen API-leden weergegeven die binnen een bepaald tijdsbestek worden gebruikt om alleen te focussen 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.

2. Klik op de knop Tijdsbestek, kies een tijdsbestek en klik vervolgens op Toepassen.

   

3. Selecteer Blob uit het vervolgkeuzemenu Naamruimte.

   

4. Selecteer vervolgens de metriek Uitgaand verkeer.

   

5. Selecteer Sum in de aggregatiekiezer .

   

6. Klik op de knop Filter toevoegen en kies API-naam in de eigenschapkiezer .

   

7. Schakel het selectievakje naast GetWebContent in de waardenkiezer in om het rapport met metrische gegevens te vullen.

   

   Opmerking

   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 om alleen te focussen op leden die gegevens retourneren. Als u geen specifiek API-lid in deze lijst kunt vinden, vouwt u het tijdsbestek uit.

Volgende stappen

• Meer informatie over het configureren van een aangepast domein met uw statische website. Zie Een aangepast domein toewijzen aan een Azure Blob Storage-eindpunt.