Ćwiczenie — pobieranie przykładowej aplikacji

  • 10 min

Przygotuj się do rozpoczęcia tworzenia potoku ciągłej integracji za pomocą usługi Microsoft Azure Pipelines. Pierwszym krokiem jest skompilowanie i uruchomienie aplikacji internetowej Space Game . Zrozumienie ręcznego tworzenia oprogramowania przygotowuje cię do powtarzania procesu w potoku.

Mara zrobi to dokładnie, a postępując zgodnie z procedurami, możesz zrobić to samo.

Tworzenie osobistego tokenu dostępu usługi Azure DevOps

  1. Zaloguj się do organizacji (https://dev.azure.com/{yourorganization}). Jeśli nie masz jeszcze organizacji usługi Azure DevOps, przed rozpoczęciem utwórz bezpłatną organizację. Jeśli po zalogowaniu się masz więcej niż jedną organizację, wybierz pozycję Azure DevOps i przejdź do organizacji, której zamierzasz użyć do ukończenia tego modułu. W tym przykładzie nazwa organizacji to fabrikam.

    Zrzut ekranu przedstawiający wybieranie organizacji usługi Azure DevOps.

  2. Na stronie głównej otwórz ustawienia użytkownika i wybierz pozycję Osobiste tokeny dostępu.

  3. Wybierz pozycję + Nowy token.

  4. Nadaj tokenowi nazwę, używając dowolnej preferowanej nazwy. Token jest używany, gdy usługa Codespace rejestruje swojego agenta w organizacji usługi Azure DevOps, dzięki czemu można zachować domyślne wygaśnięcie.

  5. Wybierz pozycję Zdefiniowane niestandardowe i wybierz pozycję Pokaż wszystkie zakresy.

    Zrzut ekranu przedstawiający wyświetlanie wszystkich zakresów osobistego tokenu dostępu.

  6. Wybierz następujący zakres: Pule agentów (odczyt i zarządzanie) i wybierz pozycję Utwórz.

    Zrzut ekranu przedstawiający wybieranie uprawnień puli agentów dla osobistego tokenu dostępu.

  7. Po zakończeniu skopiuj token i zapisz go w bezpiecznej lokalizacji. W przypadku zabezpieczeń nie będzie ona ponownie wyświetlana.

Ostrzeżenie

Traktuj i używaj identyfikatora PAT, takiego jak hasło, i zachowaj go w tajemnicy.

Tworzenie rozwidlenia

Pierwszym krokiem do korzystania z projektu w usłudze Git jest utworzenie rozwidlenia, dzięki czemu można pracować z plikami źródłowymi i modyfikować je. Rozwidlenie to kopia repozytorium GitHub. Kopia istnieje na twoim koncie i umożliwia wprowadzanie dowolnych zmian bez wpływu na oryginalny projekt.

Chociaż możesz zaproponować zmiany w oryginalnym projekcie, w tej lekcji pracujesz z projektem internetowym Space Game tak, jakby był to oryginalny projekt należący do Mary i zespołu.

Uwaga

Jeśli wcześniej rozwidliło to repozytorium, na przykład jeśli wcześniej ukończono ten moduł lub inny moduł szkoleniowy Tailspin Toys, zalecamy usunięcie rozwidlenia i utworzenie nowego rozwidlenia , wykonując następujące kroki. Jeśli nie chcesz usuwać rozwidlenia, upewnij się, że masz zsynchronizowane rozwidlenie.

Utwórzmy rozwidlenie projektu internetowego Space Game na koncie usługi GitHub:

  1. W przeglądarce internetowej przejdź do witryny GitHub i zaloguj się.

  2. Przejdź do projektu internetowego Space Game .

  3. Wybierz pozycję Rozwidlenie:

    Zrzut ekranu witryny GitHub przedstawiający lokalizację przycisku Rozwidlenie.

  4. Aby rozwidlić repozytorium na koncie, postępuj zgodnie z instrukcjami.

Konfigurowanie wpisów tajnych dla własnego agenta

Przed utworzeniem środowiska Codespace utworzysz kilka wpisów tajnych, które ułatwiają uruchamianie własnego agenta usługi Azure DevOps. W środowisku produkcyjnym nie chcesz używać własnego agenta w usłudze GitHub Codespaces. Jednak ponieważ zespół korzysta z usługi Codespaces do testowania, dobrym rozwiązaniem tymczasowym jest użycie go podczas tworzenia potoków.

  1. Przejdź do rozwidlenia repozytorium GitHub i wybierz pozycję Ustawienia>Wpisy tajne i zmienne>Codespaces.

    Zrzut ekranu przedstawiający wpisy tajne usługi GitHub Codespaces.

  2. Utwórz następujące wpisy tajne repozytorium Codespaces.

    Nazwa/nazwisko Wartość
    ADO_ORG Nazwa organizacji usługi Azure DevOps, której używasz do ukończenia tego modułu. W tym przykładzie fabrikam jest nazwą organizacji. Ta nazwa organizacji musi być taka sama, która została użyta podczas tworzenia tokenu dostępu w poprzednim kroku.
    ADO_PAT Osobisty token dostępu utworzony w poprzednim kroku.

    Napiwek

    W tym module szkoleniowym agent jest przypisany do Default puli agentów. Jeśli nie chcesz uruchamiać agenta w Default puli (na przykład uruchamiasz ten moduł szkoleniowy przy użyciu środowiska produkcyjnego usługi Azure DevOps i masz innych agentów w Default puli), możesz utworzyć wpis tajny o nazwie ADO_POOL_NAME i określić nazwę puli agentów do użycia. Jeśli ten wpis tajny nie zostanie określony, zostanie użyta Default pula.

Konfigurowanie usługi Codespaces

Następnie skonfigurujesz usługę Codespaces, aby można było skompilować witrynę internetową, pracować z plikami źródłowymi i uruchomić potok przy użyciu własnego agenta.

  1. W rozwidlonym repozytorium GitHub wybierz pozycję Kod, wybierz ponownie pozycję Kod, wybierz kartę Codespaces i wybierz pozycję + Utwórz nową przestrzeń kodu.

    Zrzut ekranu przedstawiający tworzenie nowego środowiska Codespace z opcjami.

  2. Poczekaj na skompilowanie środowiska Codespace. Ta kompilacja może potrwać kilka chwil, ale trzeba to zrobić tylko raz w tym kroku modułu szkoleniowego.

    Po zakończeniu kompilacji nastąpi przekierowanie do wersji online programu Visual Studio Code. Twoja usługa Codespace zawiera nową instalację programu Visual Studio Code podobną do nowej instalacji programu Visual Studio Code na komputerze lokalnym. Po pierwszym uruchomieniu usługi Codespace program Visual Studio Code w trybie online może monitować o podanie pewnych konfiguracji lub zapytać o preferencje. Możesz wybrać preferencje, które odpowiadają stylowi użycia programu Visual Studio Code.

Konfigurowanie nadrzędnego połączenia zdalnego

Zdalne to repozytorium Git, w którym członkowie zespołu współpracują (podobnie jak repozytorium w usłudze GitHub). Wyświetlmy listę zdalnych i dodajmy zdalną kopię repozytorium firmy Microsoft, aby uzyskać najnowszy przykładowy kod.

  1. W edytorze online programu Visual Studio Code przejdź do okna terminalu i wybierz pozycję bash po prawej stronie.

    Zrzut ekranu przedstawiający okno terminalu w edytorze online programu Visual Studio Code.

  2. Aby wyświetlić listę zdalnych, uruchom git remote polecenie:

    git remote -v

    Masz zarówno dostęp do pobierania (pobierania) i wypychania (przekazywania) do repozytorium:

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)

    Źródło określa repozytorium w usłudze GitHub. W przypadku rozwidlenia kodu z innego repozytorium jest to wspólne nazwanie oryginalnego zdalnego (rozwidlenia) nadrzędnego.

  3. Aby utworzyć zdalny nazwany nadrzędny, który wskazuje repozytorium firmy Microsoft, uruchom następujące git remote add polecenie:

    git remote add upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git

  4. Uruchom git remote drugi raz, aby zobaczyć zmiany:

    git remote -v

    Zobaczysz, że nadal masz dostęp do pobierania (pobierania) i wypychania (przekazywania) do repozytorium. Teraz masz również dostęp do pobierania i wypychania do repozytorium firmy Microsoft:

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (fetch)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (push)

