Поделиться через

Публикация надстройки, разработанной с помощью Visual Studio Code

  • Статья

В этой статье описано, как опубликовать надстройку Office, созданную с помощью генератора Yeoman и разработанную в Visual Studio Code (VS Code) или любом другом редакторе.

Примечание.

Публикация надстройки для доступа других пользователей

Надстройка Office состоит из веб-приложения и файла манифеста. Веб-приложение определяет пользовательский интерфейс и функции надстройки, а манифест указывает расположение веб-приложения и определяет параметры и возможности надстройки.

Во время разработки надстройку можно запустить на локальном веб-сервере (localhost). Когда вы будете готовы опубликовать его для доступа других пользователей, необходимо развернуть веб-приложение и обновить манифест, указав URL-адрес развернутого приложения.

Если надстройка работает должным образом, ее можно опубликовать непосредственно в Visual Studio Code с помощью расширения службы хранилища Azure.

Использование Visual Studio Code для публикации

Примечание.

Эти действия работают только для проектов, созданных с помощью генератора Yeoman и использующих только манифест надстройки. Они не применяются, если вы создали надстройку с помощью набора средств Teams или создали ее с помощью генератора Yeoman и использует унифицированный манифест для Microsoft 365.

  1. Откройте проект из корневой папки в Visual Studio Code (VS Code).

  2. Выберите Просмотр>расширений (CTRL+SHIFT+X), чтобы открыть представление Расширения.

  3. Найдите расширение службы хранилища Azure и установите его.

  4. После установки на панель действий добавляется значок Azure. Выберите его, чтобы получить доступ к расширению. Если панель действий скрыта, откройте ее, выбрав Просмотр>панели действийвнешнего вида>.

  5. Выберите Войти в Azure, чтобы войти в учетную запись Azure. Если у вас еще нет учетной записи Azure, создайте ее, выбрав Создать учетную запись Azure. Выполните указанные действия, чтобы настроить учетную запись.

    Кнопка

  6. После входа вы увидите, что учетные записи хранения Azure отображаются в расширении. Если у вас еще нет учетной записи хранения, создайте ее с помощью параметра Создать учетную запись хранения в палитре команд. Присвойте учетной записи хранения глобально уникальное имя, используя только "a-z" и "0-9". Обратите внимание, что по умолчанию создается учетная запись хранения и группа ресурсов с тем же именем. Она автоматически помещает учетную запись хранения в западную часть США. Это можно изменить в интернете с помощью учетной записи Azure.

    Выберите Учетные > записи хранения Создать учетную запись хранения в расширении Azure.

  7. Щелкните правой кнопкой мыши (или выберите и удерживайте) учетную запись хранения и выберите Настроить статический веб-сайт. Вам будет предложено ввести имя документа индекса и имя документа 404. Измените имя документа индекса с по умолчанию index.html на taskpane.html. Вы также можете изменить имя документа 404, но это не обязательно.

  8. Щелкните правой кнопкой мыши (или выберите и удерживайте) учетную запись хранения и на этот раз выберите Обзор статического веб-сайта. В открывающемся окне браузера скопируйте URL-адрес веб-сайта.

  9. Откройте файл манифеста проекта (manifest.xml) и измените все ссылки на URL-адрес localhost (например https://localhost:3000, ) на скопированный URL-адрес. Эта конечная точка является URL-адресом статического веб-сайта для созданной учетной записи хранения. Сохраните изменения в файле манифеста.

  10. Откройте командную строку или окно терминала и перейдите в корневой каталог проекта надстройки. Выполните следующую команду, чтобы подготовить все файлы для развертывания в рабочей среде.

    npm run build

    После завершения сборки папка dist в корневом каталоге проекта надстройки будет содержать файлы, разворачиваемые на следующих этапах.

  11. В VS Code перейдите в обозреватель, щелкните правой кнопкой мыши (или выберите и удерживайте) папку dist , а затем выберите Развернуть на статический веб-сайт через службу хранилища Azure. При появлении запроса выберите созданную ранее учетную запись хранения.

    Выберите папку dist, щелкните правой кнопкой мыши (или выберите и удерживайте) и выберите Развернуть на статический веб-сайт через службу хранилища Azure.

  12. После завершения развертывания щелкните правой кнопкой мыши (или выберите и удерживайте) созданную ранее учетную запись хранения и выберите Обзор статического веб-сайта. Откроется статический веб-сайт и отобразится область задач.

  13. Наконец, загрузите неопубликованный файл манифеста , и надстройка загрузится со статического веб-сайта, который вы только что развернули.

Развертывание пользовательских функций для Excel

Если надстройка имеет пользовательские функции, их можно включить в учетной записи хранения Azure еще несколько действий. Сначала включите CORS, чтобы Office могла получить доступ к файлу functions.json.

  1. Щелкните правой кнопкой мыши (или выберите и удерживайте) учетную запись хранения Azure и выберите Открыть на портале.

  2. В группе Параметры выберите Общий доступ к ресурсам (CORS). Вы также можете использовать поле поиска, чтобы найти его.

  3. Создайте новое правило CORS со следующими параметрами.

    Свойство Значение
    Допустимые источники *
    Разрешенные методы GET
    Разрешенные заголовки *
    Доступные заголовки Access-Control-Allow-Origin
    Максимальный возраст 200

  4. Выберите Сохранить.

Предостережение

Эта конфигурация CORS предполагает, что все файлы на сервере являются общедоступными для всех доменов.

Затем добавьте тип MIME для json-файлов.

  1. Создайте файл в папке /src с именем web.config.

  2. Вставьте следующий XML-код и сохраните файл.

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

  3. Откройте файл webpack.config.js.

  4. Добавьте следующий код в список , plugins чтобы скопировать web.config в пакет при выполнении сборки.

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

  5. Откройте командную строку и перейдите в корневой каталог проекта надстройки. Затем выполните следующую команду, чтобы подготовить все файлы к развертыванию.

    npm run build

    После завершения сборки папка dist в корневом каталоге проекта надстройки будет содержать файлы, которые вы будете развертывать.

  6. Чтобы развернуть, в обозревателе VS Code щелкните правой кнопкой мыши (или выберите и удерживайте) папку dist и выберите Развернуть на статический веб-сайт через службу хранилища Azure. При появлении запроса выберите созданную ранее учетную запись хранения. Если вы уже развернули папку dist , вам будет предложено перезаписать файлы в службе хранилища Azure последними изменениями.

Развертывание обновлений

Вы будете развертывать обновления в веб-приложении так же, как описано ранее. Изменения манифеста требуют повторного распространения манифеста для пользователей. Процесс этого зависит от метода публикации. Дополнительные сведения об обновлении надстройки см. в разделе Обслуживание надстройки Office.

См. также