Samouczek: hostowanie statycznej witryny internetowej w usłudze Blob Storage

Artykuł
10/31/2023

Z tego samouczka dowiesz się, jak utworzyć i wdrożyć statyczną witrynę internetową w usłudze Azure Storage. Po zakończeniu będzie gotowa statyczna witryna internetowa, do której użytkownicy będą mieli publiczny dostęp.

Z tego samouczka dowiesz się, jak wykonywać następujące czynności:

Konfigurowanie hostowania statycznej witryny internetowej
Wdrażanie witryny internetowej Hello world

Statyczne witryny internetowe mają pewne ograniczenia. Jeśli na przykład chcesz skonfigurować nagłówki, musisz użyć usługi Azure Content Delivery Network (Azure CDN). Nie ma możliwości konfigurowania nagłówków w ramach samej funkcji statycznej witryny internetowej. Ponadto AuthN i AuthZ nie są obsługiwane.

Jeśli te funkcje są ważne w twoim scenariuszu, rozważ użycie usługi Azure Static Web Apps. Jest to świetna alternatywa dla statycznych witryn internetowych i jest również odpowiednia w przypadkach, gdy nie trzeba renderować zawartości przez serwer internetowy. Można skonfigurować nagłówki i AuthN / AuthZ jest w pełni obsługiwane. Usługa Azure Static Web Apps udostępnia również w pełni zarządzany przepływ pracy ciągłej integracji i ciągłego dostarczania (CI/CD) ze źródła usługi GitHub do wdrożenia globalnego.

W tym filmie wideo pokazano, jak hostować statyczną witrynę internetową w usłudze Blob Storage.

Kroki opisane w filmie wideo zostały również opisane w poniższych sekcjach.

Wymagania wstępne

Aby uzyskać dostęp do usługi Azure Storage, potrzebujesz subskrypcji platformy Azure. Jeśli nie masz jeszcze subskrypcji, przed rozpoczęciem utwórz bezpłatne konto .

Cały dostęp do usługi Azure Storage odbywa się za pośrednictwem konta magazynu. Na potrzeby tego samouczka Szybki start utwórz konto magazynu przy użyciu witryny Azure Portal, programu Azure PowerShell lub interfejsu wiersza polecenia platformy Azure. Aby uzyskać pomoc dotyczącą tworzenia konta magazynu, zobacz Tworzenie konta magazynu.

Uwaga

Statyczne witryny internetowe są teraz dostępne dla kont magazynu ogólnego przeznaczenia w wersji 2 w warstwie Standardowa, a także kont magazynu z włączoną hierarchiczną przestrzenią nazw.

W tym samouczku wykorzystany zostanie program Visual Studio Code, czyli bezpłatne narzędzie dla programistów umożliwiające utworzenie statycznej witryny internetowej i wdrożenie jej na koncie usługi Azure Storage.

Po zainstalowaniu programu Visual Studio Code zainstaluj rozszerzenie wersji zapoznawczej usługi Azure Storage. To rozszerzenie integruje funkcje zarządzania usługą Azure Storage z programem Visual Studio Code. To rozszerzenie zostanie użyte do wdrożenia statycznej witryny internetowej w usłudze Azure Storage. Aby zainstalować rozszerzenie:

Uruchom program Visual Studio Code.
Na pasku narzędzi kliknij pozycję Extensions (Rozszerzenia). Wyszukaj hasło Azure Storage i wybierz rozszerzenie Azure Storage na liście. Następnie kliknij przycisk Install (Zainstaluj), aby zainstalować rozszerzenie.

Konfigurowanie hostowania statycznej witryny internetowej

Pierwszym krokiem jest skonfigurowanie konta magazynu na potrzeby hostowania statycznej witryny internetowej w witrynie Azure Portal. Gdy skonfigurujesz konto pod kątem hostowania statycznej witryny internetowej, usługa Azure Storage automatycznie utworzy kontener o nazwie $web. Kontener $web będzie zawierał pliki statycznej witryny internetowej.

Zaloguj się do witryny Azure Portal w przeglądarce internetowej.
Znajdź konto magazynu i wyświetl omówienie konta.
Wybierz pozycję Statyczna witryna internetowa, aby wyświetlić stronę konfiguracji dla statycznych witryn internetowych.
Wybierz pozycję Włączone, aby umożliwić hostowanie statycznej witryny internetowej na koncie magazynu.
W polu Nazwa dokumentu indeksu określ domyślną stronę indeksu index.html. Gdy użytkownik przejdzie do głównego elementu statycznej witryny internetowej, wyświetlona zostanie domyślna strona indeksu.
W polu Ścieżka dokumentu błędu określ domyślną stronę błędu 404. html. Gdy użytkownik spróbuje przejść do strony, która nie istnieje w statycznej witrynie internetowej, wyświetlona zostanie domyślna strona błędu.
Kliknij przycisk Zapisz. W witrynie Azure Portal jest teraz wyświetlany punkt końcowy statycznej witryny internetowej.

Wdrażanie witryny internetowej Hello world

Następnie utwórz stronę internetową Hello world w programie Visual Studio Code i wdróż ją w statycznej witrynie internetowej hostowanej na koncie usługi Azure Storage.

Utwórz pusty folder o nazwie mywebsite w lokalnym systemie plików.
Uruchom program Visual Studio Code i otwórz utworzony folder na panelu Explorer.
Utwórz domyślny plik indeksu w folderze mywebsite i nazwij go index.html.
Otwórz plik index.html w edytorze, wklej następujący tekst do pliku i zapisz go:
```
<!DOCTYPE html>
<html>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>
```
Utwórz domyślny plik błędu i nazwij go 404. html.
Otwórz plik 404.html w edytorze, wklej następujący tekst do pliku i zapisz go:
```
<!DOCTYPE html>
<html>
  <body>
    <h1>404</h1>
  </body>
</html>
```
Kliknij prawym przyciskiem myszy w obszarze folderu mywebsite na panelu Explorer, a następnie wybierz pozycję Deploy to Static Website... (Wdrażanie w statycznej witrynie internetowej), aby wdrożyć witrynę internetową. Zostanie wyświetlony monit o zalogowanie się na platformie Azure w celu pobrania listy subskrypcji.
Wybierz subskrypcję zawierającą konto magazynu, dla którego włączono hostowanie statycznej witryny internetowej. Następnie po wyświetleniu monitu wybierz konto magazynu.

Program Visual Studio Code przekaże pliki do internetowego punktu końcowego i wyświetli pasek stanu powodzenia. Uruchom witrynę internetową, aby ją wyświetlić na platformie Azure.

Pomyślnie ukończono samouczek i wdrożono statyczną witrynę internetową na platformie Azure.

Obsługa funkcji

Może to mieć wpływ na obsługę tej funkcji przez włączenie protokołu Data Lake Storage Gen2, sieciowego systemu plików (NFS) 3.0 lub protokołu SSH File Transfer Protocol (SFTP). Jeśli włączono dowolną z tych funkcji, zobacz Obsługa funkcji usługi Blob Storage na kontach usługi Azure Storage, aby ocenić obsługę tej funkcji.

Następne kroki

W tym samouczku przedstawiono sposób konfigurowania konta usługi Azure Storage na potrzeby hostowania statycznej witryny internetowej oraz tworzenia i wdrażania statycznej witryny internetowej w punkcie końcowym platformy Azure.

Następnie dowiedz się, jak skonfigurować domenę niestandardową przy użyciu statycznej witryny internetowej.

Mapowanie domeny niestandardowej na punkt końcowy usługi Azure Blob Storage