Kompilowanie i uruchamianie aplikacji internetowej

  1. W edytorze online programu Visual Studio Code przejdź do okna terminalu i aby skompilować aplikację, uruchom następujące dotnet build polecenie:

    dotnet build --configuration Release

  2. W oknie terminalu, aby uruchomić aplikację, uruchom następujące dotnet run polecenie:

    dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web

    Pliki rozwiązania .NET mogą zawierać więcej niż jeden projekt. Argument --project określa projekt aplikacji internetowej Space Game .

Sprawdzanie, czy aplikacja jest uruchomiona

W trybie programowania witryna internetowa Space Game jest skonfigurowana do uruchamiania na porcie 5000.

W edytorze programu Visual Studio zostanie wyświetlony nowy komunikat. Aplikacja uruchomiona na porcie 5000 jest dostępna. Wybierz pozycję Otwórz w przeglądarce , aby przejść do uruchomionej aplikacji.

Zrzut ekranu przedstawiający komunikat o przekierowywaniu portów codespaces.

W nowym oknie przeglądarki powinna zostać wyświetlona witryna internetowa Space Game:

Zrzut ekranu przedstawiający przeglądarkę internetową z witryną internetową Space Game.

Możesz wchodzić w interakcje ze stroną, w tym z rankingiem. Po wybraniu nazwy zawodnika zostaną wyświetlone szczegółowe informacje o tym graczu:

