Ejercicio: Inserción de un cambio a través de la canalización

14 minutos

En esta parte, verá las ranuras de implementación en acción. En la página principal del sitio web, cambie el color de fondo y el texto en el banner del héroe. Después, inserte los cambios en GitHub, vea cómo se ejecuta la canalización y compruebe los cambios.

Para practicar más con el proceso, revierta los cambios y vea la ejecución de la canalización como una forma de puesta al día.

Cambio del texto en el banner del héroe

Aquí cambiará el texto en el banner del héroe. Más adelante verá el cambio a realizar la implementación en App Service.

En Visual Studio Code, abra index.cshtml en el directorio Tailspin.SpaceGame.Web/Views/Home.
Busque este texto junto a la parte superior de la página:
```
<p>An example site for learning</p>
```
Sugerencia

Visual Studio Code también proporciona una manera fácil de buscar texto en archivos. Para acceder al panel de búsqueda, seleccione el icono de lupa en el panel lateral.
Reemplace el texto de ejemplo por el siguiente y, después, guarde el archivo.
```
<p>Welcome to the official Space Game site!</p>
```

Cambio del color de fondo

Aquí cambiará el color de fondo del banner del héroe de gris a verde.

En Visual Studio Code, abra site.scss en el directorio Tailspin.SpaceGame.Web/wwwroot/css.

Importante

Abra site.scss, no site.css. La fase de compilación ejecuta node-sass para convertir site.scss (un archivo Sass) en site.css (un archivo CSS estándar).

Busque el código siguiente junto a la parte superior del archivo:

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

En el código, reemplace el texto resaltado como se muestra en el ejemplo siguiente. A continuación, guarde el archivo.

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

Inserción del cambio mediante la canalización

Normalmente tendría que compilar y ejecutar el sitio de forma local para comprobar el cambio. También podría ejecutar las pruebas unitarias asociadas para comprobar que el cambio no interrumpa la funcionalidad existente.

Por motivos de brevedad, aquí se confirman los cambios en la rama, se envía la rama a GitHub y se ve la ejecución de la canalización.

Agregue Index.cshtml y site.scss al índice, confirme los cambios y, después, insértelos en 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

En Azure Pipelines, realice el seguimiento de la compilación a lo largo de cada paso.
Vaya a la dirección URL correspondiente a la ranura production del entorno de ensayo. Esta ranura es la predeterminada que ha configurado al configurar la canalización anterior.

Verá que en el sitio web implementado se muestran los cambios de color y texto.
Vaya a la dirección URL correspondiente a la ranura swap del entorno de ensayo. La dirección URL incluye "-swap.azurewebsites.net" en el nombre.

Verá la versión anterior del sitio web, sin los cambios de color y texto.

No verá ningún cambio porque ha intercambiado las ranuras production y swap. Es decir, aquí siempre se realiza la implementación en la ranura swap y, después, se intercambian las ranuras production y swap. El proceso de intercambio garantiza que la ranura production señale a la implementación más reciente.

Revertir el cambio

Imagine que ha implementado un cambio que quiere revertir. En este momento, podría revertir el cambio si vuelve a intercambiar las ranuras production y swap. Por ejemplo, podría intercambiar las ranuras de forma manual mediante Azure Portal. O bien, en lugar de revertir los cambios, podría realizar la puesta al día si inserta otro cambio por medio de la canalización.

Eso es lo haremos aquí. Revertirá los cambios de código más recientes e insertará otro mediante la canalización. Para ello, use el comando git revert.

En Git, no es habitual quitar confirmaciones del historial de un archivo. A diferencia de la operación de "deshacer" de un editor de texto, el comando git revert crea una confirmación que, en esencia, es la contraria del conjunto de confirmaciones especificado. Para ver las confirmaciones,primero debe ejecutar el comando git log a fin de realizar el seguimiento del historial de confirmaciones durante el proceso de reversión.

En el terminal, ejecute el comando git log siguiente para ver el historial de confirmaciones.
```
git --no-pager log --oneline
```
La salida será similar al ejemplo de código siguiente. En la salida, verá confirmaciones adicionales y otros identificadores de confirmación.
```
d6130b0 (HEAD -> blue-green, origin/blue-green) Change text and colors on the home page
ce56955 Swap deployment slots
0d6a123 Trigger the pipeline
```
En la salida, realice el seguimiento del historial de confirmaciones. La confirmación más reciente está en la parte superior.
Ejecute el comando git revert siguiente para revertir una confirmación.
```
git revert --no-edit HEAD
```
Considere a HEAD como el estado actual de la rama. HEAD hace referencia a la última confirmación. Este comando especifica que solo se revierta la confirmación HEAD, es decir, la más reciente.

Vuelva a ejecutar git log para ver el historial de confirmaciones actualizado.

git --no-pager log --oneline

En la parte superior de la salida, verá una confirmación adicional que revierte la confirmación anterior. Este es un ejemplo:

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

Inserte el cambio revertido por medio de la canalización

Ahora enviará los cambios revertidos mediante la canalización y verá los resultados.

Ejecute el comando git push siguiente para cargar la rama blue-green en el repositorio de GitHub.
```
git push origin blue-green
```
En Azure Pipelines, vaya a la compilación. Realice el seguimiento de la compilación a medida que se ejecuta.
Vaya a las direcciones URL correspondientes a las ranuras swap y production del entorno de ensayo.

Ahora la ranura production apunta al cambio revertido, que es el sitio web original.

Ahora la ranura swap apunta al cambio anterior.

¡Excelente trabajo! El equipo ya tiene una forma de automatizar las versiones. Pueden hacer llegar características nuevas a los usuarios sin incurrir en tiempo de inactividad.

Reunión de equipo

El equipo se reúne para demostrar la canalización. Esta vez, Tim envía un cambio por medio de la canalización mientras los demás observan. Pero no todos están convencidos.

Andy: Es excelente ver las ranuras de implementación en acción. Pero no lo entiendo. ¿Cómo nos beneficiamos de implementaciones sin tiempo de inactividad? Ensayo es exclusivo para nuestro equipo y la dirección.

Tim: En realidad, ahora no veremos muchas ventajas. Pero imagina cuando apliquemos implementaciones azul-verde en una fase de producción. La dirección todavía tiene que aprobarlo antes de que se pueda promover a producción. Pero cuando publiquemos nuevas características, el proceso de intercambio hará que el lanzamiento se realice de forma casi instantánea. Será invisible para nuestros usuarios.

Andy: Vale, creo que ya lo entiendo. Me gusta esta mejora. El sistema de ranuras de implementación ha sido fácil de configurar y beneficiará a los usuarios. Todos ganamos.

Amita: Hablando de mejoras, ¿por qué no revisamos nuestro ejercicio de asignación de valores y flujos de hace unas semanas? Apuesto a que veremos avances en la rapidez con la que podemos publicar nuevas características.

Mara: Fantástico, vamos a incluirlo en la agenda de nuestra próxima reunión de equipo.