Cvičení – začínáme

  • 7 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.

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, ujistěte se, že jste aktivovali sandbox v horní části této stránky.

Tip

Pokud narazíte na problémy se závislostmi uzlů, ujistěte se, že máte nainstalovaný Node Version Manager a můžete přepnout na starší verzi.

Vytvoření úložiště

V tomto kroku vytvoříte nové úložiště na základě šablony úložiště GitHub. K dispozici je řada šablon, z nichž každá obsahuje úvodní aplikaci sestavenou na jiné front-endové platformě.

  1. Přejděte na stránku vytvořit ze šablony pro úložiště šablony.

    • Pokud se zobrazí chyba „404 Stránka se nenašla.“, přihlaste se na GitHub a zkuste to znovu.

  2. Pokud se zobrazí výzva k zadání vlastníka (Owner), vyberte jeden ze svých účtů GitHub.

  3. Pojmenujte své úložiště my-static-web-app-authn.

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

Místní klonování aplikace

Právě jste vytvořili úložiště GitHub s názvem my-static-web-app-authn ve vašem účtu GitHubu. Teď úložiště naklonujte a spusťte kód místně na svém počítači.

  1. Na počítači si otevřete terminál.

  2. Začněte naklonováním úložiště GitHub do svého počítače.

    git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-authn

  3. Přejděte do složky s vaším zdrojovým kódem.

    cd my-static-web-app-authn

Nakonfigurujte CORS místně

Při publikování do Azure Static Web Apps se nemusíte starat o sdílení prostředků mezi zdroji (CORS). Služba Azure Static Web Apps automaticky nakonfiguruje vaši aplikaci tak, aby dokázala komunikovat s vaším rozhraním API v Azure pomocí reverzního proxy. Při místním spuštění ale musíte CORS nakonfigurovat, abyste umožnili komunikaci webové aplikace a rozhraní API.

Teď dejte službě Azure Functions pokyn, aby vaší webové aplikaci povolila provádět požadavky HTTP na rozhraní API ve vašem počítači.

  1. Vytvořte soubor s názvem api/local.settings.json.

  2. Do souboru přidejte následující obsah:

    {
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

Poznámka:

Soubor local.settings.json je uveden v souboru .gitignore, který znemožňuje jeho odeslání na GitHub. Důvodem je to, že v tomto souboru byste mohli mít uložené tajné kódy, jejichž odeslání na GitHub by bylo nežádoucí. A právě proto jste si museli tento soubor vytvořit při vytváření úložiště ze šablony.

Spusťte rozhraní API

Složka api obsahuje projekt Azure Functions s koncovými body HTTP pro webovou aplikaci. Začněte spuštěním rozhraní API místně pomocí následujícího postupu:

Poznámka:

Nezapomeňte nainstalovat nástroje Azure Functions Core Tools , které vám umožní spouštět azure Functions místně.

  1. V editoru Visual Studio Code otevřete paletu příkazů stisknutím klávesy F1.

  2. Zadejte a vyberte Terminál: Vytvořit nový integrovaný terminál.

  3. Přejděte do složky api :

    cd api

  4. Spusťte aplikaci Azure Functions místně:

    func start

Spusťte webovou aplikaci

  1. Dále přejděte do složky preferované front-endové architektury následujícím způsobem:

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  2. Teď nainstalujte závislosti aplikace.

    npm install

  3. Nakonec spusťte front-endovou klientskou aplikaci.

    npm start

    npm start

    npm run dev

    npm run serve

Přejděte do aplikace

Je čas podívat se, jak vaše aplikace běží místně. Každá front-endová aplikace běží na jiném portu.

  1. Výběrem odkazu přejděte k aplikaci.

  1. Přejděte na http://localhost:4200.

    Snímek obrazovky s uživatelským rozhraním webové aplikace Angular

  1. Přejděte na http://localhost:3000.

    Snímek obrazovky s uživatelským rozhraním webové aplikace React

  1. Přejděte na http://localhost:5000.

    Snímek obrazovky s uživatelským rozhraním webové aplikace Svelte

  1. Přejděte na http://localhost:8080.

    Snímek obrazovky s uživatelským rozhraním webové aplikace Vue

Aplikace by měla zobrazit seznam produktů.

  1. Stisknutím CTRL-C na terminálu teď můžete spuštěnou aplikaci zastavit.

Sestavili jste svou aplikaci a ta teď běží místně ve vašem prohlížeči.

Teď aplikaci publikujete do Azure Static Web Apps.

Vytvoření statické webové aplikace

Teď když jste si vytvořili úložiště na GitHubu, můžete vytvořit instanci Static Web Apps přes rozšíření Azure Static Web Apps pro Visual Studio Code.

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 Nainstalovat.

  3. Po dokončení instalace vyberte Znovu načíst.

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

  1. V editoru Visual Studio Code se přihlaste k Azure tak>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 výběrem > soubor 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ů F1, zadáte Azure: Select Subscriptionsa stisknete Enter.

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

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

Vytvoření statické webové aplikace pomocí editoru Visual Studio Code

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

  2. V editoru 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 popisek Static Web Apps a vyberte + (znaménko plus).

    Snímek obrazovky znázorňující zadaný název aplikace

  4. Když se paleta příkazů otevře v horní části editoru, vyberte Concierge Subscription a stiskněte Enter.

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

  5. Zadejte my-static-web-app-authn a stiskněte Enter.

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

  6. Vyberte oblast, která je k vám nejblíže, a stiskněte Enter.

    Snímek obrazovky znázorňující výběr umístění

  7. Vyberte odpovídající možnost architektury a stiskněte Enter.

  1. Jako umístění kódu aplikace vyberte angular-app a stiskněte Enter.

    Snímek obrazovky znázorňující umístění kódu aplikace Angular

  2. Zadejte dist/angular-app jako výstupní 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í cestu k souborům aplikace Angular

  1. Jako umístění kódu aplikace vyberte react-app a stiskněte Enter.

    Snímek obrazovky zobrazující umístění kódu aplikace React

  2. Zadejte build jako výstupní 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í cestu k souborům aplikace React

  1. Jako umístění kódu aplikace vyberte svelte-app a stiskněte Enter.

    Snímek obrazovky zobrazující umístění kódu aplikace Svelte

  2. Zadejte veřejné jako výstupní 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í cestu k souborům aplikace Svelte

  1. Jako umístění kódu aplikace vyberte vue-app a stiskněte Enter.

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

  2. Zadejte dist jako výstupní 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í cestu k souborům aplikace 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 znázorňující místní okno Otevřít akce v GitHubu nebo Zobrazit nebo Upravit konfiguraci

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

:::image type="content" source="../media/extension-waiting-for-deployment.png" alt-text="Screenshot showing the waiting for deployment button.":::

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

    Snímek obrazovky s nabídkou GitHub Actions ve VS Code

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

  2. 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 s tlačítkem procházet web

Gratulujeme! Nasadili jste aplikaci do Azure Static Web Apps!

Poznámka:

Nemějte obavy, pokud se zobrazí webová stránka s informacemi, že aplikace ještě nebyla sestavena a nasazena. 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.

Stažení změn z GitHubu

Stáhněte si nejnovější změny z GitHubu a stáhněte si soubor pracovního postupu vytvořený službou Azure Static Web Apps:

  1. Stisknutím klávesy F1 otevřete paletu příkazů.

  2. Zadejte a vyberte Git: Pull a stiskněte Enter.

Další kroky

Dále se dozvíte, jak integrovat ověřování uživatelů do aplikace.