Rychlý Start: Vytvoření první statické lokality pomocí statického Web Apps Azure

  • Článek
  • 2 min ke čtení

Služba Azure static Web Apps publikuje web vytvořením aplikace z úložiště kódu. v tomto rychlém startu nasadíte aplikaci do statických webových aplikací Azure pomocí rozšíření Visual Studio Code.

Pokud nemáte předplatné Azure, Vytvořte si bezplatný zkušební účet.

Požadavky

Vytvořte úložiště

V tomto článku se používá úložiště šablon GitHubu, které vám usnadní začít. Šablona obsahuje úvodní aplikaci, která se používá k nasazení pomocí statického Web Apps Azure.

  1. Chcete-li vytvořit nové úložiště, přejděte do následujícího umístění:
    1. https://github.com/staticwebdev/vanilla-basic/generate
  2. Pojmenování úložiště My-First-static-Web-App

Poznámka

Pro vytvoření webové aplikace se v Azure static Web Apps vyžaduje aspoň jeden soubor HTML. Úložiště, které vytvoříte v tomto kroku, zahrnuje jeden soubor index.html .

Vyberte možnost Create repository from template (Vytvořit úložiště ze šablony).

Vytvořit úložiště ze šablony

Klonování úložiště

S úložištěm vytvořeným ve vašem účtu GitHubu naklonujte projekt na svůj místní počítač pomocí následujícího příkazu.

git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/my-first-static-web-app.git

Nezapomeňte nahradit <YOUR_GITHUB_ACCOUNT_NAME> vaším uživatelským jménem GitHubu.

pak otevřete Visual Studio Code a přejít na soubor > otevřít složku a otevřete tak klonované úložiště v editoru.

Vytvoření statické webové aplikace

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

    Logo Azure

    Poznámka

    abyste mohli pokračovat, musíte se přihlásit k Azure a GitHub v Visual Studio Code. Pokud ještě nejste ověřeni, rozšíření vás během procesu vytváření vyzve k přihlášení ke obou službám.

  2. V popisku statického Web Apps vyberte znaménko plus.

    Název aplikace

    Poznámka

    rozšíření Azure Static Web Apps Visual Studio Code zjednodušuje vytváření procesů pomocí řady výchozích hodnot. Pokud chcete mít jemně odstupňovaný ovládací prvek procesu vytváření, otevřete příkaz akcemi a vyberte Azure static Web Apps: vytvořit statickou webovou aplikaci... (Rozšířené).

  3. V horní části editoru se otevře paleta příkazů a zobrazí výzvu k výběru názvu předplatného.

    Vyberte své předplatné a stiskněte klávesu ENTER.

    Výběr předplatného Azure

  4. V dalším kroku pojmenujte svoji aplikaci.

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

    Vytvoření statické webové aplikace

  5. Vyberte oblast blízko od vás.

    Poznámka

    Statická Web Apps v rámci Azure static distribuuje statické prostředky. Oblast, kterou vyberete, určuje, kde se bude nacházet vaše volitelná přípravná prostředí a aplikace funkcí rozhraní API.

  6. Vyberte Předvolby, které odpovídají typu aplikace.

    Přednastavení aplikace: žádné rozhraní

    Jako umístění souborů aplikace zadejte /Src a stiskněte klávesu ENTER.

    Tato aplikace nevytváří výstup sestavení. Zajistěte, aby bylo umístění výstupu sestavení prázdné a stiskněte klávesu ENTER.

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

    Potvrzení o vytvoření

    vzhledem k probíhajícímu nasazení nahlásí rozšíření Visual Studio Code stav buildu.

    Čekání na nasazení

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

  8. Chcete-li zobrazit web v prohlížeči, klikněte pravým tlačítkem na projekt v rozšíření statické Web Apps a vyberte Procházet lokalita.

    Procházet web

Vyčištění prostředků

Pokud nebudete tuto aplikaci nadále používat, můžete pomocí rozšíření odstranit instanci statického Web Apps Azure.

v okně průzkumníka Visual Studio Code se vraťte do oddílu Static Web Apps a klikněte pravým tlačítkem na my-first-Static-Web-app a vyberte odstranit.

Odstranit aplikaci

Další kroky

Přidání rozhraní API