Uma aplicação Nuxt pode ser implantada em um servidor Node.js, pré-renderizada para hospedagem estática, ou implantada em ambientes serverless ou edge (CDN).

Servidor Node.js

Descubra o preset de servidor Node.js com Nitro para implantar em qualquer hospedagem Node.

• Formato de saída padrão se nenhum for especificado ou auto-detectado
  
• Carrega apenas os chunks necessários para renderizar a solicitação para um tempo de início a frio ideal
  
• Útil para implantar aplicativos Nuxt em qualquer hospedagem Node.js

Ponto de Entrada

Ao executar nuxt build com o preset de servidor Node, o resultado será um ponto de entrada que lança um servidor Node pronto para execução.

node .output/server/index.mjs

Isso lançará seu servidor Nuxt de produção que escuta na porta 3000 por padrão.

Ele respeita as seguintes variáveis de ambiente de tempo de execução:

• NITRO_PORT ou PORT (padrão é 3000)
• NITRO_HOST ou HOST (padrão é '0.0.0.0')
• NITRO_SSL_CERT e NITRO_SSL_KEY - se ambos estiverem presentes, isso lançará o servidor em modo HTTPS. Na grande maioria dos casos, isso não deve ser usado além de testes, e o servidor Nitro deve ser executado atrás de um proxy reverso como nginx ou Cloudflare que termina o SSL.

PM2

PM2 (Process Manager 2) é uma solução rápida e fácil para hospedar sua aplicação Nuxt em seu servidor ou VM.

Para usar pm2, use um ecosystem.config.cjs:

module.exports = {
  apps: [
    {
      name: 'NuxtAppName',
      port: '3000',
      exec_mode: 'cluster',
      instances: 'max',
      script: './.output/server/index.mjs'
    }
  ]
}

Modo Cluster

Você pode usar NITRO_PRESET=node_cluster para aproveitar o desempenho de múltiplos processos usando o módulo cluster do Node.js.

Por padrão, a carga de trabalho é distribuída para os trabalhadores com a estratégia round robin.

Saiba Mais

Hospedagem Estática

Existem duas maneiras de implantar uma aplicação Nuxt em qualquer serviço de hospedagem estática:

• Geração de site estático (SSG) com ssr: true pré-renderiza as rotas da sua aplicação no momento da construção. (Este é o comportamento padrão ao executar nuxt generate.) Ele também gerará páginas de fallback de aplicativo de página única /200.html e /404.html, que podem renderizar rotas dinâmicas ou erros 404 no cliente (embora você possa precisar configurar isso no seu host estático).
• Alternativamente, você pode pré-renderizar seu site com ssr: false (aplicativo de página única estática). Isso produzirá páginas HTML com um <div id="__nuxt"></div> vazio onde seu aplicativo Vue normalmente seria renderizado. Você perderá muitos benefícios de SEO ao pré-renderizar seu site, então é sugerido em vez disso usar <ClientOnly> para envolver as partes do seu site que não podem ser renderizadas no servidor (se houver).

Renderização Apenas no Lado do Cliente

Se você não quiser pré-renderizar suas rotas, outra maneira de usar hospedagem estática é definir a propriedade ssr como false no arquivo nuxt.config. O comando nuxt generate então produzirá um ponto de entrada .output/public/index.html e pacotes JavaScript como uma aplicação Vue.js clássica do lado do cliente.

export default defineNuxtConfig({
  ssr: false
})

Provedores de Hospedagem

O Nuxt pode ser implantado em vários provedores de nuvem com uma quantidade mínima de configuração:

Presets

Além de servidores Node.js e serviços de hospedagem estática, um projeto Nuxt pode ser implantado com vários presets bem testados e uma quantidade mínima de configuração.

Você pode definir explicitamente o preset desejado no arquivo nuxt.config.ts:

export default defineNuxtConfig({
  nitro: {
    preset: 'node-server'
  }
})

... ou usar a variável de ambiente NITRO_PRESET ao executar nuxt build:

NITRO_PRESET=node-server nuxt build

🔎 Verifique a implantação do Nitro para todos os possíveis presets e provedores de implantação.

Proxy CDN

Na maioria dos casos, o Nuxt pode trabalhar com conteúdo de terceiros que não é gerado ou criado pelo próprio Nuxt. Mas às vezes esse conteúdo pode causar problemas, especialmente as "Opções de Minificação e Segurança" do Cloudflare.

Portanto, você deve garantir que as seguintes opções estejam desmarcadas / desativadas no Cloudflare. Caso contrário, re-renderizações desnecessárias ou erros de hidratação podem impactar sua aplicação de produção.

1. Velocidade > Otimização > Otimização de Conteúdo > Desativar "Rocket Loader™"
2. Velocidade > Otimização > Otimização de Imagem > Desativar "Mirage"
3. Scrape Shield > Desativar "Ofuscação de Endereço de E-mail"

Com essas configurações, você pode ter certeza de que o Cloudflare não injetará scripts em sua aplicação Nuxt que possam causar efeitos colaterais indesejados.