Ćwiczenie — wypychanie zmiany przez potok

  • 19 min

W tej lekcji przećwiczysz pełny przepływ pracy kodu, wypychając niewielką zmianę do witryny internetowej Space Game w usłudze GitHub.

Mara otrzymał zadanie zmiany tekstu na stronie głównej witryny internetowej Index.cshtml. W tej lekcji wykonasz kroki.

Przyjrzyjmy się krótko krokom, które należy wykonać, aby wykonać zadanie:

  • Synchronizowanie repozytorium lokalnego z najnowszą main gałęzią w usłudze GitHub
  • Tworzenie gałęzi do przechowywania zmian
  • Wprowadź potrzebne zmiany kodu i zweryfikuj je lokalnie
  • Wypychanie gałęzi do repozytorium GitHub
  • Scal wszelkie ostatnie zmiany z main gałęzi w usłudze GitHub z lokalną gałęzią roboczą i sprawdź, czy zmiany nadal działają
  • Wypychanie pozostałych zmian, obserwowanie, jak usługa Azure Pipelines kompiluje aplikację i przesyła żądanie ściągnięcia

Pobieranie najnowszej gałęzi głównej

W poprzedniej lekcji utworzono żądanie ściągnięcia i scaliliśmy code-workflow gałąź z gałęzią main w usłudze GitHub. Teraz trzeba ponownie ściągnąć zmiany gałęzi main do gałęzi lokalnej.

Polecenie git pull służy do pobierania najnowszych zmian ze zdalnego repozytorium i scalania ich z repozytorium lokalnym. W ten sposób wiesz, że pracujesz z najnowszą bazą kodu.

  1. W terminalu uruchom polecenie git checkout main , aby przełączyć się do main gałęzi:

    git checkout main

  2. Aby ściągnąć najnowsze zmiany, uruchom następujące git pull polecenie:

    git pull origin main

    Możesz wyświetlić listę zmienionych plików. Opcjonalnie możesz otworzyć plik azure-pipelines.yml , aby sprawdzić, czy zawiera on pełną konfigurację kompilacji.

    Pamiętaj, że repozytorium systemu Git, w którym współpracują członkowie zespołu (np. w usłudze GitHub), jest określane jako zdalne. W tym miejscu źródło wskazuje Twoje repozytorium w usłudze GitHub.

    Później pobierzesz kod startowy z repozytorium Microsoft GitHub, znanego jako nadrzędny.

Kompilowanie i uruchamianie aplikacji

Aby upewnić się, że masz działającą kopię, aby uruchomić zmiany, skompiluj i uruchom aplikację internetową lokalnie.

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

    dotnet build --configuration Release

  2. Uruchom następujące dotnet run polecenie, aby uruchomić aplikację:

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

    Napiwek

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

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

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

Sprawdź, 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ę.

Powinien zostać wyświetlony następujący komunikat:

Zrzut ekranu przedstawiający witrynę internetową Space Game działającą w przeglądarce internetowej.

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

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

Tworzenie gałęzi funkcji

W tej sekcji utworzysz gałąź Usługi Git, aby móc pracować nad plikami bez wpływu na inne osoby. Nikt nie będzie wiedział, że pracujesz nad tymi plikami, dopóki nie wypchniesz ich do repozytorium zdalnego.

Aby utworzyć gałąź, użyj git checkout polecenia i nadaj gałęzi nazwę, podobnie jak w poprzedniej części.

Przed utworzeniem gałęzi warto pamiętać o stosowaniu odpowiedniej konwencji nazewnictwa. Jeśli na przykład gałąź ma służyć do pracy z nową funkcją, możesz użyć nazwy feature/<branch-name>. W przypadku poprawki błędu można użyć nazwy bugfix/<bug-number>. W tym przykładzie nazwa gałęzi będzie następująca feature/home-page-text: .

W terminalu uruchom następujące git checkout polecenie:

git checkout -B feature/home-page-text