Zrzut ekranu przedstawiający przeglądarkę internetową z rankingiem Space Game.

Po zakończeniu wróć do okna terminalu i zatrzymaj uruchomioną aplikację, wybierz Ctrl + C.

Przygotowywanie programu Visual Studio Code

Najpierw skonfiguruj program Visual Studio Code, aby można było lokalnie skompilować witrynę internetową i pracować z plikami źródłowymi.

Program Visual Studio Code jest dostarczany ze zintegrowanym terminalem, dzięki czemu można edytować pliki i pracować z poziomu wiersza polecenia w jednym miejscu.

  1. Uruchom program Visual Studio Code.

  2. W menu Widok wybierz pozycję Terminal.

  3. Z listy rozwijanej wybierz pozycję bash:

    Zrzut ekranu przedstawiający wybieranie powłoki Bash w programie Visual Studio Code.

    Okno terminalu umożliwia wybranie dowolnej powłoki zainstalowanej w systemie, takiej jak Bash, Zsh i PowerShell.

    W tym miejscu użyjesz powłoki Bash. Usługa Git dla systemu Windows udostępnia powłokę Git Bash, która ułatwia uruchamianie poleceń git.

    Uwaga

    Jeśli w systemie Windows nie widzisz powłoki Git Bash jako opcji, upewnij się, że zainstalowano narzędzie Git, a następnie uruchom ponownie program Visual Studio Code.

  4. Aby przejść do katalogu, z którego chcesz pracować, na przykład do katalogu macierzystego cd (~), uruchom polecenie . Jeśli chcesz, możesz wybrać inny katalog.

    cd ~

Konfigurowanie usługi Git

Jeśli dopiero zaczynasz korzystać z usług Git i GitHub, najpierw musisz uruchomić kilka poleceń, aby skojarzyć swoją tożsamość z usługą Git i uwierzytelnić się w usłudze GitHub.

Konfigurowanie usługi Git wyjaśnia proces bardziej szczegółowo.

Co najmniej należy wykonać poniższe kroki. W zintegrowanym terminalu programu Visual Studio Code uruchom te polecenia.

  1. Ustaw nazwę użytkownika.
  2. Ustaw adres e-mail zatwierdzenia.
  3. Buforuj hasło usługi GitHub.

Uwaga

Jeśli już używasz uwierzytelniania dwuskładnikowego w usłudze GitHub, utwórz osobisty token dostępu i użyj tokenu zamiast hasła po wyświetleniu monitu później.

Traktuj token dostępu tak, jakby hasło. Zachowaj je w bezpiecznym miejscu.

Uzyskiwanie kodu źródłowego

