Ćwiczenie — wprowadzenie

Ukończone

W tym ćwiczeniu utworzysz wystąpienie usługi Azure Static Web App, w tym akcję usługi GitHub, która automatycznie kompiluje i publikuje witrynę internetową.

W tym module są używane zasoby udostępniane za pośrednictwem piaskownicy, która zapewnia bezpłatny, tymczasowy dostęp do subskrypcji platformy Azure wraz z zasobami, które należy wykonać. Pamiętaj, aby aktywować piaskownicę w górnej części tej strony. Podczas wykonywania ćwiczeń w tym module każda lekcja zależy od zawartości utworzonej w poprzednim ćwiczeniu. Z tego powodu wybierz strukturę JavaScript i użyj jej do wszystkich kolejnych ćwiczeń.

Tworzenie repozytorium

Aby rozpocząć, utwórz repozytorium przy użyciu szablonu usługi GitHub. Dostępna jest seria szablonów repozytorium, które zawierają aplikację startową zaimplementowaną w różnych strukturach frontonu.

1. Przejdź do strony Tworzenie z szablonu w usłudze GitHub, aby otworzyć repozytorium szablonów.

2. Jeśli zostanie wyświetlony monit o podanie pozycji Właściciel, wybierz jedno z kont usługi GitHub.

3. W polu Nazwa repozytorium wprowadź ciąg my-static-web-app-and-api.

4. Wybierz pozycję Utwórz repozytorium na podstawie szablonu.

   Podczas tworzenia projektu na podstawie szablonu usługa GitHub tworzy repozytorium w tle.

Lokalne uruchamianie aplikacji

Teraz masz repozytorium GitHub o nazwie my-static-web-app-and-api na koncie usługi GitHub. Następnie sklonujesz repozytorium GitHub i uruchomisz kod lokalnie na komputerze.

1. Otwórz okno terminalu na komputerze.

   Jeśli jesteś w systemie Windows, możesz wprowadzić w cmd polu wyszukiwania na pasku zadań systemu.

2. Aby sklonować repozytorium na maszynę, wklej następujący kod w oknie wiersza polecenia.

   Pamiętaj, aby zastąpić <YOUR_GITHUB_USERNAME> ciąg nazwą użytkownika usługi GitHub.

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

   Uwaga

   Jeśli masz problemy z kopiowaniem do terminalu wiersza polecenia, kliknij prawym przyciskiem myszy ikonę na pasku tytułu, a następnie na karcie Właściwości upewnij się, że zaznaczono pole Wyboru Użyj klawiszy Ctrl+Shift+C/V jako kopiuj/wklej .

3. Przejdź do katalogu dla sklonowanego kodu źródłowego.

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

4. Przejdź do katalogu preferowanej struktury frontonu.

   cd angular-app
   

   cd react-app
   

   cd svelte-app
   

   cd vue-app
   

5. Zainstaluj zależności aplikacji.

   npm install
   

6. Upewnij się, że zainstalowano najnowszą wersję każdej zależności za pomocą następującego polecenia.

   npm audit fix
   

7. Uruchom aplikację kliencka frontonu.

   npm start
   

   npm start
   

   npm run dev
   

   npm run serve
   

Przeglądanie aplikacji

Po wygenerowaniu i skompilowaniu pakietu aplikacji zostanie automatycznie otwarta karta przeglądarki w celu wyświetlenia aplikacji uruchomionej lokalnie.

Host lokalny dla platformy Angular to http://localhost:4200.

Host lokalny dla platformy React to http://localhost:3000.

Host lokalny dla svelte to http://localhost:5000.

Host lokalny dla programu Vue to http://localhost:8080.

Aplikacja powinna powiedzieć Ładowanie danych ... ponieważ nie ma jeszcze danych ani interfejsu API. W dalszej części tej lekcji dodasz interfejs API dla aplikacji internetowej.

W terminalu naciśnij klawisze Ctrl+C , aby zatrzymać zadanie wsadowe.

Gratulacje! Aplikacja została skompilowana i uruchomiona lokalnie w przeglądarce. Następnie możesz opublikować aplikację w usłudze Azure Static Web Apps.

Tworzenie statycznej aplikacji internetowej