Podobnie jak wcześniej, element feature/home-page-text jest oparty na main gałęzi .

Wprowadzanie i lokalne testowanie zmian

  1. W programie Visual Studio Code otwórz plik Index.cshtml w katalogu Tailspin.SpaceGame.Web/Views/Home .

  2. Poszukaj tego tekstu w górnej części strony:

    <p>An example site for learning</p>

    Napiwek

    Visual Studio Code udostępnia również prosty sposób wyszukiwania tekstu w plikach. Aby uzyskać dostęp do okienka wyszukiwania, wybierz ikonę lupy w okienku bocznym.

  3. Zastąp tekst w poprzednim kroku następującym tekstem "mistyped", a następnie zapisz plik:

    <p>Welcome to the oficial Space Game site!</p>

    Należy pamiętać, że słowo "oficial" jest celowo błędnie wytypowane. W dalszej części tego modułu zajmiemy się tym błędem.

  4. W terminalu uruchom następujące dotnet build polecenie, aby skompilować aplikację:

    dotnet build --configuration Release

  5. Uruchom następujące dotnet run polecenie, aby uruchomić aplikację:

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

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

    Zobaczysz, że strona główna zawiera zaktualizowany tekst.

    Zrzut ekranu przedstawiający witrynę internetową Space Game ze zaktualizowanym tekstem. Tekst zawiera błąd pisowni.

    Po zakończeniu wróć do okna terminalu, a następnie naciśnij Ctrl+C , aby zatrzymać uruchomioną aplikację.

Zatwierdzanie i wypychanie gałęzi

Teraz przygotujesz zmiany w pliku Index.cshtml, zatwierdzisz je w gałęzi i wypchniesz gałąź do usługi GitHub.

  1. Uruchom polecenie git status , aby sprawdzić, czy w gałęzi nie ma niezatwierdzonych zmian:

    git status

    Zobaczysz, że plik Index.cshtml został zmodyfikowany. Podobnie jak wcześniej, następnym krokiem jest upewnienie się, że usługa Git śledzi ten plik, który jest nazywany przejściowym plikiem.

  2. Uruchom następujące git add polecenie, aby przygotować plik Index.cshtml:

    git add Tailspin.SpaceGame.Web/Views/Home/Index.cshtml

  3. Uruchom następujące git commit polecenie, aby zatwierdzić przygotowany plik w feature/home-page-text gałęzi:

    git commit -m "Improve the text at the top of the home page"

  4. Uruchom to git push polecenie, aby wypchnąć lub przekazać feature/home-page-text gałąź do repozytorium w usłudze GitHub:

    git push origin feature/home-page-text

  5. Tak jak wcześniej możesz zlokalizować gałąź w usłudze GitHub z listy rozwijanej gałęzi.

    Zrzut ekranu witryny GitHub przedstawiający nową gałąź.

Obserwowanie kompilowania aplikacji w usłudze Azure Pipelines

Tak jak wcześniej usługa Azure Pipelines automatycznie dodaje kompilację do kolejki po wypchnięciu zmian do repozytorium GitHub.

W ramach opcjonalnego kroku prześledź kompilację w miarę przechodzenia przez potok i sprawdź, czy kompilacja zakończyła się pomyślnie.

Synchronizowanie wszelkich zmian z gałęzią główną

Podczas pracy nad funkcją zmiany mogły zostać wprowadzone w gałęzi zdalnej main . Przed utworzeniem żądania ściągnięcia powszechną praktyką jest pobranie najnowszej wersji z gałęzi zdalnej main .

Aby to zrobić, najpierw wyewidencjonuj lub przełącz się na gałąź, main a następnie scal gałąź zdalną main z gałęzią lokalną main .

Następnie wyewidencjonuj gałąź funkcji, a następnie scal gałąź funkcji z gałęzią main .

