Ćwiczenie — tworzenie statycznej aplikacji internetowej na platformie Azure

  • 5 min

W tym ćwiczeniu utworzysz wystąpienie usługi Azure Static Web Apps, w tym akcję usługi GitHub, która spowoduje automatyczne skompilowanie i opublikowanie aplikacji.

Tworzenie statycznej aplikacji internetowej

Teraz, po utworzeniu repozytorium GitHub, można utworzyć wystąpienie usługi Static Web Apps w witrynie Azure Portal.

W tym module jest używana piaskownica platformy Azure, aby zapewnić bezpłatną, tymczasową subskrypcję platformy Azure, której można użyć do ukończenia ćwiczenia. Zanim przejdziesz dalej, upewnij się, że piaskownica została aktywowana na górze tej strony.

Piaskownica platformy Azure, która została aktywowana, umożliwia korzystanie z usług platformy Azure bez ponoszenia kosztów.

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

  1. Przejdź do witryny Visual Studio Marketplace i zainstaluj rozszerzenie usługi Azure Static Web Apps dla programu Visual Studio Code.

  2. Po załadowaniu karty rozszerzenia w programie Visual Studio Code wybierz przycisk Zainstaluj .

  3. Po zakończeniu instalacji wybierz pozycję Uruchom ponownie, aby zaktualizować , jeśli zostanie wyświetlony monit.

Logowanie do platformy Azure w programie Visual Studio Code

  1. W programie Visual Studio Code zaloguj się do platformy Azure, wybierając pozycję Wyświetl>paletę poleceń i wprowadzając pozycję Azure: Zaloguj.

    Ważne

    Zaloguj się na platformie Azure przy użyciu tego samego konta, za pomocą którego utworzono piaskownicę. Piaskownica zapewnia dostęp do subskrypcji Concierge.

  2. Postępuj zgodnie z monitami, aby skopiować i wkleić kod udostępniony w przeglądarce internetowej, który uwierzytelnia sesję programu Visual Studio Code.

Wybierz swoją subskrypcję

  1. Otwórz program Visual Studio Code i wybierz pozycję Plik > Otwórz i otwórz repozytorium sklonowane na komputer w edytorze.

  2. Sprawdź, czy subskrypcje platformy Azure zostały przefiltrowane, aby uwzględnić subskrypcję Concierge, otwierając paletę poleceń i wprowadzając ciąg Azure: Select Subscriptions, a następnie naciśnij Enter.

  3. Wybierz pozycję Subskrypcja Concierge i naciśnij Enter.

    Zrzut ekranu programu VS Code przedstawiający sposób filtrowania według subskrypcji.

