Cvičení – začínáme

Dokončeno

V tomto cvičení vytvoříte instanci statické webové aplikace Azure, včetně akce GitHubu, která automaticky sestaví a publikuje váš web.

Tento modul používá prostředky dostupné prostřednictvím sandboxu, který poskytuje bezplatný dočasný přístup k předplatnému Azure spolu s prostředky, které potřebujete k dokončení cvičení. Nezapomeňte aktivovat sandbox v horní části této stránky. Při procházení cvičení v tomto modulu závisí každá lekce na obsahu, který jste vytvořili v předchozím cvičení. Z tohoto důvodu vyberte javascriptovou architekturu a použijte ji pro všechna další cvičení.

Vytvoření úložiště

Začněte tím, že vytvoříte úložiště pomocí šablony GitHubu. K dispozici je řada šablon úložišť, která obsahuje úvodní aplikaci implementovanou v různých front-endových architekturách.

1. Přejděte na stránku vytvoření ze šablony na GitHubu.

2. Pokud se zobrazí výzva k zadání vlastníka, vyberte jeden z vašich účtů GitHubu.

3. Jako název úložiště zadejte my-static-web-app-and-api.

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

   Při vytváření projektu ze šablony GitHub sestaví úložiště na pozadí.

Místní spuštění aplikace

Teď máte úložiště GitHub s názvem my-static-web-app-and-api ve svém účtu GitHubu. Dále naklonujete úložiště GitHub a spustíte kód místně na svém počítači.

1. Otevřete okno terminálu v počítači.

   Pokud používáte Windows, můžete do vyhledávacího pole na hlavním panelu systému zadat cmd.

2. Pokud chcete úložiště naklonovat do počítače, vložte do okna příkazového řádku následující kód.

   Nezapomeňte nahradit <YOUR_GITHUB_USERNAME> uživatelským jménem GitHubu.

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

   Poznámka

   Pokud máte potíže s kopírováním do terminálu příkazového řádku, klikněte pravým tlačítkem myši na ikonu v záhlaví a na kartě Vlastnosti zkontrolujte, že je zaškrtnuté políčko Kopírovat/Vložit pomocí kombinace kláves Ctrl+Shift+C/V .

3. Přejděte do adresáře zdrojového kódu, který jste naklonovali.

   cd my-static-web-app-and-api
   

4. Přejděte do adresáře pro preferovanou front-end architekturu.

   cd angular-app
   

   cd react-app
   

   cd svelte-app
   

   cd vue-app
   

5. Nainstalujte závislosti aplikace.

   npm install
   

6. Pomocí následujícího příkazu se ujistěte, že je nainstalovaná nejnovější verze každé závislosti.

   npm audit fix
   

7. Spusťte front-end klientskou aplikaci.

   npm start
   

   npm start
   

   npm run dev
   

   npm run serve
   

Přejděte do aplikace.

Po vygenerování a kompilaci sady aplikací se automaticky otevře karta prohlížeče, která zobrazí vaši aplikaci spuštěnou místně.

Místní hostitel pro angular je http://localhost:4200.

Místní hostitel pro react je http://localhost:3000.

Místní server pro Svelte je http://localhost:5000.

Místní hostitel pro Vue je http://localhost:8080.

Aplikace by měla říct Načítání dat ..., protože zatím nejsou žádná data ani rozhraní API. API pro vaši webovou aplikaci přidáte později v této lekci.

V terminálu stisknutím klávesy Ctrl+C zastavte dávkovou úlohu.

Blahopřejeme! Vytvořili jste aplikaci a viděli jste, že běží místně v prohlížeči. Dále můžete aplikaci publikovat do Azure Static Web Apps.

Vytvoření statické webové aplikace

Vytvořili jste vlastní úložiště GitHub. Teď můžete vytvořit vlastní statickou webovou aplikaci pomocí rozšíření Azure Static Web Apps pro Visual Studio Code.

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

1. Otevřete Visual Studio Code.

2. V horní nabídce vyberte Zobrazit>, Rozšířenía do vyhledávacího pole zadejte Azure Static Web Apps.

3. Po načtení karty rozšíření v editoru Visual Studio Code vyberte Nainstalovat.

Otevření složky aplikace

1. Výběrem F1 otevřete paletu příkazů editoru Visual Studio Code.

2. Zadejte soubor: Otevřít složku....

3. Vyberte složku my-static-web-app-and-api.

4. Vyberte možnost Otevřít, aby se otevřela složka v editoru Visual Studio Code.

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

1. Výběrem F1 otevřete paletu příkazů editoru Visual Studio Code.

2. Zadejte Azure: Přihlaste se a postupujte podle pokynů k ověření.

   Důležitý

   Ujistěte se, že se k Azure přihlašujete pomocí stejného účtu, který jste použili k aktivaci sandboxu v prohlížeči. Použití stejného účtu zpřístupňuje předplatné Concierge, které vám během tohoto kurzu poskytuje přístup k bezplatným prostředkům Azure.

Vyberte své předplatné.

1. Výběrem F1 otevřete paletu příkazů editoru Visual Studio Code.

