Implementar sites Nuxt 3 com composição universal no Aplicações Web Estáticas do Azure

  • Artigo

Neste tutorial, vai aprender a implementar uma aplicação Nuxt 3 para Aplicações Web Estáticas do Azure. O Nuxt 3 suporta composição universal (do lado do cliente e do lado do servidor), incluindo rotas de servidor e API. Sem configuração adicional, pode implementar aplicações Nuxt 3 com composição universal para Aplicações Web Estáticas do Azure. Quando a aplicação é incorporada na tarefa Aplicações Web Estáticas GitHub Action ou Azure Pipelines, o Nuxt 3 converte-a automaticamente em recursos estáticos e numa aplicação Funções do Azure compatível com Aplicações Web Estáticas do Azure.

Pré-requisitos

Configurar uma aplicação Nuxt 3

Pode configurar um novo projeto Nuxt com npx nuxi init nuxt-app. Em vez de utilizar um novo projeto, este tutorial utiliza um repositório existente configurado para demonstrar como implementar um site Nuxt 3 com composição universal no Aplicações Web Estáticas do Azure.

  1. Navegue para http://github.com/staticwebdev/nuxt-3-starter/generate.

  2. Atribua o nome nuxt-3-starter ao repositório.

  3. Em seguida, clone o novo repositório para o seu computador. Certifique-se de que substitui <YOUR_GITHUB_ACCOUNT_NAME> pelo nome da sua conta.

    git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxt-3-starter

  4. Navegue para a aplicação Nuxt.js recentemente clonada:

    cd nuxt-3-starter

  5. Instalar dependências:

    npm install

  6. Inicie Nuxt.js aplicação em desenvolvimento:

    npm run dev -- -o

Navegue para http://localhost:3000 abrir a aplicação, onde deverá ver o seguinte site aberto no seu browser preferido. Selecione os botões para invocar rotas de servidor e API.

Iniciar Nuxt.js aplicação

Implementar o seu site Nuxt 3

Os passos seguintes mostram como criar um recurso Aplicações Web Estáticas do Azure e configurá-lo para implementar a sua aplicação a partir do GitHub.

Criar um recurso Aplicações Web Estáticas do Azure

  1. Navegue para o portal do Azure.

  2. Selecione Criar um Recurso.

  3. Procure Aplicações Web Estáticas.

  4. Selecione Aplicações Web Estáticas.

  5. Selecione Criar.

  6. No separador Noções básicas , introduza os seguintes valores.

    Propriedade Valor
    Subscrição O nome da sua subscrição do Azure.
    Grupo de recursos my-nuxtjs-group
    Nome my-nuxt3-app
    Tipo de plano Gratuito
    Região para Funções do Azure API e ambientes de teste Selecione uma região mais próxima de si.
    Origem GitHub

  7. Selecione Iniciar sessão com o GitHub e autenticar com o GitHub.

  8. Introduza os seguintes valores do GitHub.

    Propriedade Valor
    Organização Selecione a organização do GitHub pretendida.
    Repositório Selecione o repositório que criou anteriormente.
    Ramo Selecione principal.

  9. Na secção Detalhes da Compilação , selecione Personalizar no menu pendente Criar Predefinições e mantenha os valores predefinidos.

  10. Na localização da aplicação, introduza / na caixa.

  11. Na localização da API, introduza .output/server na caixa.

  12. Na localização Saída, introduza .output/public na caixa.

Rever e criar

  1. Selecione Rever + Criar para verificar se os detalhes estão todos corretos.

  2. Selecione Criar para iniciar a criação da aplicação Web estática e aprovisionar um GitHub Actions para implementação.

  3. Assim que a implementação estiver concluída, selecione Ir para recurso.

  4. Na janela Descrição geral , selecione a ligação URL para abrir a aplicação implementada.

Se o site não carregar imediatamente, o fundo GitHub Actions fluxo de trabalho ainda está em execução. Assim que o fluxo de trabalho estiver concluído, pode atualizar o browser para ver a sua aplicação Web.

Pode verificar o estado dos fluxos de trabalho Ações ao navegar para as Ações do seu repositório:

https://github.com/<YOUR_GITHUB_USERNAME>/nuxt-3-starter/actions

Sincronizar alterações

Quando criou a aplicação, Aplicações Web Estáticas do Azure criou um ficheiro de fluxo de trabalho GitHub Actions no seu repositório. Regresse ao terminal e execute o seguinte comando para solicitar a consolidação que contém o novo ficheiro.

git pull

Faça alterações à aplicação ao atualizar o código e enviá-lo para o GitHub. GitHub Actions cria e implementa automaticamente a aplicação.

Para obter mais informações, veja a documentação predefinida de implementação do Aplicações Web Estáticas do Azure Nuxt 3.

Configurar um domínio personalizado