Ćwiczenie — wypychanie zmiany przez potok

Ukończone

W tej części zobaczysz miejsca wdrożenia w akcji. Na stronie głównej witryny internetowej zmieniasz kolor tła i tekst na banerze hero. Następnie wypchniesz zmiany do usługi GitHub, obejrzyj przebieg potoku i zweryfikuj zmiany.

Aby jeszcze bardziej przećwiczyć ten proces, należy przywrócić zmiany i obejrzeć przebieg potoku jako sposób wprowadzania dalej.

Zmienianie tekstu na banerze hero

Tutaj zmienisz tekst na banerze hero. Później zobaczysz zmianę podczas wdrażania w usłudze App Service.

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

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

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

   Napiwek

   Program Visual Studio Code umożliwia wyszukiwanie tekstu w plikach. Aby uzyskać dostęp do okienka wyszukiwania, wybierz ikonę lupy w okienku bocznym.

3. Zastąp przykładowy tekst następującym tekstem, a następnie zapisz plik.

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

Zmień kolor tła

W tym miejscu zmienisz kolor tła baneru hero z szarego na zielony.

1. W programie Visual Studio Code w katalogu Tailspin.SpaceGame.Web/wwwroot/css otwórz plik site.scss.

   Ważne

   Otwórz plik site.scss, a nie site.css. Etap kompilacji jest uruchamiany node-sass w celu przekonwertowania pliku site.scss (pliku Sass) na site.css (standardowy plik CSS).

