Partilhar via

3 - Implantar o site habilitado para pesquisa

  • Artigo

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

O aplicativo Web estático extrai as informações e os arquivos para implantação do GitHub usando sua bifurcação 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 bulk-insert (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 vir essa opção, verifique se você tem a extensão Azure Functions para Visual Studio Code.

    Captura de ecrã do Visual Studio Code, com o explorador de Aplicações Web Estáticas do Azure a mostrar a opção para criar uma aplicação Web estática avançada.

  4. Se você vir uma janela pop-up no Visual Studio Code perguntando de qual ramificação você deseja implantar, selecione a ramificação padrão, geralmente principal.

    Essa configuração significa que apenas as alterações confirmadas nessa ramificação são implantadas em seu aplicativo Web estático.

  5. Se vir uma janela pop-up a pedir-lhe para confirmar as alterações, não o faça. 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 do código-fonte na barra de atividades, selecione cada arquivo alterado na lista Alterações e selecione o ícone Descartar alterações .

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

    Pedido Enter
    Selecione um grupo de recursos para novos recursos. Use o grupo de recursos criado para este tutorial.
    Insira o nome do novo aplicativo Web estático. Crie um nome exclusivo para o seu recurso. Por exemplo, você pode anexar seu nome ao nome do repositório, my-demo-static-web-appcomo .
    Selecionar um SKU Selecione o SKU gratuito para este tutorial.
    Selecione um local para novos recursos. Para Node.js: Selecione West US 2 durante a visualização do modelo de programação de função (PM) v4 do Azure. Para C# e Python, selecione uma região perto de você.
    Escolha a predefinição de compilação para configurar a estrutura padrão do projeto. Selecione Personalizado.
    Selecione o local do código do aplicativo cliente search-website-functions-v4/client

    Este é o caminho, desde a raiz do repositório, até o seu aplicativo Web estático.
    Selecione o local do seu código do Azure Functions search-website-functions-v4/api

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

    Este é o caminho, do seu aplicativo Web estático para os arquivos gerados.

    Se você receber um erro sobre uma região incorreta, verifique se o grupo de recursos e o recurso de aplicativo Web estático estão em uma 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 abre uma janela do navegador apontada para o seu repositório bifurcado.

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

    • Selecione Azure : Activity Log no Visual Code. Você verá uma mensagem semelhante à captura de tela a seguir.

      Captura de tela do log de atividades no Visual Studio Code.

  8. Atualmente, o arquivo YML é criado com sintaxe de caminho incorreta para o código de função do Azure. Use esta solução alternativa para corrigir a sintaxe e executar novamente o fluxo de trabalho. Você pode executar esta etapa assim que o arquivo YML for criado. Um novo fluxo de trabalho é iniciado assim que você envia as atualizações:

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

    2. Abra o arquivo YML.

    3. Desloque-se para o api-location caminho (na linha 31 ou perto dela).

    4. Altere a sintaxe do caminho para usar uma barra (só 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. Guarde o ficheiro.

    6. Abra um terminal integrado e emita os seguintes comandos do GitHub para enviar o YML atualizado para a 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 pode levar um ou dois minutos para terminar.

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

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

  2. Obtenha a chave da 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. Mantenha essa 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 Azure Function não retornará dados de pesquisa até que os segredos de pesquisa estejam nas configurações.

  1. Selecione Azure na Barra de atividades.

  2. Clique com o botão direito do mouse no recurso Static Web Apps e selecione Abrir no Portal.

    Captura de ecrã do Código do Visual Studio a mostrar o explorador de Aplicações Web Estáticas do Azure com a opção Abrir no Portal apresentada.

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

    Captura de ecrã da página de variáveis de ambiente da aplicação Web estática no portal do Azure.

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

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

    O Azure AI Search requer sintaxe diferente para filtrar coleções do que 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 as suas definições para se certificar de que se parecem com a seguinte captura de ecrã.

    Captura de ecrã do browser a mostrar o portal do Azure com o botão para guardar as definições da sua aplicação.

  6. Retorne ao Visual Studio Code.

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

    Captura de ecrã do Visual Studio Code a mostrar o explorador de Aplicações Web Estáticas do Azure com as novas definições da aplicação.

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

Utilizar a pesquisa na sua aplicação Web estática

  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 em sua assinatura do Azure na Static Web Apps área e localize o aplicativo Web estático que você criou para este tutorial.

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

    Captura de ecrã do Visual Studio Code a mostrar o explorador de Aplicações Web Estáticas do Azure a mostrar 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 , para codeque o recurso de sugestão sugira títulos de livros. Selecione uma sugestão ou continue a introduzir a sua própria consulta. Pressione enter quando tiver concluído a consulta de pesquisa.

  6. Reveja os resultados e, em seguida, selecione um dos livros para ver mais detalhes.

Resolução de Problemas

Se o aplicativo Web não foi implantado ou funcionou, use a lista a seguir para determinar e corrigir o problema:

  • A implantação foi bem-sucedida?

    Para determinar se sua implantação foi bem-sucedida, você precisa ir para a bifurcação do repositório de exemplo e revisar o sucesso ou a falha da ação do GitHub. Deve haver apenas uma ação e ela deve ter configurações estáticas do aplicativo Web para o app_location, api_location, e output_location. Se a ação não foi implantada com êxito, mergulhe 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 for bem-sucedida, mas o site não for exibido, isso pode ser um problema com a forma como o aplicativo Web estático é configurado para reconstruir o aplicativo, uma vez que ele está no Azure.

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

    Você deve ser capaz de interagir com o aplicativo cliente, procurando livros e filtrando. 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 do aplicativo Web estático para o nome do ponto de extremidade da API e a chave de consulta Pesquisar 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 o Azure AI Search. Revisite a solução alternativa na seção de implantação para obter ajuda com a correção do caminho.

Clean up resources (Limpar 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 rato na sua subscrição do Azure na Resource Groups área e localize o grupo de recursos que criou 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 de Pesquisa e Aplicativos Web estáticos.

  4. Se você não quiser mais a bifurcação do GitHub do exemplo, lembre-se de excluí-la no GitHub. Aceda às Definições da bifurcação e, em seguida, elimine a bifurcação.

Próximos passos

Explore o código de pesquisa JavaScript