Deploy static website en Azure Storage via Azure Pipelines

18 Mar 2019

En mi último articulo de CompartiMOSS, hacía una introducción de cómo podemos hacer el hosting de nuestras aplicaciones web estáticas en Azure Storage.

En este articulo vamos a ver cómo podemos configurar nuestro despliegue continuo de nuestra web estática medianteAzure Pipelines.

Para poder llevar a cabo este despliegue necesitaremos usar Azure CLI que nos permitirá subir los ficheros al container del blob storage que deseamos.

Como base para este ejemplo cogeremos tanto el Azure Storage Static Web y el código creado en el articulo de CompartiMOSS que comentaba.

Build

Lo primero que haremos es crear la build para compilar nuestro proyecto:

</figure>

Este es un ejemplo de pipeline, donde hacemos tres acciones:

• npm install –> instalamos los paquetes npm necesarios para poder realizar el build.
• npm run build –> Este comando realizará la build de nuestra aplicación React y nos dejará en la carpeta build el resultado.
• Publish artifact –> Publicamos el resultado de la build.

Release

Una vez ya tenemos definido nuestro pipeline de build, ya podemos implementar nuestro pipeline de Release.

En este punto busqué posibles Tasks ya implementadas para usarlas, y las que he encontrado no terminan de funcionar, principalmente porque solo están preparadas para Azure Storage V1.

Finalmente después de una fustrante búsqueda decidí usar Azure CLI, que seguro que funcionaba.

Pare ello lo primero que tenemos que hacer es crear el pipeline de Release:

</figure>

Una vez tenemos el pipeline añadimos la tarea de Azure CLI y la configuramos de la siguiente forma

</figure>

Vamos a ver los campos que hemos informado:

• Display Name –> El nombre de la tarea
• Azure Subscriptios –> Seleccionamos la suscripción donde se desplegará nuestra static web
• Script Location –> Seleccionamos inline ya que el script está definido en la tarea
• Inline Script –> az storage blob upload-batch –account-name $(StorageAccountName) –account-key $(StorageAccountKey) –destination $(StorageAccountDestination) –source $(System.DefaultWorkingDirectory)/ALMTest-ASP.NET-Core-CI\drop

El script de inline es el script de Azure CLI que nos permite subir ficheros a un blob.

Como podemos observar tenemos algunas variables que a continuación definiremos, para ello seleccionaremos el tab variables y las definimos

</figure>

• StorageAccountDestinations –> Indicamos el container donde se copiarán lo ficheros, en nuestro caso $web.
• StorageAccountkey –> será la key de nuestro Azure Storage que la obtenemos del sotrage creado.
• StorageAccountName –> El nombre del storage que hemos creado.

Ahora ya lo tenemos todo apunto para ejecutar el pipeline.

Antes de ejecutarlo nuestro container estará así

<figcaption>
</figcaption></figure>

Ahora ejecutamos la release, y una vez ha finalizado vemos que se ha llenado el container con nuestra static web

</figure>

Ahora si ejecutamos nuestra web

</figure>

Espero os sirva de ayuda.

Happy coding!