Teraz uzyskasz kod źródłowy z usługi GitHub i skonfigurujesz program Visual Studio Code, aby można było uruchomić aplikację i pracować z plikami kodu źródłowego.

Tworzenie rozwidlenia

Pierwszym krokiem do korzystania z projektu w usłudze Git jest utworzenie rozwidlenia, dzięki czemu można pracować z plikami źródłowymi i modyfikować je. Rozwidlenie to kopia repozytorium GitHub. Kopia istnieje na twoim koncie i umożliwia wprowadzanie dowolnych zmian bez wpływu na oryginalny projekt.

Chociaż możesz zaproponować zmiany w oryginalnym projekcie, w tej lekcji pracujesz z projektem internetowym Space Game tak, jakby był to oryginalny projekt należący do Mary i zespołu.

Utwórzmy rozwidlenie projektu internetowego Space Game na koncie usługi GitHub:

  1. W przeglądarce internetowej przejdź do usługi GitHub i zaloguj się.

  2. Przejdź do projektu internetowego Space Game .

  3. Wybierz pozycję Rozwidlenie:

    Zrzut ekranu witryny GitHub przedstawiający lokalizację przycisku Rozwidlenie.

  4. Aby rozwidlić repozytorium na koncie, postępuj zgodnie z instrukcjami.

Klonowanie rozwidlenia lokalnie

Teraz, gdy masz kopię projektu internetowego Space Game na swoim koncie usługi GitHub, możesz pobrać lub sklonować kopię na komputer, aby można było z nim pracować lokalnie.

Klon, taki jak rozwidlenie, jest kopią repozytorium. Podczas klonowania repozytorium możesz wprowadzić zmiany, sprawdzić, czy działają zgodnie z oczekiwaniami, a następnie przekazać te zmiany z powrotem do usługi GitHub. Możesz również zsynchronizować kopię lokalną ze zmianami wprowadzonych przez innych uwierzytelnionych użytkowników do kopii repozytorium GitHub.

Aby sklonować projekt internetowy Space Game na komputer:

  1. Przejdź do rozwidlenia projektu internetowego Space Game w witrynie GitHub.

  2. Na pasku poleceń wybierz pozycję Kod. W okienku zostanie wyświetlona opcja Klonuj z kartami typów klonowania. Na karcie HTTPS wybierz ikonę kopiowania obok adresu URL, aby skopiować adres URL do schowka.

    Zrzut ekranu przedstawiający lokalizowanie adresu URL i przycisk kopiowania z repozytorium GitHub.

  3. W programie Visual Studio Code przejdź do okna terminalu i wprowadź git cloneciąg , a następnie wklej adres URL ze schowka. Powinien wyglądać podobnie do następującego:

    git clone https://github.com/username/mslearn-tailspin-spacegame-web.git

  4. Po zakończeniu Cloning 'mslearn-tailspin-spacegame-web'... operacji wprowadź następujące polecenie, aby przejść do mslearn-tailspin-spacegame-webkatalogu. Katalog główny repozytorium.

    cd mslearn-tailspin-spacegame-web

Konfigurowanie nadrzędnego połączenia zdalnego

Zdalne to repozytorium Git, w którym członkowie zespołu współpracują (podobnie jak repozytorium w usłudze GitHub). Wyświetlmy listę zdalnych i dodajmy zdalną kopię repozytorium firmy Microsoft, aby uzyskać najnowszy przykładowy kod.

  1. Aby wyświetlić listę zdalnych, uruchom git remote polecenie:

    git remote -v

    Masz zarówno dostęp do pobierania (pobierania) i wypychania (przekazywania) do repozytorium:

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)

    Źródło określa repozytorium w usłudze GitHub. W przypadku rozwidlenia kodu z innego repozytorium jest to wspólne nazwanie oryginalnego zdalnego (rozwidlenia) nadrzędnego.

  2. Aby utworzyć zdalny nazwany nadrzędny, który wskazuje repozytorium firmy Microsoft, uruchom następujące git remote add polecenie:

    git remote add upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git

  3. Uruchom git remote drugi raz, aby zobaczyć zmiany:

    git remote -v

    Zobaczysz, że nadal masz dostęp do pobierania (pobierania) i wypychania (przekazywania) do repozytorium. Teraz masz również dostęp do pobierania i wypychania do repozytorium firmy Microsoft:

    origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (fetch)
