Share via

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

  • Статья

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

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

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

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

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

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

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

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

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

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

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

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

    Prompt Введите
    Выберите группу ресурсов для новых ресурсов. Выберите группу ресурсов, созданную для работы с этим учебником.
    Enter the name for the new Static Web App (Введите имя нового статического веб-приложения). Создайте уникальное имя ресурса. Например, вы можете добавить свое имя к имени репозитория: my-demo-static-web-app.
    Выбор SKU Выберите бесплатный номер SKU для этого руководства.
    Выберите расположение для новых ресурсов. Для Node.js: выберите West US 2 во время предварительной версии модели программирования функций Azure версии 4. Для C# и Python выберите регион рядом с вами.
    Choose build preset to configure default project structure (Выберите предустановку сборки, чтобы настроить структуру проекта по умолчанию). Выберите Пользовательский.
    Выберите расположение кода клиентского приложения search-website-functions-v4/client

    Это путь из корневого каталога репозитория в статическое веб-приложение.
    Выбор расположения для кода Функций Azure search-website-functions-v4/api

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

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

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

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

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

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

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

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

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

  8. В настоящее время файл YML создается с неправильным синтаксисом пути для кода функции Azure. Используйте это решение для исправления синтаксиса и повторного запуска рабочего процесса. Этот шаг можно выполнить сразу после создания файла YML. Новый рабочий процесс запускается сразу после отправки обновлений:

    1. В обозревателе Visual Studio Code откройте ./.github/workflows/ каталог.

    2. Откройте файл YML.

    3. Прокрутите путь к пути (в строке 31 или рядом api-location с ним).

    4. Измените синтаксис пути, чтобы использовать косую черту вперед ( api_location требуется только редактирование, другие расположения приведены здесь для контекста):

      app_location: "search-website-functions-v4/client" # App source code path
api_location: "search-website-functions-v4/api" # Api source code path - optional
output_location: "build" # Built app content directory - optional

    5. Сохраните файл.

    6. Откройте интегрированный терминал и выполните следующие команды GitHub, чтобы отправить обновленный YML в вилку:

      git add -A
git commit -m "fix path"
git push origin main

    Снимок экрана: команды GitHub в Visual Studio Code.

    Дождитесь завершения выполнения рабочего процесса, прежде чем продолжить. Это может занять несколько минут.

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

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

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

    az search query-key list --resource-group cognitive-search-demo-rg --service-name my-cog-search-demo-svc

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

  3. Щелкните правой кнопкой мыши имя группы ресурсов, а затем выберите Удалить. При этом удаляются ресурсы поиска и Статические веб-приложения.

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

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