Sdílet prostřednictvím

Kurz: Hostování statického webu ve službě Blob Storage

V tomto kurzu se dozvíte, jak sestavit a nasadit statický web do Služby Azure Storage. Po dokončení budete mít statický web, ke kterému mají uživatelé přístup veřejně.

V tomto kurzu se naučíte:

  • Konfigurace hostování statických webů
  • Nasazení webu Hello World

Statické weby mají určitá omezení. Pokud například chcete nakonfigurovat hlavičky, budete muset použít Azure Content Delivery Network (Azure CDN). V rámci samotné funkce statického webu není možné konfigurovat hlavičky. Také se nepodporuje autentizace a autorizace.

Pokud jsou tyto funkce pro váš scénář důležité, zvažte použití azure Static Web Apps. Je to skvělá alternativa ke statickým webům a je vhodná i v případech, kdy k vykreslení obsahu nepotřebujete webový server. Můžete nakonfigurovat hlavičky a ověřování AuthN / AuthZ je plně podporováno. Azure Static Web Apps také poskytuje plně spravovaný pracovní postup kontinuální integrace a nepřetržitého doručování (CI/CD) ze zdroje na GitHubu do globálního nasazení.

Toto video ukazuje, jak hostovat statický web ve službě Blob Storage.

Kroky ve videu jsou popsané také v následujících částech.

Požadavky

Pro přístup ke službě Azure Storage budete potřebovat předplatné Azure. Pokud ještě nemáte předplatné, vytvořte si před zahájením bezplatný účet .

Veškerý přístup ke službě Azure Storage probíhá prostřednictvím účtu úložiště. Pro účely tohoto rychlého startu vytvořte účet úložiště pomocí webu Azure Portal, Azure PowerShellu nebo Azure CLI. Nápovědu k vytvoření účtu úložiště najdete v tématu Vytvoření účtu úložiště.

Poznámka:

Statické weby jsou nyní k dispozici pro účty úložiště Standard verze 2 pro obecné účely, stejně jako pro účty úložiště s povoleným hierarchickým oborem názvů.

Tento kurz používá Visual Studio Code, bezplatný nástroj pro programátory, k sestavení statického webu a jeho nasazení do účtu Azure Storage.

Po instalaci nástroje Visual Studio Code nainstalujte rozšíření Azure Storage ve verzi Preview. Toto rozšíření integruje funkce správy služby Azure Storage se sadou Visual Studio Code. Rozšíření použijete k nasazení statického webu do Azure Storage. Instalace rozšíření:

  1. Spusťte Visual Studio Code.

  2. Na panelu nástrojů klikněte na Rozšíření. Vyhledejte Azure Storage a ze seznamu vyberte rozšíření Azure Storage . Potom klikněte na tlačítko Instalovat a nainstalujte rozšíření.

    Instalace rozšíření Azure Storage ve VS Code

Konfigurace hostování statických webů

Prvním krokem je konfigurace účtu úložiště pro hostování statického webu na webu Azure Portal. Když nakonfigurujete účet pro hostování statických webů, Azure Storage automaticky vytvoří kontejner s názvem $web. Kontejner $web bude obsahovat soubory pro váš statický web.

  1. Přihlaste se k webu Azure Portal ve webovém prohlížeči.

  2. Vyhledejte svůj úložný účet a zobrazte jeho přehled.

  3. Vyberte Statický web , aby se zobrazila stránka konfigurace statických webů.

  4. Výběrem možnosti Povoleno povolíte hostování statického webu pro účet úložiště.

  5. V poli Název dokumentu rejstříku zadejte výchozí indexovou stránku index.html. Výchozí indexová stránka se zobrazí, když uživatel přejde do kořenového adresáře vašeho statického webu.

  6. V poli Cesta k dokumentu Chyba zadejte výchozí chybovou stránku 404.html. Výchozí chybová stránka se zobrazí, když se uživatel pokusí přejít na stránku, která na vašem statickém webu neexistuje.

  7. Klikněte na Uložit. Nyní se na portálu Azure zobrazuje koncový bod vašeho statického webu.

    Povolení hostování statického webu pro účet úložiště

Nasazení webu Hello World

Dále vytvořte webovou stránku Hello World pomocí editoru Visual Studio Code a nasaďte ji na statický web hostovaný ve vašem účtu Azure Storage.

  1. Vytvořte prázdnou složku s názvem mywebsite v místním systému souborů.

  2. Spusťte Visual Studio Code a otevřete složku, kterou jste právě vytvořili z panelu Průzkumník .

    Otevření složky v editoru Visual Studio Code

  3. Ve složce osobního webu vytvořte výchozí indexový soubor a pojmenujte ho index.html.

    Vytvoření výchozího indexového souboru v editoru Visual Studio Code

  4. Otevřete index.html v editoru, vložte do souboru následující text a uložte ho:

    <!DOCTYPE html>
<html>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

  5. Vytvořte výchozí soubor chyby a pojmenujte ho404.html.

  6. Otevřete 404.html v editoru, vložte do souboru následující text a uložte ho:

    <!DOCTYPE html>
<html>
  <body>
    <h1>404</h1>
  </body>
</html>

  7. Klikněte pravým tlačítkem myši na složku mywebsite na panelu Průzkumník a vyberte Nasadit na statický web... pro nasazení vašeho webu. Zobrazí se výzva k přihlášení k Azure, abyste získali seznam předplatných.

  8. Vyberte předplatné obsahující účet úložiště, pro které jste povolili hostování statického webu. Potom po zobrazení výzvy vyberte účet úložiště.

Visual Studio Code teď nahraje soubory do webového koncového bodu a zobrazí stavový řádek úspěchu. Spusťte web a zobrazte ho v Azure.

Úspěšně jste dokončili kurz a nasadili statický web do Azure.

Podpora funkcí

Podpora této funkce může mít vliv na povolení protokolu Data Lake Storage Gen2, systému souborů NFS (Network File System) 3.0 nebo protokolu SSH File Transfer Protocol (SFTP). Pokud jste některou z těchto funkcí povolili, podívejte se na podporu funkcí služby Blob Storage v účtech Azure Storage a vyhodnoťte podporu této funkce.

Další kroky

V tomto kurzu jste zjistili, jak nakonfigurovat účet Azure Storage pro hostování statických webů a jak vytvořit a nasadit statický web do koncového bodu Azure.

Dále se dozvíte, jak nakonfigurovat vlastní doménu se statickým webem.

Mapování vlastní domény na koncový bod služby Azure Blob Storage

  • Last updated on