Partilhar via

Implantar sites Nuxt 3 com renderização universal nos Aplicativos Web Estáticos do Azure

Neste tutorial, você aprenderá a implantar um aplicativo Nuxt 3 nos Aplicativos Web Estáticos do Azure. O Nuxt 3 suporta renderização universal (do lado do cliente e do lado do servidor), incluindo rotas de servidor e API. Sem configuração extra, você pode implantar aplicativos Nuxt 3 com renderização universal nos Aplicativos Web Estáticos do Azure. Quando o aplicativo é criado na tarefa Static Web Apps GitHub Action ou Azure Pipelines, o Nuxt 3 o converte automaticamente em ativos estáticos e um aplicativo do Azure Functions que são compatíveis com os Aplicativos Web Estáticos do Azure.

Pré-requisitos

Configurar uma aplicação Nuxt 3

Você pode configurar um novo projeto Nuxt usando npx nuxi init nuxt-app. Em vez de usar um novo projeto, este tutorial usa um repositório existente configurado para demonstrar como implantar um site Nuxt 3 com renderização universal em Aplicativos Web Estáticos do Azure.

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

  2. Nomeie o repositório nuxt-3-starter.

  3. Em seguida, clone o novo repositório para sua máquina. Certifique-se de substituir <YOUR_GITHUB_ACCOUNT_NAME pelo nome da> sua conta.

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

  4. Navegue até o aplicativo Nuxt.js recém-clonado:

    cd nuxt-3-starter

  5. Instalar dependências:

    npm install

  6. Inicie o aplicativo Nuxt.js em desenvolvimento.

    npm run dev -- -o

Navegue até http://localhost:3000 para abrir o aplicativo, onde você verá o seguinte site aberto em seu navegador preferido. Selecione os botões para invocar rotas de servidor e API.

Iniciar Nuxt.js aplicação

Implante seu site Nuxt 3

As etapas a seguir mostram como criar um recurso de Aplicativos Web Estáticos do Azure e configurá-lo para implantar seu aplicativo a partir do GitHub.

Criar um recurso de Aplicativos Web Estáticos do Azure

  1. Navegue até o portal do Azure.

  2. Selecione Criar um recurso.

  3. Pesquise por aplicativos Web estáticos.

  4. Selecione Static Web Apps.

  5. Selecione Criar.

  6. Na guia Noções básicas, insira os seguintes valores.

    Propriedade Valor
    Subscription Seu nome de assinatura do Azure.
    Grupo de recursos my-nuxtjs-group
    Nome my-nuxt3-app
    Tipo de plano Gratuito
    Região para API do Azure Functions e ambientes de preparo Selecione a região mais próxima de si.
    Source GitHub

  7. Selecione Entrar com o GitHub e autentique-se com o GitHub.

  8. Insira os seguintes valores do GitHub.

    Propriedade Valor
    Organização Selecione sua organização desejada no GitHub.
    Repositório Selecione o repositório criado anteriormente.
    Filial Selecione principal.

  9. Na seção Detalhes da compilação , selecione Personalizar na lista suspensa Predefinições de compilação e mantenha os valores padrão.

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

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

  12. No Local de saída, digite .output/public na caixa.

Revisar e criar

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

  2. Selecione Criar para iniciar a criação do aplicativo Web estático e provisionar um GitHub Actions para implantação.

  3. Quando a implantação for concluída, selecione Ir para o recurso.

  4. Na janela Visão geral , selecione o link URL para abrir o aplicativo implantado.

Se o site não carregar imediatamente, o fluxo de trabalho de Ações do GitHub em segundo plano ainda estará em execução. Quando o fluxo de trabalho estiver concluído, você poderá atualizar o navegador para exibir seu aplicativo Web.

Você pode verificar o status dos workflows do Actions navegando à seção de Actions do seu repositório.

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

Sincronizar alterações

Quando você criou o aplicativo, os Aplicativos Web Estáticos do Azure criaram um arquivo de fluxo de trabalho de Ações do GitHub em seu repositório. Retorne ao terminal e execute o seguinte comando para puxar a confirmação que contém o novo arquivo.

git pull

Faça alterações no aplicativo atualizando o código e enviando-o para o GitHub. O GitHub Actions cria e implanta automaticamente o aplicativo.

Para obter mais informações, consulte a documentação da predefinição de implantação do Azure Static Web Apps Nuxt 3.

Configurar um domínio personalizado

  • Last updated on