Бөлісу құралы:

Шаг 3. Развертывание веб-сайта .NET с поддержкой поиска

  • Мақала

Разверните веб-сайт с поддержкой поиска в качестве Статические веб-приложения Azure сайта. Это развертывание включает как приложение React для веб-страниц, так и приложение-функцию для операций поиска.

Статическое веб-приложение извлекает сведения и файлы для развертывания из GitHub с помощью вилки репозитория azure-search-static-web-app.

Создание статического веб-приложения в Visual Studio Code

  1. В Visual Studio Code убедитесь, что вы находитесь в корневом каталоге репозитория, а не в папке массового вставки (например, azure-search-static-web-app).

  2. Выберите Azure на панели действий, а затем откройте ресурсы на боковой панели.

  3. Щелкните правой кнопкой мыши Статические веб-приложения и выберите "Создать статическое веб-приложение (дополнительно)". Если этот параметр не отображается, убедитесь, что у вас есть расширение Функции Azure для Visual Studio Code.

    Снимок экрана: Visual Studio Code с обозревателем Статические веб-приложения Azure с параметром создания расширенного статического веб-приложения.

  4. Если появится всплывающее окно с запросом на фиксацию изменений, не делайте этого. Секреты из шага массового импорта не должны быть зафиксированы в репозитории.

    Чтобы откатить изменения, в Visual Studio Code выберите значок системы управления версиями на панели действий, а затем выберите каждый измененный файл в списке изменений и щелкните значок "Отменить изменения ".

  5. Следуйте инструкциям по созданию статического веб-приложения:

    Prompt Введите
    Выберите группу ресурсов для новых ресурсов. Создайте новую группу ресурсов для статического приложения.
    Enter the name for the new Static Web App (Введите имя нового статического веб-приложения). Присвойте статическому приложению имя, например my-demo-static-web-app.
    Выбор SKU Выберите бесплатный номер SKU для этого руководства.
    Выберите расположение для новых ресурсов. Выберите ближайший географический регион.
    Choose build preset to configure default project structure (Выберите предустановку сборки, чтобы настроить структуру проекта по умолчанию). Выберите Пользовательский.
    Выберите расположение кода клиентского приложения client

    Это путь из корневого каталога репозитория в статическое веб-приложение.
    Enter the path of your build output... (Введите путь к выходным данным сборки...) build

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

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

  6. При создании статического веб-приложения файл YML рабочего процесса GitHub также создается локально и на GitHub в вилке. Этот рабочий процесс выполняется в вилке, создании и развертывании статического веб-приложения и функций.

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

    • Выберите "Открыть действия" в GitHub из уведомлений. Откроется окно браузера с указанием на разветвленный репозиторий.

    • Перейдите на вкладку "Действия " в вилку репозитория. Вы увидите список всех рабочих процессов на вилке.

    • Выберите Azure: журнал действий в Visual Code. Вы увидите сообщение, аналогичное следующему снимку экрана.

      Снимок экрана: журнал действий в Visual Studio Code.

Получение ключа запроса поиска ИИ Azure в Visual Studio Code

Хотя вам может потребоваться повторно использовать ключ администратора поиска для целей запроса, которые не следуют принципу наименьших привилегий. Функция Azure должна использовать ключ запроса для соответствия наименьшим привилегиям.

  1. В Visual Studio Code откройте новое окно терминала.

  2. Получите ключ API запроса с помощью этой команды Azure CLI:

    az search query-key list --resource-group YOUR-SEARCH-SERVICE-RESOURCE-GROUP --service-name YOUR-SEARCH-SERVICE-NAME

  3. Сохраните этот ключ запроса для использования в следующем разделе. Ключ запроса разрешает доступ на чтение к индексу поиска.

Добавление переменных среды в портал Azure

