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

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

Примечание.

• Сведения о публикации надстройки Office, созданной с помощью Visual Studio, см. в статье Публикация надстройки с помощью Visual Studio.
• Сведения о публикации надстройки Office, созданной с помощью набора средств Teams, см. в разделах Развертывание приложения Teams в облаке и Развертывание первого приложения Teams. Эта статья посвящена приложениям на вкладках Teams, но она применима к надстройкам Office, созданным с помощью набора средств Teams.

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

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

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

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

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

Примечание.

Эти действия работают только для проектов, созданных с помощью генератора Yeoman и использующих манифест в формате XML. Они не применяются, если вы создали надстройку с помощью набора средств 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.

   

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. При появлении запроса выберите созданную ранее учетную запись хранения.

    

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 последними изменениями.

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

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

• Изменения запрошенных разрешений. См. статью Запрос разрешений для использования API в надстройках и Общие сведения о разрешениях надстроек Outlook.
• Дополнительные или измененные области. (Неприменимо, если надстройка использует унифицированный манифест для Microsoft 365.)
• Дополнительные или измененные события Outlook.

Примечание.

Каждый раз, когда вы вносите изменения в манифест, необходимо повысить номер версии манифеста.

• Если надстройка использует XML-манифест, см. раздел Элемент Version.
• Если надстройка использует унифицированный манифест, см. раздел свойство version.

См. также

• Разработка надстроек Office с помощью Visual Studio Code
• Развертывание и публикация надстройки Office
• Поддержка общего доступа к ресурсам между источниками (CORS) для службы хранилища Azure