Exercício – Emitir uma alteração através do pipeline

Concluído

Nesta parte, você verá seus slots de implantação em ação. Na página inicial do site, você altera a cor de fundo e o texto no banner do herói. Em seguida, envie suas alterações para o GitHub, observe a execução do pipeline e verifique as alterações.

Para praticar ainda mais o processo, você reverte suas alterações e observa o pipeline ser executado como uma forma de avançar.

Alterar o texto no banner do herói

Aqui você altera o texto no banner do herói. Mais tarde, você verá a alteração quando implantar no Serviço de Aplicativo.

1. No Visual Studio Code, no diretório Tailspin.SpaceGame.Web/Views/Home , abra Index.cshtml.

2. Procure este texto perto do topo da página:

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

   Gorjeta

   Visual Studio Code fornece uma maneira de procurar texto em arquivos. Para acessar o painel de pesquisa, selecione o ícone de lupa no painel lateral.

3. Substitua o texto de exemplo pelo texto a seguir e salve o arquivo.

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

Alterar a cor do plano de fundo

Aqui você muda a cor de fundo do banner do herói de cinza para verde.

1. No Visual Studio Code, no diretório Tailspin.SpaceGame.Web/wwwroot/css , abra site.scss.

   Importante

   Abra site.scss, não site.css. O estágio Build é executado node-sass para converter site.scss (um arquivo Sass) em site.css (um arquivo CSS padrão).

2. Localize o seguinte código perto da parte superior do arquivo:

   .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. No código, substitua o texto realçado como mostrado no exemplo a seguir. Em seguida, guarde o ficheiro.

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

Empurre a mudança através do pipeline

Normalmente, você criaria e executaria o site localmente para verificar a alteração. Você também pode executar quaisquer testes de unidade associados para verificar se a alteração não interrompe a funcionalidade existente.

Para maior brevidade, aqui você confirma as alterações em sua ramificação, envia sua ramificação para o GitHub e observa a execução do pipeline.

1. Adicione Index.cshtml e site.scss ao índice, confirme as alterações e envie as alterações para o 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. No Azure Pipelines, rastreie a compilação em cada etapa.

3. Vá para a URL que corresponde ao slot de produção para seu ambiente de preparação . Esse slot é o slot padrão que você configurou quando configurou o pipeline anteriormente.

   Você vê que o site implantado mostra as alterações de cor e texto.

   

4. Vá para a URL que corresponde ao slot de permuta para seu ambiente de preparação. O URL inclui "-swap.azurewebsites.net" no nome.

   Você vê a versão anterior do site, sem as alterações de cor e texto.

   

   Você não vê alterações porque trocou o slot de produção e o slot de troca. Em outras palavras, aqui você sempre implanta no slot de swap e, em seguida, troca o slot de produção e o slot de troca. O processo de permuta garante que o slot de produção aponte para a implantação mais recente.

Reverta a alteração

Digamos que você implantou uma alteração que deseja reverter. Neste ponto, você pode reverter a alteração trocando o slot de produção e trocando o slot novamente. Por exemplo, você pode trocar os slots manualmente por meio do portal do Azure. Ou, em vez de reverter as alterações, você pode avançar empurrando outra alteração através do pipeline.

É isso que você vai fazer aqui. Você reverterá as alterações de código mais recentes e enviará outra alteração pelo pipeline. Para tal, use o comando git revert.

No Git, raramente você remove confirmações do histórico de um arquivo. Ao contrário da operação "desfazer" em um editor de texto, o git revert comando cria uma nova confirmação que é essencialmente o oposto do conjunto especificado de confirmações. Para ver as confirmações, primeiro execute o git log comando para rastrear seu histórico de confirmações durante o processo de reversão.

1. No terminal, execute o seguinte git log comando para visualizar o histórico de confirmação.

   git --no-pager log --oneline
   

   Sua saída é semelhante ao exemplo de código a seguir. Na sua saída, você verá confirmações adicionais e IDs de confirmação diferentes.

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

   Na saída, rastreie o histórico de confirmação. O último compromisso está no topo.

2. Execute o seguinte git revert comando para reverter por uma confirmação.

   git revert --no-edit HEAD
   

   Pense em HEAD como o estado atual do seu ramo. HEAD refere-se ao último compromisso. Este comando especifica para reverter apenas a confirmação HEAD, ou mais recente.

3. Execute git log novamente para ver seu histórico de confirmação atualizado.

   git --no-pager log --oneline
   

   Na parte superior da saída, você verá uma confirmação adicional que reverte a confirmação anterior. Eis um exemplo:

   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
   

Empurre a alteração revertida através do pipeline

Aqui você empurra sua alteração revertida através do pipeline e vê os resultados.

1. Execute o seguinte git push comando para carregar a blue-green ramificação no repositório GitHub.

   git push origin blue-green
   

2. No Azure Pipelines, vá para a compilação. Rastreie a compilação enquanto ela é executada.

3. Vá para as URLs que correspondem ao slot de permuta e ao slot de produção para seu ambiente de preparação.

   O slot de produção agora aponta para a sua alteração revertida, que é o site original.

   

   O slot de swap agora aponta para a alteração anterior.

   

Bom trabalho! A equipe agora tem uma maneira de automatizar os lançamentos. Eles podem obter novos recursos para seus usuários sem incorrer em tempo de inatividade.

Reunião de equipa

A equipe se reúne para demonstrar o pipeline. Desta vez, Tim empurra uma mudança através do pipeline enquanto todos assistem. Mas nem todos estão convencidos.

Andy: É ótimo ver slots de implantação em ação. Mas eu não entendo. Como nos beneficiamos das implantações sem tempo de inatividade aqui? A encenação é apenas para a nossa equipa e gestão.

Tim: Na verdade, não veremos muitos benefícios agora. Mas imagine quando aplicamos implantações azul-verde a um estágio de produção . Ainda teremos a aprovação manual da gerência antes de promovermos para a Produção. Mas quando lançarmos novos recursos, o processo de troca tornará o lançamento quase instantâneo. Será perfeito para os nossos utilizadores.

Andy: OK, acho que entendo agora. Eu gosto dessa melhoria. O sistema de slots de implantação foi fácil de configurar e beneficiará nossos usuários. Todos ganham.

Amita: Falando em melhorias, por que não revisitamos nosso exercício de mapeamento de fluxo de valor que fizemos há algumas semanas? Aposto que veremos progresso na rapidez com que podemos lançar novos recursos.

Mara: Ótimo, vamos colocar isso na agenda da nossa próxima reunião de equipe.