Ćwiczenie — wprowadzenie

Ukończone

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 repozytorium nazwę my-static-web-app.

4. Wybierz przycisk Utwórz repozytorium .

Uruchamianie aplikacji

Właśnie utworzono repozytorium GitHub o nazwie my-static-web-app na 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 Node.js z witryny https://nodejs.org. Może być konieczne skonfigurowanie niestandardowe , które obejmuje zainstalowanie opcji Dodaj do ścieżki .

   

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.

Przejdź do http://localhost:3000.

Przejdź do http://localhost:5000.

Przejdź do http://localhost:8080.

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 zatrzymaj uruchomioną aplikację, naciskając Ctrl-C w terminalu.

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.