Ćwiczenie — Wprowadzenie

Ukończone

W tym ćwiczeniu utworzysz instancję usługi Azure Static Web App, w tym akcję GitHub, która automatycznie buduje i publikuje Twoją witrynę.

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 są potrzebne do wykonania ćwiczeń. Pamiętaj, aby aktywować piaskownicę w górnej części tej strony. Podczas wykonywania ćwiczeń w tym module każda jednostka jest zależna od treści utworzonej w wcześniejszym ć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 GitHub utwórz z szablonu, aby otworzyć repozytorium szablonów.

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

  3. Dla repozytorium o nazwie , wpisz 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.

Uruchamianie aplikacji lokalnie

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ć cmd w 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> nazwą użytkownika usługi GitHub.

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

    Notatka

    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 opcja Używaj Ctrl+Shift+C/V jako Kopiuj/Wklej jest zaznaczona.

  3. Przejdź do katalogu z sklonowanym kodem źródłowym.

    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ę kliencką front-endu.

    npm start
    
    npm start
    
    npm run dev
    
    npm run serve
    

Przejdź do swojej 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 jest http://localhost:4200.

Zrzut ekranu przedstawiający hosta lokalnego dla aplikacji internetowej Platformy Angular.

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

Zrzut ekranu przedstawiający hosta lokalnego aplikacji internetowej React.

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

Zrzut ekranu przedstawiający hosta lokalnego dla aplikacji internetowej Svelte.

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

Zrzut ekranu przedstawiający hosta lokalnego dla aplikacji internetowej Vue.

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

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

Gratulacje! Zbudowałeś swoją aplikację i zobaczyłeś ją uruchomioną 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 Azure Static Web Apps dla programu Visual Studio Code

  1. Otwórz program Visual Studio Code.

  2. W górnym menu wybierz pozycję View>Extensionsi wpisz Azure Static Web Apps w polu wyszukiwania.

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

Otwieranie folderu aplikacji

  1. Wybierz pozycję 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 się do platformy Azure w programie Visual Studio Code

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

  2. Wprowadź Azure: Zaloguj się i postępuj zgodnie z wytycznymi, aby się uwierzytelnić.

    Ważny

    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 pozycję F1, aby otworzyć paletę poleceń programu Visual Studio Code.

  2. Otwórz Azure: wybierz Subskrypcjei wyczyść wszystkie opcje z wyjątkiem Subskrypcji Concierge.

    Zrzut ekranu pokazujący wybraną subskrypcję 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 pozycję F1, aby otworzyć paletę poleceń programu Visual Studio Code.

  2. Wpisz i wybierz Git Commit All.

  3. Wprowadź zatwierdzenie początkowe do początku 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 pozycję F1, aby otworzyć paletę poleceń programu Visual Studio Code.
  1. Wprowadź i wybierz Azure Static Web Apps: Utwórz statyczną aplikację sieciową....

    Wprowadź następujące wartości dla pozostałych monitów menu poleceń.

    Polecenie Wartość
    Subskrypcja Wybierz subskrypcję Concierge
    Nazwa Wprowadź my-static-web-app-and-api
    Region Wybierz region najbliżej Ciebie
    Przed ustawienie Wybierz Angular
    Lokalizacja kodu aplikacji Wprowadź angular-app
    Lokalizacja wyjściowa Wprowadź dist/angular-app
  1. Wprowadź i wybierz Azure Static Web Apps: Utwórz statyczną aplikację internetową....

    Wprowadź następujące wartości dla pozostałej części okna poleceń.

    Podpowiedź Wartość
    Subskrypcja Wybierz subskrypcję concierge
    Nazwa Wprowadź my-static-web-app-and-api
    Region Wybierz region najbliżej Ciebie
    Ustawienie wstępne Wybierz React
    Lokalizacja kodu aplikacji Wprowadź w aplikacji react
    Lokalizacja wyjściowa Wprowadź dist
  1. Wprowadź i wybierz pozycję Azure Static Web Apps: Utwórz statyczną aplikację internetową....

    Wprowadź następujące wartości dla dalszych podpowiedzi palety poleceń.

    Komunikat Wartość
    Subskrypcja Wybierz subskrypcję concierge
    Nazwa Wprowadź my-static-web-app-and-api
    Region Wybierz region najbliżej Ciebie
    Ustawienia wstępne Wybierz Svelte
    Lokalizacja kodu aplikacji Wprowadź svelte-app
    Lokalizacja wyjściowa Wprowadź public
  1. Wprowadź i wybierz pozycję Azure Static Web Apps: Stwórz statyczną aplikację webową....

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

    Monit Wartość
    Subskrypcja Wybierz subskrypcję concierge
    Nazwa Wprowadź my-static-web-app-and-api
    Region Wybierz region najbliżej Ciebie
    ustawienie wstępne Wybierz Vue
    Lokalizacja kodu aplikacji Wprowadź vue-app
    Lokalizacja wyjściowa Wprowadź dist

Notatka

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 języka JavaScript. Zwykle w katalogu głównym repozytorium znajduje się tylko jedna aplikacja, co oznacza domyślną lokalizację ścieżki aplikacji /. Jest to doskonały przykład, jak w Azure Static Web Apps można skonfigurować lokalizacje od samego początku — masz pełną kontrolę nad tym, jak aplikacja jest tworzona.

  1. Po utworzeniu aplikacji w programie Visual Studio Code zostanie wyświetlone powiadomienie z potwierdzeniem.

    zrzuty ekranu z okna dialogowego Open Actions w GitHub lub View/Edit Config.

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

    Zrzut ekranu przedstawiający stan produkcji jako oczekiwanie na wdrożenie.

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

    zrzut ekranu przedstawiający sposób wyświetlania funkcji GitHub Actions.

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

  3. 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ę.

    Zrzut ekranu przedstawiający sposób przeglądania statycznej aplikacji internetowej przy użyciu rozszerzenia programu Visual Studio Code.

    Aplikacja powinna wyświetlić komunikat Ładowanie danych ..., ponieważ nie ma jeszcze żadnych 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!

Notatka

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ą, aplikacja jest nadal wdrażana.

Ściąganie 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 Ctrl+Shift+P.

  2. Wprowadź i wybierz pozycję Git: Pull.

  3. Naciśnij Enter.

Następne kroki

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