Cvičení – vytvoření statické webové aplikace Azure

  • 5 min

V tomto cvičení vytvoříte instanci Azure Static Web Apps zahrnující akci GitHubu, která bude automaticky sestavovat a publikovat vaši aplikaci.

Vytvoření statické webové aplikace

Teď když jste si vytvořili úložiště na GitHubu, můžete přes Azure Portal vytvořit instanci Static Web Apps.

Tento modul používá sandbox Azure k poskytnutí bezplatného dočasného předplatného Azure, které můžete použít k dokončení cvičení. Než budete pokračovat, nezapomeňte aktivovat sandbox v horní části této stránky.

Sandbox Azure, který jste aktivovali, vám umožňuje používat služby Azure bez jakýchkoli poplatků.

Instalace rozšíření Azure Static Web Apps pro Visual Studio Code

  1. Přejděte na web Visual Studio Marketplace a nainstalujte rozšíření Azure Static Web Apps pro Visual Studio Code.

  2. Když se v editoru Visual Studio Code načte karta rozšíření, vyberte tlačítko Instalovat .

  3. Po dokončení instalace vyberte po zobrazení výzvy možnost Restartovat a aktualizujte ji.

Přihlášení k Azure ve Visual Studio Code

  1. V editoru Visual Studio Code se přihlaste k Azure tak, že vyberete Paletu příkazů zobrazit>a zadáte Azure: Přihlásit se.

    Důležité

    Přihlaste se k Azure pomocí stejného účtu, jaký jste použili k vytvoření sandboxu. Sandbox poskytuje přístup k předplatnému Concierge Subscription.

  2. Postupujte podle pokynů. Zkopírujte poskytnutý kód a vložte ho do webového prohlížeče, čímž ověříte relaci editoru Visual Studio Code.

Vyberte své předplatné.

  1. Otevřete Visual Studio Code a vyberte Otevřít soubor > a otevřete úložiště, které jste naklonovali do počítače v editoru.

  2. Ověřte, že jste vyfiltrovali předplatná Azure tak, aby zahrnovala předplatné Concierge, a to tak, že otevřete paletu příkazů a zadáte Azure: Select Subscriptions, a stiskněte Enter.

  3. Vyberte Předplatné Concierge a stiskněte Enter.

    Snímek obrazovky editoru VS Code znázorňující, jak filtrovat podle předplatného