Tworzenie statycznej aplikacji internetowej

  1. Otwórz program Visual Studio Code i wybierz pozycję Plik > Otwórz , aby otworzyć repozytorium sklonowane na komputer w edytorze.

  2. W programie Visual Studio Code na pasku Activity Bar wybierz logo platformy Azure, aby otworzyć okno rozszerzeń platformy Azure.

    Zrzut ekranu przedstawiający logo platformy Azure w programie VS Code.

    Uwaga

    Wymagane jest zalogowanie się do platformy Azure i usługi GitHub. Jeśli jeszcze nie zalogowano się do platformy Azure ani usługi GitHub z poziomu programu Visual Studio Code, rozszerzenie wyświetli monit o zalogowanie się do nich podczas procesu tworzenia aplikacji.

  3. Umieść wskaźnik myszy na nagłówku Static Web Apps , kliknij prawym przyciskiem myszy i wybierz pozycję Utwórz statyczną aplikację internetową.

    Zrzut ekranu przedstawiający miejsce, w którym należy przejść do tworzenia aplikacji internetowej.

  4. Wprowadź ciąg my-first-static-web-app i naciśnij klawisz Enter.

    Zrzut ekranu przedstawiający sposób tworzenia statycznej aplikacji internetowej.

  5. Wybierz swoją lokalizację i naciśnij Enter.

    Zrzut ekranu przedstawiający sposób wybierania subskrypcji.

  1. Wybierz opcję Angular i naciśnij Enter

    Zrzut ekranu przedstawiający wybraną opcję angular.

  2. Wprowadź /angular-app jako lokalizację kodu aplikacji i naciśnij Enter.

    Zrzut ekranu przedstawiający lokalizację kodu wprowadzoną jako aplikację Angular.

  3. Wprowadź dist/angular-app jako lokalizację wyjściową kompilacji, w której pliki są kompilowane w środowisku produkcyjnym w aplikacji, a następnie naciśnij Enter.

    Zrzut ekranu przedstawiający sposób wprowadzania lokalizacji danych wyjściowych kompilacji dla platformy Angular.

  1. Wybierz opcję React i naciśnij Enter

    Zrzut ekranu przedstawiający wybraną opcję react.

  2. Wprowadź /react-app jako lokalizację kodu aplikacji i naciśnij Enter.

    Zrzut ekranu przedstawiający lokalizację kodu wprowadzoną jako aplikację react.

  3. Wprowadź build jako lokalizację danych wyjściowych kompilacji, w której pliki są tworzone dla środowiska produkcyjnego w aplikacji, a następnie naciśnij Enter.

    Zrzut ekranu przedstawiający sposób wprowadzania lokalizacji wyjściowej kompilacji dla platformy React.

  1. Wybierz opcję Svelte i naciśnij Enter

    Zrzut ekranu przedstawiający wybraną opcję svelte.

  2. Wprowadź /svelte-app jako lokalizację kodu aplikacji i naciśnij Enter.

    Zrzut ekranu przedstawiający lokalizację kodu wprowadzoną jako aplikację Svelte.

  3. Wprowadź wartość publiczną jako lokalizację wyjściową kompilacji, w której pliki są tworzone do produkcji w aplikacji, a następnie naciśnij Enter.

    Zrzut ekranu przedstawiający sposób wprowadzania lokalizacji wyjściowej kompilacji dla platformy Svelte.

  1. Wybierz opcję Vue i naciśnij Enter

    Zrzut ekranu przedstawiający wybraną opcję vue.

  2. Wprowadź /vue-app jako lokalizację kodu aplikacji i naciśnij Enter.

    Zrzut ekranu przedstawiający lokalizację kodu wprowadzoną jako aplikację Vue.

  3. Wprowadź dist jako lokalizację danych wyjściowych kompilacji, w której pliki są tworzone dla środowiska produkcyjnego w aplikacji, i naciśnij Enter.

    Zrzut ekranu przedstawiający sposób wprowadzania lokalizacji wyjściowej kompilacji dla programu Vue

Uwaga

Repozytorium może być nieco inne niż w przeszłości. Zawiera cztery różne aplikacje w czterech różnych folderach. Każdy folder zawiera aplikację utworzoną w innej strukturze JavaScript. Zazwyczaj masz jedną aplikację w katalogu głównym repozytorium i określasz / dla lokalizacji ścieżki aplikacji. Jest to doskonały przykład, dlaczego usługa Azure Static Web Apps umożliwia skonfigurowanie lokalizacji w pierwszym miejscu — uzyskujesz pełną kontrolę nad sposobem kompilowania aplikacji.

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

    Zrzut ekranu przedstawiający kod potwierdzenia z prośbą użytkownika o otwarcie akcji w usłudze GitHub lub Wyświetl/Edytuj konfigurację.

    W miarę postępu wdrażania rozszerzenie programu Visual Studio Code zgłasza stan kompilacji.

    Zrzut ekranu przedstawiający interfejs użytkownika programu VS Code przedstawiający oczekiwanie na wdrożenie.

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

    Zrzut ekranu przedstawiający sposób sprawdzania postępu za pomocą 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 witryny aplikacji internetowej.

Gratulacje! Twoja pierwsza aplikacja została wdrożona w usłudze Azure Static Web Apps!

Uwaga

Nie martw się, jeśli zobaczysz stronę internetową informującą, że aplikacja nie została jeszcze skompilowana i wdrożona. Odśwież przeglądarkę za minutę. Akcja usługi GitHub jest uruchamiana automatycznie po utworzeniu usługi Azure Static Web Apps. Jeśli zobaczysz stronę powitalną, oznacza to, aplikacja jest nadal wdrażana.