Hostowanie statycznej witryny internetowej w usłudze Azure Storage

Zawartość statyczną (pliki HTML, CSS, JavaScript i pliki obrazów) można serwować bezpośrednio z kontenera na koncie ogólnego przeznaczenia w wersji 2 lub BlockBlobStorage. Aby dowiedzieć się więcej, zobacz Hostowanie witryn statycznych w Azure Storage.

W tym artykule pokazano, jak włączyć hostowanie statycznej witryny internetowej przy użyciu witryny Azure Portal, interfejsu wiersza polecenia platformy Azure lub programu PowerShell.

Włączanie hostingu statycznej witryny internetowej

Hostowanie statycznej strony internetowej to funkcja, którą musisz włączyć w ramach konta magazynowego.

Portal

1. Zaloguj się do witryny Azure Portal , aby rozpocząć pracę.

2. Znajdź konto usługi magazynowania i wybierz je, w celu wyświetlenia okienka Przegląd konta.

3. W okienku Przegląd wybierz kartę Możliwości . Następnie wybierz pozycję Statyczna witryna internetowa , aby wyświetlić stronę konfiguracji statycznej witryny internetowej.

   

4. Wybierz Włączone, aby włączyć hostowanie statycznej witryny internetowej dla konta magazynowego.

5. W polu Nazwa dokumentu indeksu określ domyślną stronę indeksu (na przykład: index.html).

   Domyślna strona indeksu jest wyświetlana, gdy użytkownik przejdzie do katalogu głównego statycznej witryny internetowej.

6. W polu ścieżka dokumentu błędu określ domyślną stronę błędu (na przykład: 404.html).

   Domyślna strona błędu jest wyświetlana, gdy użytkownik próbuje przejść do strony, która nie istnieje w statycznej witrynie internetowej.

7. Kliknij przycisk Zapisz , aby zakończyć konfigurację lokacji statycznej.

   

8. Jest wyświetlany komunikat z potwierdzeniem. Punkty końcowe statycznej witryny internetowej i inne informacje o konfiguracji są wyświetlane w okienku Przegląd .

   

Interfejs wiersza polecenia platformy Azure

Hostowanie statycznej witryny internetowej można włączyć przy użyciu interfejsu wiersza polecenia platformy Azure.

1. Najpierw otwórz usługę Azure Cloud Shell, lub jeśli masz zainstalowany lokalnie interfejs wiersza poleceń Azure, otwórz konsolę poleceń, taką jak Windows PowerShell.

2. Jeśli Twoja tożsamość jest powiązana z więcej niż jedną subskrypcją, ustaw swoją aktywną subskrypcję na subskrypcję konta storage, które będzie hostować statyczną witrynę internetową.

   az account set --subscription <subscription-id>
   

   Zamień wartość zastępczą <subscription-id> na identyfikator swojej subskrypcji.

3. Włącz hosting statycznej witryny internetowej.

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

   • Zastąp wartość symbolu zastępczego <storage-account-name> nazwą konta magazynowego.

   • <error-document-name> Zastąp symbol zastępczy nazwą dokumentu o błędzie, który będzie wyświetlany użytkownikom, gdy przeglądarka zażąda strony w witrynie, która nie istnieje.

   • Zastąp <index-document-name> symbol zastępczy nazwą dokumentu indeksu. Ten dokument jest znany jako "index.html".

PowerShell

Hostowanie statycznej witryny internetowej można włączyć przy użyciu modułu Azure PowerShell.

1. Otwórz okno polecenia programu Windows PowerShell.

2. Sprawdź, czy masz moduł Azure PowerShell Az w wersji 0.7 lub nowszej.

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

   Jeśli konieczna będzie instalacja lub uaktualnienie, zobacz Instalowanie modułu Azure PowerShell.

3. Zaloguj się do subskrypcji platformy Azure za pomocą polecenia Connect-AzAccount i postępuj zgodnie z instrukcjami wyświetlanymi na ekranie.

   Connect-AzAccount
   