Utworzono własne repozytorium GitHub. Teraz możesz utworzyć własną statyczną aplikację internetową przy użyciu rozszerzenia Azure Static Web Apps dla programu Visual Studio Code.

Instalowanie rozszerzenia usługi Azure Static Web Apps dla programu Visual Studio Code

1. Otwórz Visual Studio Code.

2. W górnym menu wybierz pozycję Wyświetl>rozszerzenia, a następnie wprowadź ciąg Azure Static Web Apps w polu wyszukiwania.

3. Po załadowaniu karty rozszerzenia w programie Visual Studio Code wybierz pozycję Zainstaluj.

Otwieranie folderu aplikacji

1. Wybierz klawisz F1 , aby otworzyć paletę poleceń programu Visual Studio Code.

2. Wprowadź plik: Otwórz folder....

3. Wybierz folder my-static-web-app-and-api.

4. Wybierz pozycję Otwórz, aby otworzyć folder w programie Visual Studio Code.

Logowanie do platformy Azure w programie Visual Studio Code

1. Wybierz klawisz F1 , aby otworzyć paletę poleceń programu Visual Studio Code.

2. Wprowadź wartość Azure: Zaloguj się i postępuj zgodnie z monitami o uwierzytelnienie.

   Ważne

   Pamiętaj, aby zalogować się na platformie Azure przy użyciu tego samego konta, które zostało użyte do aktywowania piaskownicy w przeglądarce. To samo konto udostępnia subskrypcję Concierge, która zapewnia dostęp do bezpłatnych zasobów platformy Azure podczas tego samouczka.

Wybierz swoją subskrypcję

1. Wybierz klawisz F1 , aby otworzyć paletę poleceń programu Visual Studio Code.

2. Wprowadź wartość Azure: wybierz pozycję Subskrypcje i wyczyść wszystkie opcje z wyjątkiem subskrypcji Concierge.

   

Zatwierdź zmiany

Po zainstalowaniu zależności aplikacji niektóre pliki w projekcie zostały zaktualizowane w procesie. Aby kontynuować, musisz zatwierdzić te zmiany w repozytorium.

1. Wybierz klawisz F1 , aby otworzyć paletę poleceń programu Visual Studio Code.

2. Wprowadź i wybierz pozycję Git Commit All (Zatwierdź wszystko w usłudze Git).

3. Wprowadź początkowe zatwierdzenie w górnej części pliku.

4. Zapisz i zamknij plik zatwierdzenia git.

   Nie martw się o synchronizowanie zmian z serwerem w tym momencie. Aktualizacje są kopiowane do usługi GitHub podczas publikowania statycznej aplikacji internetowej.

Tworzenie statycznej aplikacji internetowej

Bieżące sesje uwierzytelnione na platformie Azure i w usłudze GitHub są wymagane do utworzenia statycznej aplikacji internetowej. Jeśli nie zalogowałeś się jeszcze do obu dostawców, rozszerzenie wyświetli monit o zalogowanie się podczas procesu tworzenia.

1. Wybierz klawisz F1 , aby otworzyć paletę poleceń programu Visual Studio Code.

2. Wprowadź i wybierz pozycję Azure Static Web Apps: Utwórz statyczną aplikację internetową....

   Wprowadź następujące wartości dla pozostałych wierszy palety poleceń.

   Monit	Wartość
   Subskrypcja	Wybierz subskrypcję Concierge
   Nazwisko	Wprowadź ciąg my-static-web-app-and-api
   Region (Region)	Wybierz region znajdujący się najbliżej Ciebie
   Ustawień domyślnych	Wybieranie platformy Angular
   Lokalizacja kodu aplikacji	Wprowadź angular-app
   Lokalizacja wyjściowa	Wprowadź dist/angular-app

2. Wprowadź i wybierz pozycję Azure Static Web Apps: Utwórz statyczną aplikację internetową....

   Wprowadź następujące wartości dla pozostałych wierszy palety poleceń.

   Monit	Wartość
   Subskrypcja	Wybierz subskrypcję Concierge
   Nazwisko	Wprowadź ciąg my-static-web-app-and-api
   Region (Region)	Wybierz region znajdujący się najbliżej Ciebie
   Ustawień domyślnych	Wybierz pozycję React
   Lokalizacja kodu aplikacji	Wprowadź aplikację react-app
   Lokalizacja wyjściowa	Wprowadź dist

