Compartir a través de

Implementar el elemento web del lado cliente de SharePoint en una red CDN de Azure

  • Artículo

Cree un elemento web de ejemplo e implemente sus activos en una red de entrega de contenido (CDN) de Azure en lugar de usar la red CDN de Office 365 predeterminada como solución de hospedaje. Usará una cuenta de Azure Storage integrada con una red CDN para implementar los activos. Las herramientas de compilación de SharePoint Framework proporcionan compatibilidad rápida para implementar en una cuenta de Azure Storage; en cambio, también puede cargar los archivos de forma manual en su proveedor de red CDN favorito o en SharePoint.

Nota:

Existen varias opciones de hospedaje para sus recursos de elemento web. Este tutorial se centra en mostrar la opción CDN de Azure, pero también puede usarse el CDN de Office 365 o simplemente hospedar los activos de la biblioteca de SharePoint del espacio empresarial. En este último caso, no se beneficiará de las mejoras de rendimiento de la red CDN, pero funcionará desde el punto de vista de la funcionalidad. Cualquier ubicación a la que los usuarios finales puedan tener acceso mediante HTTP sería técnicamente adecuada para hospedar los activos para los usuarios finales.

Configurar una cuenta de Azure Storage

Para configurar una cuenta de Azure Storage e integrarla con la red CDN, siga las instrucciones de Integración de una cuenta de Azure Storage con la red CDN de Azure, junto con los pasos detallados de este artículo.

Nota:

Como las interfaces de usuario de Azure están evolucionando rápidamente, algunas de las imágenes y los pasos pueden estar obsoletos, pero el proceso general sigue siendo válido.

Nombre de la cuenta de almacenamiento

Es el nombre que ha usado para crear la cuenta de almacenamiento, como se describe en Paso 1: Creación de una cuenta de almacenamiento.

Por ejemplo, en la siguiente captura de pantalla, spfxsamples es el nombre de la cuenta de almacenamiento.

Captura de pantalla que muestra la página de creación de una cuenta de almacenamiento

Se crea un punto de conexión de cuenta de almacenamiento spfxsamples.blob.core.windows.net.

Nota:

Debe crear un nombre de cuenta de almacenamiento único para sus propios proyectos de SharePoint Framework.

Nombre del contenedor de blobs

Cree un contenedor de Blob service. Esta opción está disponible en el panel de la cuenta de almacenamiento.

Seleccione + Contenedor y cree un contenedor con la siguiente información:

  • Nombre: azurehosted-webpart
  • Tipo de acceso: Contenedor

Imagen que muestra la opción para crear un contenedor de blobs: paso 1Imagen que muestra la opción para crear un contenedor de blobs: paso 2

Clave de acceso a la cuenta de almacenamiento

En el panel de la cuenta de almacenamiento, seleccione Clave de acceso y copie una de las claves de acceso.

Imagen que muestra la clave de acceso de la cuenta de almacenamiento

Punto de conexión y perfil de red CDN

Cree un perfil de red CDN y asocie el punto de conexión de red CDN con este contenedor de blobs.

  1. Cree un perfil de red CDN como se describe en Paso 2: Habilitación de la red CDN para la cuenta de almacenamiento (desplácese hacia abajo en el paso 2 para saber cómo crear un perfil de la red CDN).

    Por ejemplo, en la siguiente captura de pantalla, spfxwebparts es el nombre del perfil de red CDN.

    Captura de pantalla de la creación de un perfil de red CDN

  2. Cree un punto de conexión de red CDN como se describe en Paso 2: Habilitación de la red CDN para la cuenta de almacenamiento. El punto de conexión de red CDN se crea con la siguiente dirección URL: http://spfxsamples.azureedge.net.

    Por ejemplo, en la siguiente captura de pantalla, spfxsamples es el nombre del punto de conexión, Storage es el tipo de origen y spfxsamples.blob.core.windows.net es la cuenta de almacenamiento.

    Captura de pantalla de Crear un nuevo punto de conexión de CDN

Ya que ha asociado el punto de conexión de red CDN con su cuenta de almacenamiento, también puede obtener acceso al contenedor de blobs en la siguiente dirección URL: http://spfxsamples.azureedge.net/azurehosted-webpart/.

Tenga en cuenta que aún no ha implementado los archivos.

