Gyakorlat – Változás leküldése a folyamaton keresztül

  • 14 perc

Ebben a részben látható, hogyan működnek a telepítési helyek. A webhely kezdőlapján módosíthatja a háttérszínt és a szöveget a főcímcímen. Ezután leküldheti a módosításokat a GitHubra, megnézheti a folyamat futását, és ellenőrizheti a módosításokat.

A folyamat további gyakorlásához visszaállíthatja a módosításokat, és figyelheti a folyamat futtatását, továbbhaladhat.

A hero banneren lévő szöveg módosítása

Itt módosíthatja a kiemelt banner szövegét. Később látni fogja a változást az App Service-ben való üzembe helyezéskor.

  1. A Visual Studio Code-ban, a Tailspin.SpaceGame.Web/Views/Home könyvtárban nyissa meg az Index.cshtmlfájlt.

  2. Keresse meg ezt a szöveget a lap tetején:

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

    Borravaló

    A Visual Studio Code lehetővé teszi a fájlokban lévő szöveg keresését. A keresőablak eléréséhez válassza a nagyító ikont az oldalablakban.

  3. Cserélje le a példaszöveget a következő szövegre, majd mentse a fájlt.

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

A háttérszín módosítása

Itt a kiemelt banner háttérszínét szürkéről zöldre módosítja.

  1. A Visual Studio Code-ban a Tailspin.SpaceGame.Web/wwwroot/css könyvtárban nyissa meg site.scss.

    Fontos

    Nyissa meg site.scss, ne site.css. Az építési fázis node-sass fut, hogy átalakítsa a site.scss (Sass-fájl) a site.css (standard CSS-fájl) formátummá.

  2. Keresse meg a következő kódot a fájl tetején:

    .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. A kódban cserélje le a kiemelt szöveget az alábbi példában látható módon. Ezután mentse a fájlt.

    .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;

A módosítás leküldése a folyamaton keresztül

A módosítás ellenőrzéséhez általában helyileg kell létrehoznia és futtatnia a webhelyet. A társított egységteszteket is futtathatja annak ellenőrzéséhez, hogy a módosítás nem szakítja-e meg a meglévő funkciókat.

A rövidség kedvéért itt véglegesíti az ág módosításait, leküldi az ágat a GitHubra, és figyeli a folyamat futását.

  1. Adja hozzá Index.cshtml és site.scss az indexhez, véglegesítse a módosításokat, majd küldje el a módosításokat a GitHubra.

    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. Az Azure Pipelinesban minden lépésben nyomon követheti a buildet.

  3. Lépjen a gyártási helyhez tartozó URL-címre a tesztelési környezetben. Ez az az alapértelmezett foglalat, amelyet a korábbi lépések során a folyamat beállításakor konfigurált.

    Láthatja, hogy az üzembe helyezett webhely szín- és szövegváltozásokat jelenít meg.

    Képernyőkép egy böngészőről, amely szín- és szövegváltozásokkal jeleníti meg a Space Game webhelyét.

  4. Menjen arra az URL-címre, amely a átmeneti környezet cserélendő slotjához tartozik. Az URL-cím nevében a "-swap.azurewebsites.net" szerepel.

    A webhely előző verzióját láthatja a szín és a szöveg módosítása nélkül.

    Képernyőkép egy böngészőről, amely a normál Space Game webhelyet jeleníti meg.

    Nem lát változást, mert felcserélte a gyártási helyet és a csere helyet. Más szóval, itt mindig a csere helyre telepít, majd kicseréli a éles helyet és a csere helyet. A felcserélési folyamat biztosítja, hogy a gyártási hely a legutóbbi üzembe helyezésre mutasson.

A módosítás visszaállítása

Tegyük fel, hogy üzembe helyezett egy módosítást, amelyet vissza szeretne állítani. Ezen a ponton visszaállíthatja a módosítást a gyártási hely felcserélésével, majd és helyek ismételt felcserélésével. Például manuálisan is felcserélheti a helyeket az Azure portálon. Vagy a módosítások visszaállítása helyett előre léphet egy másik módosítás továbbításával a folyamaton keresztül.

Ezt fogod itt csinálni. Visszaállítja a legújabb kódmódosításokat, és leküld egy újabb módosítást a folyamaton keresztül. Ehhez használja a git revert parancsot.

