Utilizando Azure CDN para desplegar nuestros webparts con Sharepoint Framework

En el post anterior empaquetamos nuestra solucion y la desplegamos a un sitio de sharepoint, luego agregamos el webpart a una pagina clasica, sin embargo los archivos javascript generados estaban de manera local.

En ambientes de produccion esa logica que desarrollamos en TypeScript o JavaScript debe alojarse en algun sitio para ser descargada y ejecutada por el navegador, para este ejemplo utilizaremos Azure CDN.

Configurar cuenta de almacenamiento

El nombre de la cuenta lo necesitaremos mas adelante.

Nombre del contenedor

Toma nota del nombre del contenedor (Blob ->Container)

Clave de acceso de la cuenta

Perfil CDN y Endpoint

Crea un perfil de Azure CDN, y luego un endpoint

Directorio del proyecto

Ahora vamos a nuestro directorio de proyecto, para crear el paquete y configurar el despliegue

cd HelloWorldApp  
Configurar detalles de la cuenta de almacenamiento

En VS Code, encuentra el archivo deploy-azure-storage.json y cambia el nombre de la cuenta de almacenamiento, contenedor y la clave de acceso.

{
  "workingDir": "./temp/deploy/",
  "account": "spfazurecdn",
  "container": "spfazurecdn2",
  "accessKey": "8JunirBcmZ6KQ8xkXYzEr6ClxIOa2WShWDCU2eB9+EsLeInr0EPh6Ei4pw1HDE/FqXi+ryFm5VgZgZ4uKwQNPA=="
}

Preparar artefactos del webpart para el despliegue

Para esto ejecutamos el comando:

gulp package-solution  
gulp --ship  

El primer comando prepara el archivo .spapp que se debe subir al App Catalog (Explicado en el post anterior)

El segundo comando genera los archivos que debemos subir al CDN.

Los archivos minificados quedan en la carpeta temp\deploy

Desplegar artefactos a Azure CDN

Para desplegar los artefactos ejecutamos el siguiente comando, esto desplegara el webpart, los css, js.

gulp deploy-azure-storage  

Configurar webpart para cargar artefactos desde Azure CDN

Para cargar los artefactos desde el Azure CDN, debemos cambiar la ruta en write-manifests.json en la carpeta config

{
  "cdnBasePath": "https://azurecdnspfx.azureedge.net/spfazurecdn2/"
}
Desplegar el paquete actualizado

Estos comandos empaqueten el archivo .spapp para subir al catalogo de aplicaciones.

gulp bundle --ship  
gulp package-solution --ship  
Actualizar el paquete en el catalogo de aplicaciones

Ahora podemos subir el archivo actualizado al catalogo .spapp

El resto del procedimiento lo podemos ver en el post anterior

Probando el webpart

Como puedes ver los archivos de la web part realmente estan siendo cargados desde el CDN, y no desde localhost como en el post anterior.