Rychlý start: Sestavení první statické webové aplikace

Azure Static Web Apps publikuje web do produkčního prostředí vytvořením aplikací z úložiště Azure DevOps nebo GitHubu. V tomto rychlém startu nasadíte webovou aplikaci do statických webových aplikací Azure pomocí webu Azure Portal.

Předpoklady

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

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

Vytvoření úložiště

Tento článek používá úložiště šablon GitHubu, abyste mohli snadno začít. Šablona obsahuje úvodní aplikaci pro nasazení do Azure Static Web Apps.

Žádná architektura

1. Přejděte do následujícího umístění a vytvořte nové úložiště:
   1. https://github.com/staticwebdev/vanilla-basic/generate
2. Pojmenujte své úložiště my-first-static-web-app

Poznámka:

Azure Static Web Apps k vytvoření webové aplikace vyžaduje alespoň jeden soubor HTML. Úložiště, které vytvoříte v tomto kroku, obsahuje jeden soubor index.html .

Angular

1. Přejděte do následujícího umístění a vytvořte nové úložiště:
   1. https://github.com/staticwebdev/angular-basic/generate
2. Pojmenujte své úložiště my-first-static-web-app

Blazor

1. Přejděte do následujícího umístění a vytvořte nové úložiště:
   1. https://github.com/staticwebdev/blazor-basic/generate
2. Pojmenujte své úložiště my-first-static-web-app

React

1. Přejděte do následujícího umístění a vytvořte nové úložiště:
   1. https://github.com/staticwebdev/react-basic/generate
2. Pojmenujte své úložiště my-first-static-web-app

Vue

1. Přejděte do následujícího umístění a vytvořte nové úložiště:
   1. https://github.com/staticwebdev/vue-basic/generate
2. Pojmenujte své úložiště my-first-static-web-app

Vyberte Create repository (Vytvořit úložiště).

Vytvoření úložiště

Tento článek používá úložiště Azure DevOps, které vám usnadní začátek. Úložiště obsahuje úvodní aplikaci použitou k nasazení pomocí Azure Static Web Apps.

1. Přihlaste se ke službě Azure DevOps.

2. Vyberte Nové úložiště.

3. V okně Vytvořit nový projekt rozbalte nabídku Upřesnit a proveďte následující výběry:

   Nastavení	Hodnota
   Projekt	Zadejte my-first-web-static-app.
   Viditelnost	Vyberte Soukromý.
   Správa verzí	Vyberte Git.
   Proces pracovní položky	Vyberte možnost, která nejlépe vyhovuje vašim metodám vývoje.

4. Vyberte Vytvořit.

5. Vyberte položku nabídky Úložiště.

6. Vyberte položku nabídky Soubory.

7. Na kartě Import úložiště vyberte Importovat.

8. Zkopírujte adresu URL úložiště pro architekturu podle vašeho výběru a vložte ji do pole Klonovat adresu URL .

   Žádná architektura

   https://github.com/staticwebdev/vanilla-basic.git

   Angular

   https://github.com/staticwebdev/angular-basic.git

   Blazor

   https://github.com/staticwebdev/blazor-basic.git

   React

   https://github.com/staticwebdev/react-basic.git

   Vue

   https://github.com/staticwebdev/vue-basic.git

9. Vyberte Importovat a počkejte na dokončení procesu importu.

Vytvoření statické webové aplikace

Teď, když je úložiště vytvořené, můžete vytvořit statickou webovou aplikaci z webu Azure Portal.

1. Přejděte na Azure Portal.
2. Vyberte Vytvořit prostředek.
3. Vyhledejte statické webové aplikace.
4. Vyberte staické webové aplikace (Static Web Apps).
5. Vyberte Vytvořit.

V části Základy začněte tím, že nakonfigurujete novou aplikaci a propojíte ji s úložištěm GitHub.

Nastavení	Hodnota
Předplatné	Vyberte své předplatné Azure.
Skupina prostředků	Vyberte odkaz Vytvořit nový a do textového pole zadejte static-web-apps-test.
Název	Do textového pole zadejte my-first-static-web-app .
Typ plánu	Vyberte Free.
Podrobnosti o službě Azure Functions a přípravném prostředí	Vyberte oblast, která je k vám nejblíže.
Source	Vyberte GitHub.

Vyberte Přihlášení pomocí GitHubu a ověřte se pomocí GitHubu.

Po přihlášení pomocí GitHubu zadejte informace o úložišti.

Nastavení	Hodnota
Organizace	Vyberte svoji organizaci.
Úložiště	Vyberte my-first-web-static-app.
Pobočka	Vyberte <branch_name>.

Poznámka:

Pokud nevidíte žádná úložiště:

