Etapa 3 – Implantar o site do .NET habilitado para pesquisa

  • Artigo

Implante o site habilitado para pesquisa como um site dos Aplicativos Web Estáticos do Azure. Essa implantação inclui o aplicativo React para as páginas da Web e o aplicativo de funções para operações de pesquisa.

O aplicativo Web estático efetua pull das informações e dos arquivos para implantação do GitHub usando seu fork do repositório de amostras.

Criar um Aplicativo Web Estático no Visual Studio Code

  1. No Visual Studio Code, verifique se você está na raiz do repositório e não na pasta de inserção em massa (por exemplo, azure-search-javascript-samples).

  2. Selecione Azure na barra de atividades e abra Recursos na barra lateral.

  3. Clique com o botão direito do mouse em Aplicativos Web Estáticos e selecione Criar Aplicativo Web Estático (Avançado). Se você não visualizar esta opção, verifique se tem a extensão do Azure Functions para Visual Studio Code.

    Captura de tela do Visual Studio Code, com o gerenciador de Aplicativos Web Estáticos do Azure mostrando a opção de criar um aplicativo Web estático avançado.

  4. Caso visualize uma janela de item pop-up no Visual Studio Code perguntando de qual branch deseja implantar, selecione o branch padrão, geralmente o principal.

    Essa configuração significa que somente as alterações que você confirma nessa ramificação são implantadas em seu aplicativo Web estático.

  5. Se você vir uma janela pop-up solicitando a confirmação das alterações, não faça isso. Os segredos da etapa de importação em massa não devem ser confirmados no repositório.

    Para reverter as alterações: no Visual Studio Code selecione o ícone Controle de Origem na barra de atividades. Em seguida, selecione cada arquivo alterado na lista Alterações e selecione o ícone Descartar alterações.

  6. Siga as solicitações para criar o aplicativo Web estático:

    Prompt Digite
    Selecione um grupo de recursos para novos recursos. Use o grupo de recursos criado para este tutorial.
    Insira o nome para o novo Aplicativo Web Estático. Crie um nome exclusivo para seu recurso. Por exemplo, você pode colocar seu nome antes do nome do repositório, como, my-demo-static-web-app.
    Selecionar um SKU Selecione o SKU gratuito para este tutorial.
    Selecione uma localização para novos recursos. Para Node.js: selecione West US 2 durante a versão preliminar do modelo de programação (PM) do Azure Functions v4. Para C# e Python, selecione uma região perto de você.
    Escolha a predefinição de build para configurar a estrutura de projeto padrão. selecione Personalizado.
    Selecione o local do código do aplicativo cliente search-website-functions-v4/client

    Esse é o caminho, da raiz do repositório, para seu aplicativo Web estático.
    Selecione a localização do código do Azure Functions search-website-functions-v4/api

    Esse é o caminho, da raiz do repositório, para seu aplicativo Web estático. Se não houver outras funções no repositório, não será solicitado o local do código da função. Atualmente, você precisará executar etapas extras para garantir que o local do código de função esteja correto. Estas etapas são executadas após a criação do recurso e estão documentadas neste artigo.
    Inserir o caminho da saída do build... build

    Esse é o caminho do aplicativo Web estático para os arquivos gerados.

    Se receber um erro sobre uma região incorreta, certifique-se de que o grupo de recursos e o recurso do aplicativo Web estático estejam numa das regiões com suporte listadas na resposta de erro.

  7. Quando o aplicativo Web estático é criado, um arquivo YML de fluxo de trabalho do GitHub também é criado localmente e no GitHub em sua bifurcação. Esse fluxo de trabalho é executado em sua bifurcação, criando e implantando o aplicativo Web estático e as funções.

    Verifique o status da implantação do aplicativo Web estático usando qualquer uma destas abordagens:

    • Selecione abrir Ações no GitHub nas Notificações. Isso abrirá uma janela do navegador apontada para seu repositório com fork.

    • Selecione a guia Ações no repositório bifurcado. Você deverá visualizar uma lista de todos os fluxos de trabalho em sua bifurcação.

    • Selecione Azure: Log de atividades no Visual Code. Deve ser exibida uma mensagem semelhante à imagem a seguir.

      Captura de tela do Log de Atividades no Visual Studio Code.

  8. Atualmente, o arquivo YML é criado com sintaxe de caminho errônea para o código de função do Azure. Use essa solução alternativa para corrigir a sintaxe e executar novamente o fluxo de trabalho. Execute esta etapa assim que o arquivo YML for criado. Um novo fluxo de trabalho será iniciado assim que você efetuar push das atualizações:

    1. No explorador do Visual Studio Code, abra o diretório ./.github/workflows/.

    2. Abra o arquivo YML.

    3. Role até o caminho api-location (na linha 31 ou próximo a ela).

    4. Altere a sintaxe do caminho para usar uma barra (apenas api_location precisa de edição, outros locais estão aqui para contexto):

      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. Salve o arquivo.

    6. Abra um terminal integrado e emita os seguintes comandos do GitHub para enviar o YML atualizado para sua bifurcação:

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

    Captura de tela dos comandos do GitHub no Visual Studio Code.

    Aguarde até que a execução do fluxo de trabalho seja concluída antes de continuar. Isso poderá levar alguns minutos para ser concluído.

