Compartir a través de

Publicar un complemento desarrollado con Visual Studio Code

  • Artículo

En este artículo se describe cómo publicar un complemento de Office que ha creado con el generador Yeoman y ha desarrollado con Visual Studio Code (VS Code) o cualquier otro editor.

Nota:

Publicar un complemento para que otros usuarios puedan obtener acceso

Un complemento de Office consta de una aplicación web y un archivo de manifiesto. La aplicación web define la interfaz de usuario y la funcionalidad del complemento, mientras que el manifiesto especifica la ubicación de la aplicación web y define la configuración y las características del complemento.

Durante el desarrollo, puede ejecutar el complemento en el servidor web local (localhost). Cuando esté listo para publicarlo para que otros usuarios accedan, deberá implementar la aplicación web y actualizar el manifiesto para especificar la dirección URL de la aplicación implementada.

Cuando el complemento funciona según lo deseado, puede publicarlo directamente a través de Visual Studio Code mediante la extensión Azure Storage.

Uso de Visual Studio Code para publicar

Nota:

Estos pasos solo funcionan para los proyectos creados con el generador de Yeoman y que usan el manifiesto de solo complemento. No se aplican si creó el complemento con el kit de herramientas de Teams o lo creó con el generador de Yeoman y usa el manifiesto unificado para Microsoft 365.

  1. Abra el proyecto desde su carpeta raíz en Visual Studio Code (VS Code).

  2. Seleccione Ver>extensiones (Ctrl+Mayús+X) para abrir la vista Extensiones.

  3. Busque la extensión de Azure Storage e instálela.

  4. Una vez instalado, se agrega un icono de Azure a la barra de actividad. Selecciónelo para acceder a la extensión. Si la barra de actividad está oculta, ábrala seleccionando Ver> barra deactividad de apariencia>.

  5. Seleccione Iniciar sesión en Azure para iniciar sesión en su cuenta de Azure. Si aún no tiene una cuenta de Azure, seleccione Crear una cuenta de Azure para crear una. Siga los pasos proporcionados para configurar la cuenta.

    Botón Iniciar sesión en Azure seleccionado en la extensión de Azure.

  6. Una vez que haya iniciado sesión, verá que las cuentas de Almacenamiento de Azure aparecen en la extensión. Si aún no tiene una cuenta de almacenamiento, cree una mediante la opción Crear cuenta de almacenamiento en la paleta de comandos. Asigne a la cuenta de almacenamiento un nombre único global, usando solo "a-z" y "0-9". Tenga en cuenta que, de forma predeterminada, crea una cuenta de almacenamiento y un grupo de recursos con el mismo nombre. Coloca automáticamente la cuenta de almacenamiento en oeste de EE. UU. Esto se puede ajustar en línea a través de su cuenta de Azure.

    Seleccione Cuentas > de almacenamiento Crear cuenta de almacenamiento en la extensión de Azure.

  7. Haga clic con el botón derecho (o seleccione y mantenga presionada) la cuenta de almacenamiento y seleccione Configurar sitio web estático. Se le pedirá que escriba el nombre del documento de índice y el nombre del documento 404. Cambie el nombre del documento de índice del valor predeterminado index.html a taskpane.html. También puede cambiar el nombre del documento 404, pero no es necesario.

  8. Haga clic con el botón derecho (o mantenga presionada) la cuenta de almacenamiento de nuevo y, esta vez, seleccione Examinar sitio web estático. En la ventana del explorador que se abre, copie la dirección URL del sitio web.

  9. Abra el archivo de manifiesto del proyecto (manifest.xml) y cambie todas las referencias a la dirección URL de localhost (por https://localhost:3000ejemplo, ) a la dirección URL que ha copiado. Este punto de conexión es la dirección URL del sitio web estático de la cuenta de almacenamiento recién creada. Guarde los cambios en el archivo de manifiesto.

  10. Abra un símbolo del sistema o una ventana de terminal y vaya al directorio raíz del proyecto de complemento. Ejecute el siguiente comando para preparar todos los archivos para la implementación de producción.

    npm run build

    Al finalizar la compilación, la carpeta dist en el directorio raíz del proyecto de complemento contendrá los archivos que implementará en los siguientes pasos.

  11. En VS Code, vaya al Explorador y haga clic con el botón derecho (o mantenga presionada) la carpeta dist y seleccione Implementar en un sitio web estático a través de Azure Storage. Cuando se le solicite, seleccione la cuenta de almacenamiento que creó anteriormente.

    Seleccione la carpeta dist, haga clic con el botón derecho (o seleccione y mantenga presionado) y seleccione Implementar en sitio web estático a través de Azure Storage.

  12. Una vez completada la implementación, haga clic con el botón derecho (o mantenga presionada) la cuenta de almacenamiento que creó anteriormente y seleccione Examinar sitio web estático. Se abre el sitio web estático y se muestra el panel de tareas.

  13. Por último, cargue de forma local el archivo de manifiesto y el complemento se cargará desde el sitio web estático que acaba de implementar.

Implementación de funciones personalizadas para Excel

Si el complemento tiene funciones personalizadas, hay algunos pasos más para habilitarlas en la cuenta de Azure Storage. En primer lugar, habilite CORS para que Office pueda acceder al archivo functions.json.

  1. Haga clic con el botón derecho (o seleccione y mantenga presionada) la cuenta de Almacenamiento de Azure y seleccione Abrir en el portal.

  2. En el grupo Configuración, seleccione Uso compartido de recursos (CORS). También puede usar el cuadro de búsqueda para buscar esto.

  3. Cree una nueva regla de CORS con la siguiente configuración.

    Propiedad Valor
    Orígenes permitidos *
    Métodos permitidos GET
    Encabezados permitidos *
    Encabezados expuestos Access-Control-Allow-Origin
    Edad máxima 200

  4. Haga clic en Guardar.

Precaución

Esta configuración de CORS supone que todos los archivos del servidor están disponibles públicamente para todos los dominios.

A continuación, agregue un tipo MIME para los archivos JSON.

  1. Cree un nuevo archivo en la carpeta /src denominada web.config.

  2. Inserte el siguiente XML y guarde el archivo.

    <?xml version="1.0"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
  </system.webServer>
</configuration>

  3. Abra el archivo webpack.config.js.

  4. Agregue el código siguiente en la lista de plugins para copiar el web.config en la agrupación cuando se ejecute la compilación.

    new CopyWebpackPlugin({
  patterns: [
  {
    from: "src/web.config",
    to: "src/web.config",
  },
 ],
}),

  5. Abra un símbolo del sistema de línea de comandos y vaya al directorio raíz del proyecto del complemento. A continuación, ejecute el siguiente comando para preparar todos los archivos para la implementación.

    npm run build

    Cuando se complete la compilación, la carpeta dist del directorio raíz del proyecto de complemento contendrá los archivos que implementará.

  6. Para implementar, en el Explorador de VS Code, haga clic con el botón derecho (o mantenga presionada) la carpeta dist y seleccione Implementar en sitio web estático a través de Azure Storage. Cuando se le solicite, seleccione la cuenta de almacenamiento que creó anteriormente. Si ya ha implementado la carpeta dist , se le pedirá que sobrescriba los archivos en Azure Storage con los cambios más recientes.

Implementar actualizaciones

Implementará las actualizaciones en la aplicación web de la misma manera que se describió anteriormente. Los cambios en el manifiesto requieren redistribuir el manifiesto a los usuarios. El proceso para hacerlo depende del método de publicación. Para obtener más información sobre cómo actualizar el complemento, vea Mantener el complemento de Office.

Vea también