Wypróbujmy tę procedurę.

  1. W terminalu uruchom następujące git checkout polecenie, aby wyewidencjonować main gałąź:

    git checkout main

  2. Aby pobrać najnowsze zmiany w gałęzi zdalnej main i scalić te zmiany z gałęzią lokalną main , uruchom następujące git pull polecenie:

    git pull origin main

    Ponieważ nikt rzeczywiście nie dokonał żadnych zmian w main gałęzi, następujące polecenie informuje, że wszystko jest już aktualne.

    From https://github.com/username/mslearn-tailspin-spacegame-web
 * branch            main     -> FETCH_HEAD
Already up to date.

  3. Aby sprawdzić gałąź funkcji, uruchom polecenie git checkout:

    git checkout feature/home-page-text

  4. Scal gałąź funkcji za pomocą polecenia main:

    git merge main

    Ponownie, ponieważ nikt rzeczywiście nie wprowadzał żadnych zmian w main gałęzi, widać, że wszystko jest nadal aktualne.

    Already up to date.

    Jeśli wprowadzono jakiekolwiek zmiany, należy ponownie przetestować aplikację, aby upewnić się, że wszystko nadal działa.

Ponowne wypychanie gałęzi lokalnej

Gdy wprowadzasz zmiany ze zdalnego repozytorium do repozytorium lokalnego, musisz ponownie wypchnąć lokalną gałąź do repozytorium zdalnego.

Mimo że nie wprowadziliśmy żadnych zmian ze zdalnego repozytorium, przećwiczmy tę procedurę i sprawdźmy, co się stanie.

  1. Uruchom to git push polecenie, aby wypchnąć zmiany do usługi GitHub:

    git push origin feature/home-page-text

    Po raz kolejny odpowiedź informuje, że jesteś już aktualny, ponieważ nie wprowadzono żadnych zmian.

    Everything up-to-date

Przesyłanie żądania ściągnięcia

W tej sekcji prześlesz żądanie ściągnięcia tak samo jak wcześniej.

  1. W przeglądarce zaloguj się do usługi GitHub.

  2. Przejdź do repozytorium mslearn-tailspin-spacegame-web .

  3. Z listy rozwijanej wybierz gałąź feature/home-page-text .

  4. Aby rozpocząć żądanie ściągnięcia, wybierz pozycję Współtworzenie , a następnie otwórz żądanie ściągnięcia.

  5. Upewnij się, że podstawowa lista rozwijana określa repozytorium, a nie repozytorium firmy Microsoft.

    Zrzut ekranu przedstawiający usługę GitHub z potwierdzeniem, że można scalić gałąź.

    Ważne

    Ponownie ten krok jest ważny, ponieważ nie można scalić zmian w repozytorium firmy Microsoft.

    Gdy pracujesz bezpośrednio z własnym repozytorium, a nie z rozwidleniem, domyślnie wybrana jest gałąź main.

  6. Wprowadź tytuł i opis żądania ściągnięcia.

    • Tytuł: Ulepszanie tekstu u góry strony głównej
    • Opis: Odebrano najnowszy tekst strony głównej od zespołu produktu.

  7. Aby ukończyć żądanie ściągnięcia, wybierz pozycję Utwórz żądanie ściągnięcia.

    Ten krok nie obejmuje scalania kodu. Informuje innych, że masz zmiany, które proponujesz scalić.

    Zostanie wyświetlone okno żądania ściągnięcia. Tak jak wcześniej, żądanie ściągnięcia wyzwala usługę Azure Pipelines domyślnie w celu utworzenia aplikacji.

  8. Opcjonalnie wybierz link Szczegóły lub przejdź do projektu w usłudze Azure DevOps i obejrzyj przebieg potoku.

  9. Po zakończeniu kompilacji wróć do żądania ściągnięcia w usłudze GitHub.

  10. Wybierz pozycję Scal żądanie ściągnięcia, a następnie wybierz pozycję Potwierdź scalanie.

  11. Wybierz pozycję Usuń gałąź, aby usunąć feature/home-page-text gałąź z usługi GitHub.