2. Znajdź następujący kod w górnej części pliku:

   .intro {
     height: 350px;
     background-color: #666;
     background-image: url('/images/space-background.svg');
     background-size: 1440px;
     background-position: center top;
     background-repeat: no-repeat;
     background-attachment: fixed;
   

3. W kodzie zastąp wyróżniony tekst, jak pokazano w poniższym przykładzie. Następnie zapisz plik.

   .intro {
     height: 350px;
     background-color: green;
     background-image: url('/images/space-background.svg');
     background-size: 1440px;
     background-position: center top;
     background-repeat: no-repeat;
     background-attachment: fixed;
   

Wypychanie zmiany przez potok

Zwykle należy skompilować i uruchomić lokację lokalnie, aby zweryfikować zmianę. Możesz również uruchomić wszystkie skojarzone testy jednostkowe, aby sprawdzić, czy zmiana nie przerywa istniejących funkcji.

Aby uzyskać zwięzłość, w tym miejscu zatwierdź zmiany w gałęzi, wypchnij gałąź do usługi GitHub i obejrzyj przebieg potoku.

1. Dodaj indeks Index.cshtml i site.scss do indeksu, zatwierdź zmiany, a następnie wypchnij zmiany do usługi GitHub.

   git add Tailspin.SpaceGame.Web/Views/Home/Index.cshtml Tailspin.SpaceGame.Web/wwwroot/css/site.scss
   git commit -m "Change text and colors on the home page"
   git push origin blue-green
   

2. W usłudze Azure Pipelines prześledzić kompilację w każdym kroku.

3. Przejdź do adresu URL odpowiadającego miejscu produkcyjnemu środowiska przejściowego. To miejsce jest domyślnym miejscem skonfigurowanym podczas wcześniejszego konfigurowania potoku.

   Zobaczysz, że wdrożona witryna internetowa pokazuje zmiany koloru i tekstu.

   

4. Przejdź do adresu URL odpowiadającego miejscu zamiany dla środowiska przejściowego. Adres URL zawiera ciąg "-swap.azurewebsites.net" w nazwie.

   Zostanie wyświetlona poprzednia wersja witryny internetowej bez zmiany koloru i tekstu.

   

   Nie widzisz żadnych zmian, ponieważ zamieniono miejsce produkcyjne i miejsce wymiany . Innymi słowy, w tym miejscu zawsze wdrażasz w miejscu zamiany , a następnie zamieniasz miejsce produkcyjne i miejsce wymiany . Proces zamiany gwarantuje, że miejsce produkcyjne wskazuje na nowsze wdrożenie.

Cofnij zmianę

Załóżmy, że wdrożono zmianę, którą chcesz przywrócić. W tym momencie można wycofać zmianę, zamieniając miejsce produkcyjne i ponownie zamieniając miejsce. Można na przykład ręcznie zamienić miejsca za pośrednictwem witryny Azure Portal. Lub, zamiast wycofywania zmian, możesz przejść do przodu, wypychając kolejną zmianę przez potok.

To, co zrobisz tutaj. Przywrócisz najnowsze zmiany kodu i wypchniesz kolejną zmianę do potoku. Aby to zrobić, użyj polecenia git revert.

W usłudze Git rzadko usuwasz zatwierdzenia z historii pliku. W przeciwieństwie do operacji "cofnij" w edytorze git revert tekstów polecenie tworzy nowe zatwierdzenie, które jest zasadniczo przeciwieństwem określonego zestawu zatwierdzeń. Aby wyświetlić zatwierdzenia, najpierw uruchom git log polecenie , aby śledzić historię zatwierdzeń podczas procesu przywracania.

1. W terminalu uruchom następujące git log polecenie, aby wyświetlić historię zatwierdzń.

   git --no-pager log --oneline
   

   Dane wyjściowe są podobne do poniższego przykładu kodu. W danych wyjściowych zobaczysz dodatkowe zatwierdzenia i różne identyfikatory zatwierdzeń.

   d6130b0 (HEAD -> blue-green, origin/blue-green) Change text and colors on the home page
   ce56955 Swap deployment slots
   0d6a123 Trigger the pipeline
   

   W danych wyjściowych prześledź historię zatwierdzń. Najnowsze zatwierdzenie znajduje się na górze.

2. Uruchom następujące git revert polecenie, aby przywrócić jedno zatwierdzenie.

   git revert --no-edit HEAD
   

   Pomyśl o head jako bieżącym stanie gałęzi. Funkcja HEAD odwołuje się do najnowszego zatwierdzenia. To polecenie określa, aby przywrócić tylko wersję HEAD lub najnowszą zatwierdzenie.

3. Uruchom ponownie polecenie git log , aby wyświetlić zaktualizowaną historię zatwierdzń.

   git --no-pager log --oneline
   

   W górnej części danych wyjściowych zostanie wyświetlone dodatkowe zatwierdzenie, które spowoduje przywrócenie poprzedniego zatwierdzenia. Oto przykład:

   e58896a (HEAD -> blue-green) Revert "Change text and colors on the home page"
   d6130b0 (origin/blue-green) Change text and colors on the home page
   ce56955 Swap deployment slots
   0d6a123 Trigger the pipeline
   

Wypychanie przywróconej zmiany przez potok

W tym miejscu wypchniesz przywróconą zmianę do potoku i zobaczysz wyniki.

1. Uruchom następujące git push polecenie, aby przekazać blue-green gałąź do repozytorium GitHub.

   git push origin blue-green
   

2. W usłudze Azure Pipelines przejdź do kompilacji. Śledzenie kompilacji podczas jej uruchamiania.

3. Przejdź do adresów URL odpowiadających miejsce wymiany i miejsce produkcyjne dla środowiska przejściowego .

   Miejsce produkcyjne wskazuje teraz przywróconą zmianę, która jest oryginalną witryną internetową.

   

   Miejsce zamiany wskazuje teraz poprzednią zmianę.

   

Dobra robota! Zespół ma teraz sposób automatyzowania wydań. Użytkownicy mogą uzyskiwać nowe funkcje bez ponoszenia przestojów.

Spotkanie zespołu

Zespół zbiera się w celu pokazu potoku. Tym razem Tim wypycha zmianę potoku, gdy wszyscy obserwują. Ale nie wszyscy są przekonani.

Andy: Świetnie jest widzieć miejsca wdrożenia w pracy. Ale nie dostaję go. Jak korzystać z wdrożeń bez przestojów w tym miejscu? Przemieszczanie dotyczy tylko naszego zespołu i zarządzania.

Tim: Rzeczywiście, nie zobaczymy teraz dużej korzyści. Załóżmy jednak, że stosujemy wdrożenia niebiesko-zielone do etapu produkcyjnego. Nadal będziemy mieli ręczne zatwierdzenie przez kierownictwo przed podwyższeniem poziomu do produkcji. Jednak gdy udostępnimy nowe funkcje, proces zamiany sprawi, że wdrożenie będzie niemal natychmiastowe. Będzie ona bezproblemowa dla naszych użytkowników.

Andy: OK, myślę, że rozumiem teraz. Podoba mi się ta poprawa. System miejsc wdrożenia był łatwy do skonfigurowania i przyniesie korzyści naszym użytkownikom. Każdy wygrywa.

Amita: Mówiąc o ulepszeniach, dlaczego nie zapoznajemy się z naszym ćwiczeniem mapowania strumienia wartości, które wykonaliśmy kilka tygodni temu? Założę się, że zobaczymy postęp w tym, jak szybko możemy wydać nowe funkcje.

Mara: Świetnie, umieścimy to w porządku obrad na naszym następnym spotkaniu zespołu.

Kontynuuj