origin  https://github.com/username/mslearn-tailspin-spacegame-web.git (push)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (fetch)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web.git (push)

Otwieranie projektu w Eksploratorze plików

W programie Visual Studio Code okno terminala wskazuje katalog główny projektu witryny gry Space Game. Otwórzmy projekt, aby wyświetlić jego strukturę i pracować z plikami.

  1. Najprostszym sposobem otwarcia projektu jest ponowne otwarcie programu Visual Studio Code w bieżącym katalogu. W tym celu uruchom następujące polecenie w zintegrowanym terminalu:

    code -r .

    Katalog i drzewo plików zostaną wyświetlone w eksploratorze plików.

  2. Otwórz ponownie zintegrowany terminal. Terminal umieszcza Cię w katalogu głównym projektu internetowego.

Jeśli polecenie zakończy się niepowodzeniem code , musisz dodać program Visual Studio Code do ścieżki systemowej. Aby to zrobić:

  1. W programie Visual Studio Code wybierz pozycję F1 lub wybierz pozycję Wyświetl>paletę poleceń, aby uzyskać dostęp do palety poleceń.

  2. W palecie poleceń wprowadź polecenie Powłoka: Zainstaluj polecenie "code" w ścieżce PATH.

  3. Powtórz poprzednią procedurę, aby otworzyć projekt w Eksploratorze plików.

Kompilowanie i uruchamianie aplikacji internetowej

Teraz, gdy masz aplikację internetową, możesz ją skompilować i uruchomić lokalnie.

  1. W programie Visual Studio Code przejdź do okna terminalu i aby skompilować aplikację, uruchom następujące dotnet build polecenie:

    dotnet build --configuration Release

    Uwaga

    dotnet Jeśli polecenie nie zostanie znalezione, zapoznaj się z wymaganiami wstępnymi na początku tego modułu. Może być konieczne zainstalowanie zestawu .NET SDK.

    Projekty platformy .NET zwykle mają dwie konfiguracje kompilacji: debugowanie i wydawanie. Kompilacje debugowania nie są zoptymalizowane pod kątem wydajności. Ułatwiają one śledzenie za pośrednictwem programu i rozwiązywanie problemów. W tym miejscu wybierz konfigurację wydania, aby zobaczyć aplikację internetową w akcji.

  2. W oknie terminalu, aby uruchomić aplikację, uruchom następujące dotnet run polecenie:

    dotnet run --configuration Release --no-build --project Tailspin.SpaceGame.Web

    Pliki rozwiązania .NET mogą zawierać więcej niż jeden projekt. Argument --project określa projekt aplikacji internetowej Space Game .

Sprawdzanie, czy aplikacja jest uruchomiona

W trybie programowania witryna internetowa Space Game jest skonfigurowana do uruchamiania na porcie 5000.

Na nowej karcie przeglądarki przejdź do strony , aby wyświetlić http://localhost:5000 uruchomioną aplikację:

Zrzut ekranu przedstawiający przeglądarkę internetową z witryną internetową Space Game.

Napiwek

Jeśli w przeglądarce zostanie wyświetlony błąd związany z błędem prywatności lub certyfikatu, aby zatrzymać uruchomioną aplikację, wybierz Ctrl + C z terminalu.

Następnie uruchom polecenie dotnet dev-certs https --trust Tak po wyświetleniu monitu. Aby uzyskać więcej informacji, zobacz ten wpis w blogu.

Gdy komputer ufa lokalnemu certyfikatowi SSL, aby wyświetlić uruchomioną aplikację, uruchom dotnet run polecenie po raz drugi i przejdź do http://localhost:5000 nowej karty przeglądarki.

Możesz wchodzić w interakcje ze stroną, w tym z rankingiem. Po wybraniu nazwy zawodnika zostaną wyświetlone szczegółowe informacje o tym graczu:

Zrzut ekranu przedstawiający przeglądarkę internetową z rankingiem Space Game.

Po zakończeniu wróć do okna terminalu i zatrzymaj uruchomioną aplikację, wybierz Ctrl+C.