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

Шаг 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 Static Web Apps показан параметр для создания расширенного статического веб-приложения.

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

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

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

    Подсказка Введите
    Выберите группу ресурсов для новых ресурсов. Создайте новую группу ресурсов для статического приложения.
    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 Static Web Apps, с параметром «Открыть в портале».

  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 Static Web Apps с параметром **Обзор сайта**.

  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. На боковой панели щелкните правой кнопкой мыши на вашу подписку Azure в области Static Web Apps и найдите приложение, созданное для этого руководства.

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

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

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

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

  • Last updated on