4. Jeśli Twoja tożsamość jest powiązana z więcej niż jedną subskrypcją, ustaw swoją aktywną subskrypcję na subskrypcję konta storage, które będzie hostować statyczną witrynę internetową.

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

   Zamień wartość zastępczą <subscription-id> na identyfikator swojej subskrypcji.

5. Pobierz kontekst konta magazynu, który określa, którego konta magazynu chcesz użyć.

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

   • Zamień wartość symbolu zastępczego <resource-group-name> na nazwę swojej grupy zasobów.

   • Zastąp wartość symbolu zastępczego <storage-account-name> nazwą konta magazynowego.

6. Włącz hosting statycznej witryny internetowej.

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

   • <error-document-name> Zastąp symbol zastępczy nazwą dokumentu o błędzie, który będzie wyświetlany użytkownikom, gdy przeglądarka zażąda strony w witrynie, która nie istnieje.

   • Zastąp <index-document-name> symbol zastępczy nazwą dokumentu indeksu. Ten dokument jest znany jako "index.html".

Przekaż pliki

Portal

Poniższe instrukcje pokazują, jak przekazywać pliki przy użyciu witryny Azure Portal. Możesz również użyć narzędzia AzCopy, programu PowerShell, interfejsu wiersza polecenia lub dowolnej niestandardowej aplikacji, która może przekazywać pliki do kontenera $web konta. Aby zapoznać się z samouczkiem krok po kroku, który przekazuje pliki przy użyciu programu Visual Studio Code, zobacz Samouczek: hostowanie statycznej witryny internetowej w usłudze Blob Storage.

1. W portalu Azure przejdź do konta magazynowego zawierającego Twoją statyczną witrynę. Wybierz pozycję Kontenery w okienku nawigacji po lewej stronie, aby wyświetlić listę kontenerów.

2. W okienku Kontenery wybierz kontener $web , aby otworzyć okienko Przegląd kontenera.

   

3. W okienku Przegląd wybierz ikonę Prześlij, aby otworzyć okienko Prześlij dane blob. Następnie wybierz pole Pliki w panelu Przesyłanie blob, aby otworzyć przeglądarkę plików. Przejdź do pliku, który chcesz przekazać, wybierz go, a następnie wybierz pozycję Otwórz , aby wypełnić pole Pliki . Opcjonalnie zaznacz pole wyboru Zastąp, jeśli pliki już istnieją .

   

4. Jeśli zamierzasz wyświetlić zawartość pliku w przeglądarce, upewnij się, że typ zawartości tego pliku ma wartość text/html. Aby to sprawdzić, wybierz nazwę obiektu blob przesłanego w poprzednim kroku, aby otworzyć panel Przegląd. Upewnij się, że wartość jest ustawiona w polu właściwości CONTENT-TYPE .

   

   Uwaga / Notatka

   Ta właściwość jest automatycznie ustawiana na text/html dla powszechnie rozpoznawanych rozszerzeń, takich jak .html. Jednak w niektórych przypadkach musisz ustawić to samodzielnie. Jeśli ta właściwość nie zostanie ustawiona na text/html, przeglądarka wyświetli monit o pobranie pliku zamiast renderowania zawartości. Tę właściwość można ustawić w poprzednim kroku.

Interfejs wiersza polecenia platformy Azure

Przekaż obiekty do kontenera $web z katalogu źródłowego.

W tym przykładzie założono, że uruchamiasz polecenia z sesji usługi Azure Cloud Shell.

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

Uwaga / Notatka

Jeśli przeglądarka wyświetla monit użytkownikom, aby pobrali plik zamiast renderować zawartość, możesz dołączyć --content-type 'text/html; charset=utf-8' do polecenia.

• Zastąp wartość symbolu zastępczego <storage-account-name> nazwą konta magazynowego.

• Zastąp symbol zastępczy <source-path> ścieżką do lokalizacji plików, które chcesz przesłać.

Uwaga / Notatka