Vytvoření statické webové aplikace

  1. Otevřete Visual Studio Code a výběrem možnosti Otevřít soubor > otevřete úložiště, které jste naklonovali do počítače v editoru.

  2. Ve Visual Studio Code výběrem loga Azure na panelu aktivit otevřete okno rozšíření Azure.

    Snímek obrazovky s logem Azure ve VS Code

    Poznámka:

    Vyžaduje se přihlášení k Azure a GitHubu. Pokud ještě ve Visual Studio Code nejste přihlášení k Azure a GitHubu, rozšíření vás během procesu vytváření vyzve k přihlášení k oběma účtům.

  3. Umístěte myš na záhlaví Static Web Apps , klikněte pravým tlačítkem myši a vyberte Vytvořit statickou webovou aplikaci.

    Snímek obrazovky znázorňující, kam se má webová aplikace vytvořit

  4. Zadejte název my-first-static-web-app a stiskněte Enter.

    Snímek obrazovky znázorňující, jak vytvořit statickou webovou aplikaci

  5. Vyberte umístění a stiskněte Enter.

    Snímek obrazovky znázorňující, jak vybrat předplatné

  1. Vyberte možnost Angular a stiskněte Enter.

    Snímek obrazovky znázorňující vybranou možnost angular

  2. Jako umístění kódu aplikace zadejte /angular-app a stiskněte Enter.

    Snímek obrazovky zobrazující umístění kódu zadané jako aplikaci Angular

  3. Zadejte dist/angular-app jako výstupní umístění sestavení, kde jsou soubory vytvořené pro produkční prostředí v aplikaci, a stiskněte Enter.

    Snímek obrazovky znázorňující, jak zadat výstupní umístění sestavení pro Angular

  1. Vyberte možnost React a stiskněte Enter.

    Snímek obrazovky znázorňující vybranou možnost React

  2. Jako umístění kódu aplikace zadejte /react-app a stiskněte Enter.

    Snímek obrazovky znázorňující umístění kódu zadaného jako aplikace React

  3. Zadejte sestavení jako výstupní umístění sestavení, kde jsou soubory vytvořené pro produkční prostředí v aplikaci, a stiskněte Enter.

    Snímek obrazovky znázorňující, jak zadat výstupní umístění sestavení pro React

  1. Vyberte možnost Svelte a stiskněte Enter.

    Snímek obrazovky znázorňující vybranou možnost zkosení

  2. Jako umístění kódu aplikace zadejte /svelte-app a stiskněte Enter.

    Snímek obrazovky znázorňující umístění kódu zadané jako aplikace Svelte

  3. Jako výstupní umístění sestavení zadejte veřejné umístění, kde jsou soubory vytvořené pro produkční prostředí v aplikaci, a stiskněte Enter.

    Snímek obrazovky znázorňující, jak zadat výstupní umístění sestavení pro Svelte

  1. Vyberte možnost Vue a stiskněte Enter.

    Snímek obrazovky znázorňující vybranou možnost vue

  2. Jako umístění kódu aplikace zadejte /vue-app a stiskněte Enter.

    Snímek obrazovky znázorňující umístění kódu zadané jako aplikace Vue

  3. Zadejte dist jako výstupní umístění sestavení, kde jsou soubory vytvořené pro produkční prostředí v aplikaci, a stiskněte Enter.

    Snímek obrazovky znázorňující, jak zadat výstupní umístění sestavení pro Vue

Poznámka:

Úložiště může být trochu jiné než úložiště, které jste použili v minulosti. Obsahuje čtyři různé aplikace ve čtyřech různých složkách. Každá složka obsahuje aplikaci vytvořenou na jiné platformě JavaScript. Obvyklé je, že v kořeni úložiště máte jednu aplikaci a jako cestu k aplikaci zadáte /. Toto je skvělý příklad toho, proč vám služba Azure Static Web Apps dává na prvním místě možnost nakonfigurovat umístění – získáváte plnou kontrolu nad tím, jak se aplikace sestaví.

  1. Po vytvoření aplikace se ve Visual Studio Code zobrazí oznámení s potvrzením.

    Snímek obrazovky s potvrzovací kód s výzvou, aby uživatel otevřel akce v GitHubu nebo v zobrazení nebo úpravě konfigurace

    Vzhledem k tomu, že nasazení probíhá, rozšíření editoru Visual Studio Code vám hlásí stav sestavení.

    Snímek obrazovky s uživatelským rozhraním VS Code zobrazující čekání na nasazení

  2. Průběh nasazení můžete zobrazit pomocí GitHub Actions rozbalením nabídky Actions .

    Snímek obrazovky znázorňující, jak zkontrolovat průběh prostřednictvím GitHub Actions

    Po dokončení nasazení můžete přejít přímo na svůj web.

  3. Pokud chcete web zobrazit v prohlížeči, klikněte pravým tlačítkem myši na projekt v rozšíření Static Web Apps a vyberte Procházet web.

    Snímek obrazovky znázorňující, jak přejít na statický web webové aplikace

Gratulujeme! Nasadili jste svou první aplikaci do Azure Static Web Apps!

Poznámka:

Nemusíte mít obavy, pokud se zobrazí webová stránka se zprávou, že aplikace ještě není sestavená a nasazená. Za chvíli prohlížeč aktualizujte. Akce GitHubu se při vytváření statické webové aplikace v rámci Azure Static Web Apps spustí automaticky. Pokud se zobrazí jen úvodní stránka, aplikace se teprve nasazuje.