Implante sites Nuxt 3 com renderização universal em aplicativos Web estáticos do Azure

  • Artigo

Neste tutorial, você aprenderá a implantar um aplicativo Nuxt 3 em aplicativos Web estáticos do Azure. O Nuxt 3 oferece suporte a 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 para aplicativos Web estáticos do Azure. Quando o aplicativo é criado na Ação do GitHub de Aplicativos Web Estáticos ou na tarefa do Azure Pipelines, o Nuxt 3 o converte automaticamente em ativos estáticos e 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 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 novo aplicativo Nuxt.js clonado:

    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 em seu navegador preferido. Selecione os botões para invocar o servidor e as rotas de API.

Iniciar aplicativo Nuxt.js

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 do GitHub.

Criar um recurso dos Aplicativos Web Estáticos do Azure

  1. Navegue até o Portal do 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 Valor
    Assinatura 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ê.
    Origem GitHub

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

  8. Insira os valores do GitHub a seguir.

    Propriedade Valor
    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 Local do aplicativo, insira / na caixa.

  11. No Local da API, digite .output/server na caixa.

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

Examinar 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 provisione um GitHub Actions para a 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 carregar imediatamente, então o fluxo de trabalho do GitHub Actions ainda está em execução em segundo plano. Depois que o fluxo de trabalho for concluído, você poderá atualizar o navegador e 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 as alterações

Quando você criou o aplicativo, o serviço Aplicativos Web Estáticos do Azure criou um arquivo de fluxo de trabalho do GitHub Actions em seu repositório. Retorne ao terminal e execute o seguinte comando para extrair o commit 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 predefinida de implantação do Nuxt 3 dos Aplicativos Web Estáticos do Azure.

Configurar um domínio personalizado