Jeśli masz zainstalowany lokalnie Azure CLI, możesz użyć ścieżki do dowolnego miejsca na komputerze lokalnym (na przykład: C:\myFolder.

Jeśli używasz usługi Azure Cloud Shell, musisz odwołać się do zasobu plików widocznego w usłudze Cloud Shell. Ta lokalizacja może być udziałem w chmurze lub istniejącym udziałem plików, który można zamontować z usługi Cloud Shell. Aby dowiedzieć się, jak to zrobić, zobacz Utrwalanie plików w usłudze Azure Cloud Shell.

PowerShell

Przekaż obiekty do kontenera $web z katalogu źródłowego.

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

Uwaga / Notatka

Jeśli przeglądarka wyświetla monit użytkownikom, aby pobrali plik zamiast renderować zawartość, możesz dołączyć -Properties @{ ContentType = "text/html; charset=utf-8";} do polecenia.

• Zastąp wartość <path-to-file> pełną ścieżką do pliku, który chcesz przesłać (na przykład: C:\temp\index.html).

• Zastąp wartość symbolu zastępczego <blob-name> nazwą, którą chcesz nadać wynikowemu blobowi (na przykład: index.html).

Znajdowanie adresu URL witryny internetowej

Strony witryny można wyświetlić w przeglądarce przy użyciu publicznego adresu URL witryny internetowej.

Portal

W okienku, które jest wyświetlane obok strony przeglądu Twojego konta magazynu, wybierz opcję Statyczna witryna internetowa. Adres URL witryny zostanie wyświetlony w polu Podstawowy punkt końcowy .

Interfejs wiersza polecenia platformy Azure

Znajdź publiczny adres URL statycznej witryny internetowej przy użyciu następującego polecenia:

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

• Zastąp wartość symbolu zastępczego <storage-account-name> nazwą konta magazynowego.

• Zamień wartość symbolu zastępczego <resource-group-name> na nazwę swojej grupy zasobów.

PowerShell

Znajdź publiczny adres URL statycznej witryny internetowej przy użyciu następującego polecenia:

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

• Zamień wartość symbolu zastępczego <resource-group-name> na nazwę swojej grupy zasobów.

• Zastąp wartość symbolu zastępczego <storage-account-name> nazwą konta magazynowego.

Włączanie metryk na statycznych stronach witryny internetowej

Po włączeniu metryk statystyki ruchu dotyczące plików w kontenerze $web są raportowane na pulpicie nawigacyjnym metryk.

1. Kliknij pozycję Metryki w sekcji Monitorowanie w menu konta przechowywania.

   

   Uwaga / Notatka

   Dane metryk są generowane przez łączenie się z różnymi interfejsami API metryk. W portalu są wyświetlani wyłącznie członkowie API używani w określonym przedziale czasowym, aby skupić się wyłącznie na tych, którzy zwracają dane. Aby mieć pewność, że możesz wybrać niezbędny członek API, pierwszym krokiem jest rozszerzenie zakresu czasu.

2. Kliknij przycisk przedziału czasu, wybierz przedział czasu, a następnie kliknij przycisk Zastosuj.

   

3. Wybierz Blob z rozwijanej listy Przestrzeń nazw.

   

4. Następnie wybierz metrykę Egress.

   

5. Wybierz Sumę z selektora Agregacji.

   

6. Kliknij przycisk Dodaj filtr i wybierz pozycję Nazwa interfejsu API z selektora właściwości .

   

7. Zaznacz pole wyboru obok pozycji GetWebContent w selektorze Wartości , aby wypełnić raport metryk.

   

   Uwaga / Notatka

   Pole wyboru GetWebContent jest wyświetlane tylko wtedy, gdy ten element członkowski interfejsu API został użyty w danym przedziale czasu. W portalu są wyświetlani wyłącznie członkowie API używani w określonym przedziale czasowym, aby skupić się wyłącznie na tych, którzy zwracają dane. Jeśli nie możesz znaleźć określonego członka interfejsu API na tej liście, rozwiń przedział czasu.

Dalsze kroki

• Dowiedz się, jak skonfigurować domenę niestandardową za pomocą statycznej witryny internetowej. Zobacz Mapowanie domeny niestandardowej na punkt końcowy usługi Azure Blob Storage.