• Možná budete muset autorizovat Azure Static Web Apps na GitHubu. Přejděte do svého profilu GitHubu a přejděte na Nastavení > Aplikace Autorizované aplikace> OAuth, vyberte Azure Static Web Apps a pak vyberte Udělit.
• Možná budete muset autorizovat Azure Static Web Apps ve vaší organizaci Azure DevOps. Abyste mohli udělit oprávnění, musíte být vlastníkem organizace. Požádejte o přístup k aplikacím třetích stran prostřednictvím OAuth. Další informace najdete v tématu Autorizace přístupu k rozhraním REST API pomocí OAuth 2.0.

V části Základy začněte tím, že nakonfigurujete novou aplikaci a propojíte ji s úložištěm Azure DevOps.

Nastavení	Hodnota
Předplatné	Vyberte své předplatné Azure.
Skupina prostředků	Vyberte odkaz Vytvořit nový a do textového pole zadejte static-web-apps-test.
Název	Do textového pole zadejte my-first-static-web-app .
Typ plánu	Vyberte Free.
Podrobnosti o službě Azure Functions a přípravném prostředí	Vyberte oblast, která je k vám nejblíže.
Source	Vyberte DevOps.
Organizace	Vyberte svoji organizaci.
Projekt	Vyberte projekt.
Úložiště	Vyberte my-first-web-static-app.
Pobočka	Vyberte <branch_name>.

Poznámka:

Ujistěte se, že větev, kterou používáte, není chráněná a že máte dostatečná oprávnění k vydání push příkazu. Pokud to chcete ověřit, přejděte do svého úložiště DevOps a přejděte do části Repos ->Branches a vyberte Další možnosti. Dále vyberte větev a pak zásady větve, abyste zajistili, že požadované zásady nejsou povolené.

V části Podrobnosti sestavení přidejte podrobnosti konfigurace specifické pro preferovanou front-endovou architekturu.

Žádná architektura

1. V rozevíracím seznamu Přednastavení sestavení vyberte Vlastní.
2. Do pole Umístění aplikace zadejte ./src.
3. Pole Umístění rozhraní API nechte prázdné.
4. Zadejte pole umístění artefaktu aplikace ./src.

Angular

1. V rozevíracím seznamu Přednastavení sestavení vyberte Angular.
2. Ponechte výchozí hodnotu v poli Umístění aplikace.
3. Pole Umístění rozhraní API nechte prázdné.
4. Do pole Umístění artefaktu aplikace zadejte dist/angular-basic.

Blazor

1. V rozevíracím seznamu Předvolby sestavení vyberte Blazor.
2. Ponechte výchozí hodnotu Klienta v poli Umístění aplikace.
3. Pole Umístění rozhraní API nechte prázdné.
4. Ponechte výchozí hodnotu wwwroot v poli Umístění artefaktu aplikace.

React

1. V rozevíracím seznamu Přednastavení sestavení vyberte React.
2. Ponechte výchozí hodnotu v poli Umístění aplikace.
3. Pole Umístění rozhraní API nechte prázdné.
4. Do pole Umístění artefaktu aplikace zadejte build.

Vue

1. V rozevíracím seznamu Přednastavení sestavení vyberte Vue.js.
2. Ponechte výchozí hodnotu v poli Umístění aplikace.
3. Pole Umístění rozhraní API nechte prázdné.
4. Ponechte výchozí hodnotu v poli Umístění artefaktu aplikace.

Vyberte Zkontrolovat a vytvořit.

Poznámka:

Po vytvoření aplikace můžete soubor pracovního postupu upravit a změnit tyto hodnoty.

Vyberte Vytvořit.

Vyberte Přejít k prostředku.

Zobrazení webu

Nasazení statické aplikace má dva aspekty. První vytvoří podkladové prostředky Azure, které tvoří vaši aplikaci. Druhým je pracovní postup, který sestaví a publikuje vaši aplikaci.

Než budete moct přejít na novou statickou lokalitu, musí se sestavení nasazení nejprve dokončit.

V okně Přehled statických webových aplikací se zobrazí řada odkazů, které vám pomůžou pracovat s webovou aplikací.

1. Výběrem na banneru, který říká, že výběrem sem zkontrolujete stav spuštění GitHub Actions, přejdete na GitHub Actions spuštěné v úložišti. Jakmile ověříte, že je úloha nasazení dokončená, můžete přejít na web přes vygenerovanou adresu URL.

2. Po dokončení pracovního postupu GitHub Actions můžete vybrat odkaz na adresu URL a otevřít web na nové kartě.

Po dokončení pracovního postupu můžete vybrat odkaz na adresu URL a otevřít web na nové kartě.

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

Pokud tuto aplikaci nebudete dál používat, můžete instanci Azure Static Web Apps odstranit pomocí následujících kroků:

1. Otevřete Azure Portal.
2. Na horním panelu hledání vyhledejte moji první webovou statickou aplikaci .
3. Vyberte název aplikace.
4. Vyberte Odstranit.
5. Výběrem možnosti Ano potvrďte akci odstranění (dokončení této akce může chvíli trvat).

Další kroky

Přidání rozhraní API