Esercizio - Eseguire il push di una modifica attraverso la pipeline

14 minuti

In questa sezione si osserveranno gli slot di distribuzione in azione. Nella home page del sito Web si procederà alla modifica del colore di sfondo e del testo nel banner largo. Si eseguirà quindi il push delle modifiche in GitHub, si osserverà l'esecuzione della pipeline e si eseguirà la verifica delle modifiche.

Per esercitarsi ulteriormente con il processo, si annulleranno le modifiche e si osserverà l'esecuzione della pipeline come metodo per eseguire il roll forward.

Modificare il testo nel banner largo

In questa sezione si procederà alla modifica del testo nel banner largo. La modifica sarà visibile in seguito con la distribuzione nel servizio app.

In Visual Studio Code, nella directory Tailspin.SpaceGame.Web/Views/Home, aprire Index.cshtml.
Cercare questo testo nella parte superiore della pagina:
```
<p>An example site for learning</p>
```
Suggerimento

Visual Studio Code consente di cercare il testo nei file. Per accedere al riquadro di ricerca, selezionare l'icona della lente di ingrandimento nel riquadro laterale.
Sostituire il testo di esempio con il testo seguente e quindi salvare il file.
```
<p>Welcome to the official Space Game site!</p>
```

Cambiare il colore di sfondo

In questa sezione il colore di sfondo del banner largo verrà cambiato da grigio in verde.

In Visual Studio Code, nella directory Tailspin.SpaceGame.Web/wwwroot/css, aprire site.scss.

Importante

Aprire site.scss e non site.css. La fase di compilazione (Build) eseguirà node-sass per convertire site.scss (file Sass) in site.css (file CSS standard).

Individuare il codice seguente all'inizio del file:

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

Nel codice sostituire il testo evidenziato come illustrato nell'esempio seguente. Salvare quindi il file.

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

Eseguire il push della modifica attraverso la pipeline

In genere si esegue la compilazione e quindi si esegue il sito in locale per verificare la modifica. È anche possibile eseguire gli eventuali unit test associati per verificare che la modifica non comprometta le funzionalità esistenti.

Per brevità, in questa sezione si eseguirà il commit delle modifiche nel ramo, si eseguirà il push del ramo in GitHub e si osserverà l'esecuzione della pipeline.

Aggiungere index.cshtml e site.scss all'indice, eseguire il commit delle modifiche e quindi eseguire il push delle modifiche in 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

In Azure Pipelines tracciare la compilazione in ogni passaggio.
Passare all'URL corrispondente allo slot production per l'ambiente di gestione temporanea (Staging). Questo è lo slot predefinito configurato durante la configurazione della pipeline effettuata in precedenza.

Nl sito Web distribuito saranno visibili le modifiche apportate al colore e al testo.
Passare all'URL corrispondente allo slot swap per l'ambiente Staging. L'URL include "-swap.azurewebsites.net" nel nome.

Verrà visualizzata la versione precedente del sito Web, senza le modifiche di colore e testo.

Le modifiche non sono visibili perché è stato effettuato lo scambio degli slot production e swap. In altre parole, in questa sezione la distribuzione viene sempre effettuata nello slot swap e quindi viene effettuato lo scambio degli slot production e swap. Il processo di scambio garantisce che lo slot production punti alla distribuzione più recente.

Annullare la modifica

Si supponga di aver distribuito una modifica che si vuole annullare. A questo punto, è possibile eseguire il rollback della modifica scambiando di nuovo gli slot production e swap. Ad esempio, è possibile scambiare gli slot manualmente tramite il portale di Azure. In alternativa, anziché eseguire il rollback delle modifiche, è possibile eseguire il roll forward con il push di un'altra modifica attraverso la pipeline.

Sono queste le operazioni che verranno eseguite. Si annulleranno le ultime modifiche apportate al codice e si eseguirà il push di un'altra modifica attraverso la pipeline. A questo scopo, usare il comando git revert.

In Git si rimuovono raramente i commit dalla cronologia di un file. A differenza dell'operazione di annullamento in un editor di testo, il comando git revert crea un nuovo commit che in pratica è l'opposto del set specificato di commit. Per visualizzare i commit, eseguire prima di tutto il comando git log per tracciare la cronologia dei commit durante il processo di annullamento.

Nel terminale eseguire questo comando git log per visualizzare la cronologia dei commit.
```
git --no-pager log --oneline
```
L'output sarà simile all'esempio di codice seguente. Nell'output saranno visibili altri commit e ID di commit diversi.
```
d6130b0 (HEAD -> blue-green, origin/blue-green) Change text and colors on the home page
ce56955 Swap deployment slots
0d6a123 Trigger the pipeline
```
Nell'output tracciare la cronologia dei commit. Il commit più recente viene visualizzato per primo.
Eseguire questo comando git revert per effettuare l'annullamento di un commit.
```
git revert --no-edit HEAD
```
Considerare HEAD come lo stato corrente del ramo. HEAD si riferisce al commit più recente. Questo comando specifica di annullare solo il commit HEAD, ovvero il più recente.

Eseguire di nuovo git log per visualizzare la cronologia dei commit aggiornata.

git --no-pager log --oneline

Nella parte superiore dell'output è visibile un altro commit che annulla il commit precedente. Ecco un esempio:

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

Eseguire attraverso la pipeline il push della modifica annullata

In questa sezione si eseguirà attraverso la pipeline il push della modifica annullata e si visualizzeranno i risultati.

Eseguire questo comando git push per caricare il ramo blue-green nel proprio repository GitHub.
```
git push origin blue-green
```
In Azure Pipelines passare alla compilazione. Tracciare quindi la compilazione durante l'esecuzione.
Passare agli URL che corrispondono agli slot swap e production per l'ambiente Staging.

Lo slot production ora punta alla modifica annullata, ovvero al sito Web originale.

Lo slot swap punta ora alla modifica precedente.

Ottimo lavoro! Il team ha ora la possibilità di automatizzare le versioni. Può offrire nuove funzionalità agli utenti senza incorrere in tempi di inattività.

Riunione del team

Il team si riunisce per una dimostrazione della pipeline. Questa volta Tim esegue il push di una modifica attraverso la pipeline mentre tutti gli altri guardano. Non tutti però sono convinti.

Andy: È fantastico osservare gli slot di distribuzione al lavoro. Però non capisco. Quale vantaggio otteniamo qui dalle distribuzioni con nessun tempo di inattività? L'ambiente Staging è destinato solo al team e ai dirigenti.

Tim: Effettivamente in questo momento non vediamo molti vantaggi. Proviamo però a immaginare di applicare distribuzioni blu-verdi a una fase di produzione (Production). Sarà comunque necessaria l'approvazione manuale dei dirigenti prima del passaggio a Production. Ma quando rilasceremo nuove funzionalità, il processo di scambio renderà l'implementazione quasi istantanea. Gli utenti non percepiranno alcuna interruzione.

Andy: OK, penso di aver capito ora. Mi piace questo miglioramento. Il sistema degli slot di distribuzione è stato facile da configurare e sarà vantaggioso per gli utenti. Vincono tutti.

Amita: A proposito di miglioramenti, perché non ripetiamo l'esercizio di mapping del flusso di valori eseguito alcune settimane fa? Scommetto che potremo osservare un miglioramento della velocità di rilascio delle nuove funzionalità.

Mara: Fantastico. Inseriamolo in agenda per la prossima riunione del team.