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

Artigo
06/27/2023

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

Uma conta do Azure com uma assinatura ativa. Crie uma conta gratuitamente.
Uma conta do GitHub. Crie uma conta gratuitamente.
Node.js 16 ou posterior instalado.

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.

Navegue até http://github.com/staticwebdev/nuxt-3-starter/generate.
Nomeie o repositório nuxt-3-starter.
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
```
Navegue até o novo aplicativo Nuxt.js clonado:
```
cd nuxt-3-starter
```
Instale as dependências:
```
npm install
```
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

Navegue até o Portal do Azure.
Selecione Criar um recurso.
Pesquise Aplicativos Web Estáticos.
Selecione Aplicativos Web Estáticos.
Selecione Criar.

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

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

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.

Na seção Detalhes do Build, selecione Personalizado no menu suspenso Predefinições de Build e mantenha os valores padrão.
Na Local do aplicativo, insira / na caixa.
No Local da API, digite .output/server na caixa.
No Local de saída, digite .output/public na caixa.

Examinar e criar

Selecione Examinar + Criar para verificar se todos os detalhes estão corretos.
Selecione Criar para iniciar a criação do aplicativo Web estático e provisione um GitHub Actions para a implantação.
Assim que a implantação for concluída, selecione Ir para o recurso.
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

Compartilhar via