2. Wprowadź i wybierz pozycję Azure Static Web Apps: Utwórz statyczną aplikację internetową....

   Wprowadź następujące wartości dla pozostałych wierszy palety poleceń.

   Monit	Wartość
   Subskrypcja	Wybierz subskrypcję Concierge
   Nazwisko	Wprowadź ciąg my-static-web-app-and-api
   Region (Region)	Wybierz region znajdujący się najbliżej Ciebie
   Ustawień domyślnych	Wybierz pozycję Svelte
   Lokalizacja kodu aplikacji	Wprowadź wartość svelte-app
   Lokalizacja wyjściowa	Wprowadź publiczny

2. Wprowadź i wybierz pozycję Azure Static Web Apps: Utwórz statyczną aplikację internetową....

   Wprowadź następujące wartości dla pozostałych wierszy palety poleceń.

   Monit	Wartość
   Subskrypcja	Wybierz subskrypcję Concierge
   Nazwisko	Wprowadź ciąg my-static-web-app-and-api
   Region (Region)	Wybierz region znajdujący się najbliżej Ciebie
   Ustawień domyślnych	Wybierz pozycję Vue
   Lokalizacja kodu aplikacji	Wprowadź wartość vue-app
   Lokalizacja wyjściowa	Wprowadź dist

Uwaga

To repozytorium różni się od innych projektów, które mogły być używane w przeszłości. Ten projekt zawiera cztery różne aplikacje w czterech różnych folderach. Każdy folder zawiera aplikację utworzoną w innej strukturze JavaScript. Zazwyczaj masz tylko jedną aplikację w katalogu głównym repozytorium, a tym samym domyślną / lokalizację ścieżki aplikacji. Jest to doskonały przykład sposobu konfigurowania lokalizacji w usłudze Azure Static Web Apps w pierwszej kolejności — masz pełną kontrolę nad sposobem tworzenia aplikacji.

3. Po utworzeniu aplikacji w programie Visual Studio Code zostanie wyświetlone powiadomienie zawierające potwierdzenie.

   

   Podczas konfigurowania kompilacji program Visual Studio Code zgłasza stan kompilacji.

   

4. Postęp wdrażania można wyświetlić przy użyciu funkcji GitHub Actions, rozwijając menu Akcje .

   

   Po zakończeniu wdrażania możesz przejść bezpośrednio do witryny internetowej.

5. Aby wyświetlić witrynę internetową w przeglądarce, kliknij prawym przyciskiem myszy projekt w rozszerzeniu Static Web Apps, a następnie wybierz pozycję Przeglądaj witrynę.

   

   Aplikacja powinna powiedzieć Ładowanie danych ... ponieważ nie ma jeszcze danych ani interfejsu API. W dalszej części tego modułu dodasz interfejs API dla aplikacji internetowej.

Gratulacje! Twoja aplikacja jest wdrażana w usłudze Azure Static Web Apps!

Uwaga

Nie martw się, jeśli zostanie wyświetlona strona internetowa ze stanem, że aplikacja nie została jeszcze skompilowana i wdrożona. Spróbuj odświeżyć przeglądarkę za minutę. Usługa GitHub Action jest uruchamiana automatycznie po utworzeniu statycznej aplikacji internetowej platformy Azure. Jeśli więc zobaczysz stronę powitalną, oznacza to, aplikacja jest nadal wdrażana.

Ściąganie najnowszych zmian z usługi GitHub

Pobierz najnowsze zmiany z usługi GitHub, aby obniżyć plik przepływu pracy utworzony przez usługę Azure Static Web Apps.

1. Otwórz paletę poleceń, naciskając klawisze Ctrl+Shift+P.

2. Wprowadź i wybierz pozycję Git: Pull (Git: ściąganie).

3. Naciśnij klawisz Enter.

Następne kroki

Następnie dowiesz się, jak skompilować i uruchomić interfejs API przy użyciu projektu usługi Azure Functions.