Crear un proyecto de elementos web

  1. Cree un directorio de proyecto en su ubicación preferida:

    md azurehosted-webpart

  2. Vaya al directorio del proyecto:

    cd azurehosted-webpart

  3. Ejecute el generador de Yeoman de SharePoint para crear una nueva solución de SharePoint Framework:

    yo @microsoft/sharepoint

  4. Cuando se le pida:

    • Acepte el nombre de solución azurehosted-webpart predeterminado y presione ENTRAR.
    • Seleccione SharePoint Online only (latest) (Solo SharePoint Online [más reciente]) y presione Entrar.
    • Seleccione Usar la carpeta actual para colocar los archivos.
    • Seleccione y para usar la opción de implementación de ámbito de espacio empresarial, que hace que el elemento web esté disponible en los sitios inmediatamente cuando se han implementado.
    • Seleccione N en la pregunta si la solución contiene permisos exclusivos.
    • Seleccione Elemento web como tipo de componente del lado cliente que se va a crear.

  5. En el siguiente conjunto de preguntas, se le pedirá información específica sobre el elemento web:

    • Use AzureCDN como nombre de su elemento web y presione ENTRAR.
    • Acepte la descripción de elemento web AzureCDN description (Descripción de AzureCDN) predeterminada y presione ENTRAR.
    • Acepte el marco web No JavaScript predeterminado como el marco que desea usar y seleccione Entrar.

    Preguntas del generador de Yeoman sobre el elemento web recién creado

    En este momento, Yeoman aplica scaffolding en los archivos de la solución e instala las dependencias necesarias. Esta operación puede tardar unos minutos. Yeoman aplica scaffolding en el proyecto para incluir también el elemento web personalizado.

  6. Escriba lo siguiente para abrir el proyecto de elementos web en Visual Studio Code:

    code .

Configurar la solución para que no use la configuración predeterminada

  1. Abra el archivo ./config/package-solution.json. Aquí es donde se controla el paquete de solución.

  2. Establezca el includeClientSideAssets valor en para false que los recursos del lado cliente NO estén empaquetados dentro del archivo .sppkg , que es el comportamiento predeterminado. Como hospedamos recursos de una red CDN externa, no queremos que se incluyan en el paquete de solución. La configuración debería tener un aspecto parecido a lo siguiente.

    {
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "azurehosted-webpart-client-side-solution",
    "id": "a4e95ed1-d096-4573-8a57-d0cc3b52da6a",
    "version": "1.0.0.0",
    "includeClientSideAssets": false,
    "skipFeatureDeployment": true,
    "isDomainIsolated": false
  },
  "paths": {
    "zippedPackage": "solution/azurehosted-webpart.sppkg"
  }
}

    Nota:

    La skipFeatureDeployment configuración está aquí true porque se ha dicho que la respuesta para la opción de implementación de ámbito de inquilino es "y" en el flujo de Yeoman. Esto significa que NO es necesario instalar de forma explícita la solución en el sitio para que esté disponible el elemento web. Implementar y aprobar un paquete de solución en el Catálogo de aplicaciones del espacio empresarial es suficiente para que los elementos web estén disponibles en todos los sitios del espacio empresarial especificado.

Configurar los detalles de la cuenta de Azure Storage

  1. Abra el archivo ./config/deploy-azure-storage.json . Este es el archivo que contiene los detalles de la cuenta de Azure Storage.

    {
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
  "workingDir": "./release/assets/",
  "account": "<!-- STORAGE ACCOUNT NAME -->",
  "container": "azurehosted-webpart",
  "accessKey": "<!-- ACCESS KEY -->"
}

    Importante

    La ubicación de los recursos usados en las implementaciones de Azure CDN cambió en SPFx v1.12.1. El fragmento de código anterior refleja la ubicación correcta en la workingDir propiedad .

    Para los proyectos creados antes de SPFx v1.12.1, la workingDir propiedad se estableció en ./temp/deploy/. Si ha actualizado el proyecto a SPFx v1.12.1+, debe actualizar esta propiedad a la configuración anterior. Para obtener más información, consulte SharePoint Framework notas de la versión v1.12.1.

  2. Reemplace , container, accessKey por el accountnombre de la cuenta de almacenamiento, el contenedor BLOB y la clave de acceso de la cuenta de almacenamiento respectivamente.

    workingDir es el directorio donde se encuentran los recursos del elemento web.

    En este ejemplo, con la cuenta de almacenamiento creada anteriormente, el archivo será similar a este:

    {
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
  "workingDir": "./release/assets/",
  "account": "spfxsamples",
  "container": "azurehosted-webpart",
  "accessKey": "q1UsGWocj+CnlLuv9ZpriOCj46ikgBbDBCaQ0FfE8+qKVbDTVSbRGj41avlG73rynbvKizZpIKK9XpnpA=="
}

  3. Guarde el archivo.