Приложение-функция Azure не будет возвращать данные поиска, пока в настройках не появятся секреты поиска.

  1. На панели действий щелкните значок Azure.

  2. Щелкните правой кнопкой мыши ресурс Статические веб-приложения и выберите "Открыть на портале".

    Снимок экрана: Visual Studio Code с Статические веб-приложения Azure обозревателе с параметром

  3. Выберите переменные среды и нажмите кнопку "Добавить параметр приложения".

    Снимок экрана: страница переменных среды статического веб-приложения в портал Azure.

  4. Добавьте каждый из следующих параметров:

    Параметр Значение ресурса поиска
    SearchApiKey Ключ запроса поиска
    SearchServiceName Имя ресурса поиска
    SearchIndexName good-books
    SearchFacets authors*,language_code

    Для поиска ИИ Azure требуется другой синтаксис для фильтрации коллекций, отличных от строк. Добавьте * после имени поля, чтобы указать, что поле имеет тип Collection(Edm.String). Это позволит функции Azure добавить правильные фильтры в запросы.

  5. Проверьте параметры, чтобы убедиться, что они выглядят следующим снимок экрана.

    Снимок экрана: браузер с портал Azure с кнопкой для сохранения параметров приложения.

  6. Верните в Visual Studio Code.

  7. Обновите статическое веб-приложение, чтобы просмотреть параметры и функции приложения.

    Снимок экрана: Visual Studio Code с обозревателем Статические веб-приложения Azure с новыми параметрами приложения.

Если параметры приложения не отображаются, вернитесь к инструкциям по обновлению и повторному запуску рабочего процесса GitHub.

Использование поиска в статическом веб-приложении

  1. В Visual Studio Code откройте панель действий и выберите значок Azure.

  2. На боковой панели щелкните правой кнопкой мыши подписку Azure в Static Web Apps области и найдите статическое веб-приложение, созданное для этого руководства.

  3. Щелкните правой кнопкой мыши имя статического веб-приложения и выберите "Обзор сайта".

    Снимок экрана: Visual Studio Code с обозревателем Статические веб-приложения Azure с параметром **Обзор сайта** .

  4. Выберите Открыть во всплывающем диалоговом окне.

  5. В строке поиска веб-сайта введите поисковый запрос, например code, поэтому функция предложения предлагает названия книг. Выберите предложение или продолжайте ввод собственного запроса. Завершив поисковый запрос, нажмите клавишу ВВОД.

  6. Просмотрите результаты и выберите одну из книг, чтобы ознакомиться с дополнительными сведениями.

Устранение неполадок

Если веб-приложение не развернуло или не работало, используйте следующий список, чтобы определить и устранить проблему:

  • Успешно ли развертывание?

    Чтобы определить, успешно ли выполнено развертывание, необходимо перейти в вилку примера репозитория и проверить успешность или сбой действия GitHub. Должно быть только одно действие, и оно должно иметь статические параметры веб-приложения для app_location, api_locationи output_location. Если действие не было успешно развернуто, перейдите в журналы действий и найдите последний сбой.

  • Работает ли клиентское приложение (интерфейсное приложение)?

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

  • Работает ли приложение API (бессерверная серверная часть)?

    Вы должны иметь возможность взаимодействовать с клиентским приложением, искать книги и фильтрацию. Если форма не возвращает какие-либо значения, откройте средства разработчика браузера и определите, были ли http-вызовы к API успешными. Если вызовы не были успешными, скорее всего, причина, если конфигурации статических веб-приложений для имени конечной точки API и ключа поискового запроса неверны.

    Если путь к коду функции Azure (api_location) не является правильным в файле YML, приложение загружает, но не вызывает ни одну из функций, которые обеспечивают интеграцию с поиском ИИ Azure. Вернитесь к разделу развертывания, чтобы убедиться, что пути верны.

Очистка ресурсов

Чтобы очистить ресурсы, созданные в этом руководстве, удалите группу ресурсов или отдельные ресурсы.

  1. В Visual Studio Code откройте панель действий и выберите значок Azure.

  2. На боковой панели щелкните правой кнопкой мыши подписку Static Web Apps Azure в области и найдите приложение, созданное для этого руководства.

  3. Щелкните правой кнопкой мыши имя приложения и нажмите кнопку "Удалить".

  4. Если вы больше не хотите использовать развилку GitHub для примера, не забудьте удалить ее на GitHub. Перейдите к параметрам вилки и удалите репозиторий.

  5. Чтобы удалить поиск Azure AI, найдите службу поиска и выберите " Удалить " в верхней части страницы.

Следующие шаги