Ćwiczenie — wprowadzenie

  • 3 min

Usługa Azure Static Web Apps publikuje witryny internetowe w środowisku produkcyjnym, kompilując w tym celu aplikacje z repozytorium GitHub. W tym ćwiczeniu utworzysz aplikację internetową przy użyciu preferowanej struktury frontonu w repozytorium GitHub.

Tworzenie repozytorium

Ten moduł ułatwia tworzenie nowego repozytorium przy użyciu repozytorium szablonu usługi GitHub. Jest dostępny szereg szablonów, z których każdy zawiera początkową aplikację skompilowaną z inną strukturą frontonu.

  1. Przejdź do strony tworzenia z szablonu dla repozytorium szablonów. Jeśli wystąpi błąd 404: Nie znaleziono strony, zaloguj się do usługi GitHub i spróbuj ponownie.

  2. Wybierz jedno z kont usługi GitHub na liście rozwijanej Właściciel .

  3. Nadaj nazwę repozytorium my-static-web-app.

  4. Wybierz przycisk Utwórz repozytorium na podstawie szablonu.

Uruchamianie aplikacji

Właśnie utworzono repozytorium GitHub o nazwie my-static-web-app na Twoim koncie usługi GitHub. Następnie sklonujesz repozytorium i uruchomisz kod lokalnie na swoim komputerze.

  1. Otwórz terminal na swoim komputerze.

  2. Zacznij od sklonowania repozytorium GitHub do żądanego katalogu na komputerze.

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

  3. Przejdź do folderu, w którym znajduje się kod źródłowy.

    cd my-static-web-app

  4. Następnie przejdź do folderu preferowanej struktury frontonu, jak pokazano poniżej.

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  5. Teraz zainstaluj zależności aplikacji.

    npm install

    Uwaga

    Jeśli wystąpi błąd Nie można odnaleźć ścieżki, upewnij się, że zainstalowano plik Node.js z pliku https://nodejs.org. Może być konieczne skonfigurowanie niestandardowe, które obejmuje zainstalowanie opcji Dodaj do ścieżki.

    Screenshot displaying the custom install of Node.js options in wizard.

  6. Na koniec uruchom aplikację kliencką frontonu.

    npm start

    npm start

    npm run dev

    npm run serve

Przeglądanie aplikacji

Nadszedł czas, aby zobaczyć aplikację działającą lokalnie. Każda aplikacja frontonu działa na innym porcie.

Wybierz link, aby przejść do swojej aplikacji.

Przejdź do http://localhost:4200.

Screenshot of browsing to your Angular web app.

Przejdź do http://localhost:3000.

Screenshot of browsing to your React web app.

Przejdź do http://localhost:5000.

Screenshot of browsing to your Svelte web app.

Przejdź do http://localhost:8080.

Screenshot of browsing to your Vue web app.

Uwaga

W ćwiczeniach tego modułu wdrożysz aplikację bez interfejsu API. Zobacz sekcję Następne kroki na końcu tego modułu, aby uzyskać informacje na temat następnego modułu, w którym wdrożysz interfejs API obok aplikacji.

Teraz, aby zatrzymać uruchomioną aplikację, naciśnij w terminalu klawisze Ctrl-C.

Następne kroki

Aplikacja została skompilowana i teraz działa lokalnie w przeglądarce.

W tej części opublikujesz aplikację w usłudze Azure Static Web Apps.