Configurar el elemento web para que se cargue desde la red CDN

Para que el elemento web se cargue desde la red CDN, debe indicarle la ruta de acceso de la red CDN.

  1. Cambie a Visual Studio Code y abra el archivo ./config/write-manifests.json.

  2. Escriba la ruta de acceso base de la red CDN para la cdnBasePath propiedad .

    {
  "cdnBasePath": "<!-- PATH TO CDN -->"
}

    En este ejemplo, con el perfil de red CDN creado anteriormente, el archivo será similar a este:

    {
  "cdnBasePath": "https://spfxsamples.azureedge.net/azurehosted-webpart/"
}

    Nota:

    La ruta de acceso base de la red CDN es el punto de conexión de la red CDN con el contenedor de blobs.

  3. Guarde el archivo.

Preparar los activos del elemento web para la implementación

Antes de cargar los recursos en la red CDN, debe compilarlos.

  1. Cambie a la consola y ejecute la siguiente tarea gulp :

    gulp bundle --ship

    Esto compilará los recursos reducidos necesarios para cargar en el proveedor de red CDN. --ship indica la herramienta de compilación que se va a compilar para su distribución. También debe observar que la salida de la herramienta de compilación indica que el destino de compilación es SHIP.

    Build target: SHIP
[21:23:01] Using gulpfile ~/apps/azurehosted-webpart/gulpfile.js
[21:23:01] Starting gulp
[21:23:01] Starting 'default'...

    Los recursos minificados se pueden encontrar en el directorio temp\deploy .

Implementar activos en Azure Storage

  1. Cambie a la consola del directorio del proyecto azurehosted-webpart.

  2. Especifique la tarea de Gulp para implementar los activos en su cuenta de almacenamiento:

    gulp deploy-azure-storage

    Esto implementa el paquete de elementos web con otros activos (como archivos CSS y JavaScript) en la red CDN.

Implementar el paquete actualizado

Para empaquetar la solución

Como cambió el conjunto de elementos web, necesita volver a implementar el paquete en el Catálogo de aplicaciones. Use --ship para generar activos reducidos para su distribución.

  1. Cambie a la consola del directorio del proyecto azurehosted-webpart.

  2. Escriba la tarea gulp para empaquetar la solución del lado cliente, esta vez con la marca --ship establecida. Esto obliga a la tarea a retomar la ruta de acceso base de la red CDN configurada en el paso anterior:

    gulp package-solution --ship

    Se crea el paquete de solución del lado cliente actualizado en la carpeta sharepoint\solution.

Para cargar en el Catálogo de aplicaciones

  1. Cargue (o arrastre y coloque) el paquete de solución del lado cliente en el Catálogo de aplicaciones. Como puede ver, la dirección URL apunta a la dirección URL de la red CDN de Azure configurada en los pasos anteriores.

  2. Active la casilla para indicar que la solución puede implementarse automáticamente en todos los sitios de la organización.

    Captura de pantalla del aviso para confiar en el paquete de solución del lado cliente

  3. Seleccione Implementar.

    El Catálogo de aplicaciones ya tiene el paquete de solución del lado cliente donde se cargó el conjunto de elementos web desde la red CDN.

Probar el elemento web HelloWorld

  1. Vaya a cualquier sitio de SharePoint en su espacio empresarial y seleccione Agregar una página desde el menú de engranaje.

  2. Edite la página y seleccione el elemento web AzureCDN del selector de elementos web para confirmar que la implementación se ha realizado correctamente.

    Captura de pantalla que selecciona el elemento web del selector

  3. Tenga en cuenta que no está ejecutando gulp serve y, por lo tanto, no se sirve nada de localhost. El contenido se sirve desde la red CDN de Azure. También puede comprobarlo de forma doble seleccionando F12 en el explorador y confirmando que puede ver Azure CDN como uno de los orígenes de los recursos de página.

    Orígenes con la dirección URL de la red CDN de Azure

Implementar en otras redes CDN

Para implementar los activos en su proveedor de red CDN favorito, puede copiar los archivos de la carpeta temp\deploy. Para generar activos para su distribución, ejecute el siguiente comando de Gulp como se ha hecho antes con el parámetro --ship:

gulp bundle --ship

Siempre y cuando actualice en cdnBasePath consecuencia, los archivos se cargarán correctamente.

Nota:

Si encuentra un problema en la documentación o en SharePoint Framework, informe al servicio de ingeniería de SharePoint; para hacerlo, use la lista de problemas en el repositorio de sp-dev-docs, o bien agregue un comentario a este artículo. Le agradecemos de antemano su participación.

Vea también