Compartilhar via

Implantar sites do Nuxt 3 com renderização universal em 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 dá suporte à 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 GitHub Action dos Aplicativos Web Estáticos ou no Azure Pipelines, o Nuxt 3 o converte automaticamente em ativos estáticos e em um aplicativo do Azure Functions compatível com os Aplicativos Web Estáticos do Azure.

Pré-requisitos

Configurar um aplicativo 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 do 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 em seu computador. <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 de Nuxt.js clonado recentemente:

    cd nuxt-3-starter

  5. Instale as 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ê deverá ver o seguinte site aberto no seu navegador preferido. Selecione os botões para invocar o servidor e as rotas de API.

Iniciar Nuxt.js aplicativo

Implantar seu site do 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 no GitHub.

Criar um recurso de Aplicativos Web Estáticos do Azure

  1. Navegue no portal Azure.

  2. Selecione Criar um Recurso.

  3. Pesquise aplicativos Web estáticos.

  4. Selecione Aplicativos Web Estáticos.

  5. Selecione Criar.

  6. Na guia Básico, insira os valores a seguir.

    Propriedade Value
    Subscription Seu nome da assinatura do Azure.
    Grupo de recursos my-nuxtjs-group
    Nome my-nuxt3-app
    Tipo de plano Gratuito
    Região da API do Azure Functions e dos ambientes de preparo Selecione a região mais próxima de você.
    Fonte GitHub

  7. Selecione Entrar com o GitHub e faça a autenticação no GitHub.

  8. Insira os valores do GitHub a seguir.

    Propriedade Value
    Organização Selecione a organização do GitHub desejada.
    Repositório Selecione o repositório que você criou anteriormente.
    Branch Selecione main.

  9. Na seção Detalhes do Build, selecione Personalizado no menu suspenso Predefinições de Build e mantenha os valores padrão.

  10. Na localização do aplicativo, insira/ na caixa.

  11. No local da API, insira .output/server na caixa.

  12. No local de saída, insira .output/public na caixa.

Revisar e criar

  1. Selecione Examinar + Criar para verificar se todos 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. Assim que a implantação for concluída, selecione Ir para o recurso.

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

Se o site não for carregado imediatamente, o fluxo de trabalho do GitHub Actions em segundo plano ainda estará em execução. Depois que o fluxo de trabalho for concluído, você poderá atualizar o navegador para exibir seu aplicativo Web.

Você pode verificar o status dos fluxos de trabalho do Actions navegando até o 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 do GitHub Actions em seu repositório. Retorne ao terminal e execute o comando a seguir para puxar o commit que contém o novo arquivo.

git pull

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

Para obter mais informações, consulte a documentação sobre a configuração de implantação do Nuxt 3 nos Aplicativos Web Estáticos do Azure.

Configurar um domínio personalizado

  • Last updated on