2. Zadejte Azure: vyberte předplatnáa zrušte zaškrtnutí u všech výběrů, kromě předplatného Concierge.

   

Potvrzení změn

Když jste nainstalovali závislosti aplikace, některé soubory v projektu byly v procesu aktualizovány. Abyste mohli pokračovat, musíte tyto změny potvrdit do úložiště.

1. Výběrem F1 otevřete paletu příkazů editoru Visual Studio Code.

2. Zadejte a vyberte Git Commit All.

3. Do horní části souboru zadejte počáteční potvrzení.

4. Uložte a zavřete soubor git commit.

   V tuto chvíli se nemusíte starat o synchronizaci změn se serverem. Aktualizace se zkopírují do GitHubu při publikování statické webové aplikace.

Vytvoření statické webové aplikace

K vytvoření statické webové aplikace je nutné mít aktuální ověřené relace v Azure a GitHubu. Pokud ještě nejste přihlášení k oběma poskytovatelům, rozšíření vás vyzve k přihlášení během procesu vytváření.

1. Výběrem F1 otevřete paletu příkazů editoru Visual Studio Code.

2. Zadejte a vyberte Azure Static Web Apps: Vytvořit statickou webovou aplikaci....

   Do zbývajících výzev palety příkazů zadejte následující hodnoty.

   Výzva	Hodnota
   Předplatné	Vyberte předplatné Concierge.
   Jméno	Zadejte my-static-web-app-and-api.
   Oblast	Vyberte oblast, která je k vám nejblíže.
   Předvolba	Výběr Angular
   Umístění kódu aplikace	Zadejte angular-app
   Umístění výstupu	Zadejte dist/angular-app

2. Zadejte a vyberte Azure Static Web Apps: Vytvořit statickou webovou aplikaci....

   Do zbývajících výzev palety příkazů zadejte následující hodnoty.

   Výzva	Hodnota
   Předplatné	Vyberte předplatné Concierge.
   Jméno	Zadejte my-static-web-app-and-api.
   Oblast	Vyberte oblast, která je k vám nejblíže.
   Předvolba	Výběr React
   Umístění kódu aplikace	Zadejte react-app
   Umístění výstupu	Zadejte dist

2. Zadejte a vyberte Azure Static Web Apps: Vytvořit statickou webovou aplikaci....

   Do zbývajících výzev palety příkazů zadejte následující hodnoty.

   Výzva	Hodnota
   Předplatné	Vyberte předplatné Concierge.
   Jméno	Zadejte my-static-web-app-and-api.
   Oblast	Vyberte oblast, která je k vám nejblíže.
   Předvolba	Vyberte Svelte
   Umístění kódu aplikace	Zadejte svelte-app
   Umístění výstupu	Zadejte veřejné

2. Zadejte a vyberte Azure Static Web Apps: Vytvořit statickou webovou aplikaci....

   Do zbývajících výzev palety příkazů zadejte následující hodnoty.

   Výzva	Hodnota
   Předplatné	Vyberte předplatné Concierge.
   Jméno	Zadejte my-static-web-app-and-api.
   Oblast	Vyberte oblast, která je k vám nejblíže.
   Předvolba	Vyberte Vue
   Umístění kódu aplikace	Zadejte vue-app
   Umístění výstupu	Zadejte dist

Poznámka

Toto úložiště se liší od jiných projektů, na které můžete být zvyklí. Tento projekt obsahuje čtyři různé aplikace ve čtyřech různých složkách. Každá složka obsahuje aplikaci vytvořenou v jiné architektuře JavaScriptu. Obvykle byste měli v kořenovém adresáři úložiště jenom jednu aplikaci, a proto výchozí / pro umístění cesty aplikace. Tato struktura je skvělým příkladem toho, jak Azure Static Web Apps umožňuje konfigurovat umístění na prvním místě – máte plnou kontrolu nad tím, jak je aplikace sestavená.

3. Po vytvoření aplikace se v editoru Visual Studio Code zobrazí potvrzovací oznámení.

   

   Při konfiguraci sestavení vám Visual Studio Code hlásí stav sestavení.

   

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

   

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

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

   

   Aplikace by měla říct Načítání dat ..., protože zatím nejsou žádná data ani rozhraní API. Rozhraní API pro webovou aplikaci přidáte později v tomto modulu.

Blahopřejeme! Vaše aplikace se nasadí do Azure Static Web Apps!

Poznámka

Nemějte obavy, pokud se zobrazí webová stránka s informacemi, že aplikace ještě není sestavená a nasazená. Zkuste prohlížeč aktualizovat za minutu. Když se vytvoří statická webová aplikace Azure, služba GitHub Action se spustí automaticky. Pokud se tedy zobrazí úvodní stránka, aplikace se stále 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. Otevřete paletu příkazů stisknutím kláves Ctrl+Shift+P.

2. Zadejte a vyberte Git: Pull.

3. Stiskněte Enter.

Další kroky

Dále se dozvíte, jak sestavit a spustit rozhraní API pomocí projektu Azure Functions.