Obter a chave de consulta do Azure AI Search no Visual Studio Code

  1. No Visual Studio Code, abra uma janela de terminal.

  2. Obtenha a chave API de consulta com este comando da CLI do Azure:

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

  3. Guarde esta chave de consulta para usar na próxima seção. A chave de consulta autoriza o acesso de leitura a um índice de pesquisa.

Adicionar variáveis de ambiente no portal do Azure

O aplicativo de funções do Azure não retornará dados de pesquisa até que os segredos da Pesquisa estejam nas configurações.

  1. Selecione Azure na barra de atividades.

  2. Clique com o botão direito do mouse no recurso de Aplicativos Web Estáticos e selecione Abrir no Portal.

    Captura de tela de Visual Studio Code exibindo o gerenciados de Aplicativos Web Estáticos do Azure com a opção Abrir no Portal exibida.

  3. Selecione Variáveis de ambiente e, depois, selecione + Adicionar configuração do aplicativo.

    Captura de tela da página de variáveis de ambiente do aplicativo Web estático no portal do Azure.

  4. Adicione cada uma das seguintes configurações:

    Configuração O valor do recurso de Pesquisa
    SearchApiKey Sua chave de consulta de pesquisa
    SearchServiceName Seu nome de recurso de pesquisa
    SearchIndexName good-books
    SearchFacets authors*,language_code

    O Azure AI Search exige uma sintaxe diferente para filtrar coleções daquela usada para cadeias de caracteres. Adicione um * após um nome de campo para indicar que o campo é do tipo Collection(Edm.String). Isso permite que a função do Azure adicione filtros corretamente às consultas.

  5. Verifique suas configurações para ter certeza de que elas se parecem com a captura de tela a seguir.

    Captura de tela do navegador mostrando o portal do Azure com o botão para salvar as configurações do seu aplicativo.

  6. Retorne ao Visual Studio Code.

  7. Atualize o aplicativo Web estático para visualizar as configurações e funções do aplicativo.

    Captura de tela de Visual Studio Code exibindo o gerenciados de Aplicativos Web Estáticos do Azure com a nova configuração de aplicativo.

Se você não vir as configurações do aplicativo, reveja as etapas para atualizar e relançar o fluxo de trabalho do GitHub.

Usar a pesquisa no seu Aplicativo Web Estático

  1. No Visual Studio Code, abra a Barra de atividades e selecione o ícone do Azure.

  2. Na barra lateral, clique com o botão direito do mouse na sua assinatura do Azure na área Static Web Apps e localize o aplicativo Web estático criado para este tutorial.

  3. Clique com o botão direito do mouse no nome do aplicativo Web estático e selecione Procurar no site.

    Captura de tela do Visual Studio Code exibindo o gerenciador de Aplicativos Web Estáticos do Azure mostrando a opção **Procurar site**.

  4. Selecione Abrir na caixa de diálogo pop-up.

  5. Na barra de pesquisa do site, insira uma consulta de pesquisa como code para que o recurso de sugestão sugira títulos de livros. Selecione uma sugestão ou continue inserindo sua consulta. Clique em ENTER quando concluir a consulta de pesquisa.

  6. Examine os resultados e escolha um dos livros para ver mais detalhes.

Solução de problemas

Se o aplicativo Web não tiver sido implantado ou não funcionar, use a lista a seguir para identificar e corrigir o problema:

  • A implantação foi bem-sucedida?

    Para determinar se a implantação foi bem-sucedida, você precisa acessar seu fork do repositório de exemplo e examinar o êxito ou a falha da ação do GitHub. Deve haver apenas uma ação e ela deve ter configurações estáticas de aplicativo Web para app_location, api_location e output_location. Se a ação não tiver sido implantada com êxito, aprofunde-se nos logs de ação e procure a última falha.

  • O aplicativo cliente (front-end) funciona?

    Você deve ser capaz de acessar seu aplicativo Web e ele deve ser exibido com êxito. Se a implantação tiver sido bem-sucedida, mas o site não for exibido, isso poderá ser um problema com a forma como o aplicativo Web estático é configurado para recompilar o aplicativo, uma vez que ele está no Azure.

  • O aplicativo de API (back-end sem servidor) funciona?

    Você deve poder interagir com o aplicativo cliente, procurando por livros e filtragem. Se o formulário não retornar nenhum valor, abra as ferramentas de desenvolvedor do navegador e determine se as chamadas HTTP para a API foram bem-sucedidas. Se as chamadas não foram bem-sucedidas, o motivo mais provável se as configurações de aplicativo Web estático para o nome do ponto de extremidade da API e a chave de consulta de pesquisa estiverem incorretas.

    Se o caminho para o código de função do Azure (api_location) não estiver correto no arquivo YML, o aplicativo será carregado, mas não chamará nenhuma das funções que fornecem integração com a Azure AI Search. Revisite a solução alternativa na seção de implantação para obter ajuda com a correção do caminho.

Limpar os recursos

Para limpar os recursos criados neste tutorial, exclua o grupo de recursos.

  1. No Visual Studio Code, abra a Barra de atividades e selecione o ícone do Azure.

  2. Na barra lateral, clique com o botão direito do mouse na sua assinatura do Azure na área Resource Groups e localize o grupo de recursos criado para este tutorial.

  3. Clique com o botão direito do mouse no nome do grupo de recursos e selecione Excluir. Isso exclui os recursos dos Aplicativos Web Estáticos e da Pesquisa.

  4. Se não quiser mais o fork do GitHub do exemplo, lembre-se de excluí-lo no GitHub. Acesse as Configurações do fork e exclua-o.

Próximas etapas