A Gitben ritkán távolítja el a commit-eket egy fájl előzményeiből. A szövegszerkesztőben a "visszavonás" művelettel ellentétben a git revert parancs létrehoz egy új véglegesítést, amely lényegében a megadott véglegesítések ellentéte. A véglegesítések megtekintéséhez először futtassa a git log parancsot a véglegesítési előzmények nyomon követéséhez a visszaállítási folyamat során.

  1. A terminálban futtassa a következő git log parancsot a véglegesítési előzmények megtekintéséhez.

    git --no-pager log --oneline

    A kimenet a következő kód példához hasonlít. A kimenetben további véglegesítések és különböző véglegesítési azonosítók láthatók.

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

    A kimenetben kövesse nyomon a véglegesítési előzményeket. A legújabb véglegesítés a csúcson van.

  2. Futtassa a következő git revert parancsot egy commit-tal való visszaállításhoz.

    git revert --no-edit HEAD

    Úgy gondoljon HEAD, mint az ág aktuális állapotára. A HEAD a legújabb véglegesítésre hivatkozik. Ez a parancs csak a HEAD vagy a legújabb véglegesítés visszaállítását határozza meg.

  3. Futtassa újra a git log a frissített véglegesítési előzmények megtekintéséhez.

    git --no-pager log --oneline

    A kimenet tetején megjelenik egy további véglegesítés, amely visszaállítja az előző véglegesítést. Íme egy példa:

    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

A visszaállított módosítás továbbítása a folyamatláncon keresztül

Itt leküldheti a visszaállított módosítást a folyamaton keresztül, és megtekintheti az eredményeket.

  1. Futtassa a következő git push parancsot a blue-green ág GitHub-adattárba való feltöltéséhez.

    git push origin blue-green

  2. Az Azure Pipelines-ben nyissa meg a build folyamatot. Kövesd a build futását.

  3. Látogassa meg az cserélendő helynek és a éles helynek megfelelő URL-címeket az átmeneti környezethez.

    Az gyártási hely most a visszaállított változtatásra mutat, amely az eredeti webhely.

    Képernyőkép egy böngészőről, amely az eredeti Space Game webhelyet jeleníti meg a módosítások visszaállítása után. A webhely nem tartalmazza a szín- és szövegmódosításokat.

    A cserélési hely most az előző változásra mutat.

    Képernyőkép egy böngészőről, amely a módosítás visszaállítása után megjeleníti a Space Game webhelyét. A webhely a szín- és szövegváltozásokat jeleníti meg.

Nagyszerű munka! A csapatnak most már van módja a kiadások automatizálására. Új funkciókhoz juthatnak a felhasználók állásidő nélkül.

Csapatértekezlet

A csapat összegyűlik, hogy bemutassa a folyamatláncot. Ezúttal Tim átviszi a módosítást a folyamatláncon, miközben mindenki figyelemmel kíséri. De nem mindenki van meggyőződve róla.

Andy: Nagyszerű látni a telepítési helyek működését. De nem értem. Hogyan profitálhatunk az állásidő nélküli telepítésekből? Tesztkörnyezet csak a csapatunknak és a vezetőségnek szánt.

Tim: Valóban, most nem fogunk sok előnyt látni. De képzelje el, amikor kék-zöld üzembe helyezéseket alkalmazunk egy éles fázisra. Továbbra is megkapjuk a kézi jóváhagyást a vezetőségtől, mielőtt továbbvinnénk Éles. Ha azonban új funkciókat adunk ki, a felcserélési folyamat szinte azonnal megtörténik. Ez zökkenőmentes lesz a felhasználók számára.

Andy: ok, azt hiszem, most már értem. Tetszik ez a javulás. Az üzembehelyezési pontok rendszere egyszerűen beállítható, és a felhasználók számára előnyös lesz. Mindenki nyer.

Amita: Ha már a fejlesztésekről van szó, miért nem vesszük át néhány héttel ezelőtt az értékáram-leképezési gyakorlatunkat? Fogadok, hogy láthatjuk, milyen gyorsan tudunk új funkciókat kiadni.

Mara: Nagyszerű, tegyük fel a napirendre a következő csapattalálkozónkra.