React + Vite criados com IA: publicar uma SPA com Nginx, SSL e domínio

Publicado em 2026-10-27 por frfrand

Como implantar React Vite desde Lovable ou Bolt: npm ci, build dist, try_files Nginx, HTTPS, variáveis e erros 404.

Seu app precisa do Node.js rodando sempre?

Não se for realmente uma SPA de React/Vite sem funções de servidor. Nesse caso, o build gera arquivos HTML, CSS e JavaScript que podem ser servidos pelo Nginx. Isso reduz a complexidade para muitas demos criadas com ferramentas de IA. Mas não confunda uma SPA com TanStack Start ou Next.js SSR, que podem exigir runtime de servidor.

Do código ao build reprodutível

Procure os scripts no package.json e o lockfile. Um fluxo habitual, se corresponder ao seu repo, utiliza npm ci e npm run build. Isso cria dist/. Se o app usa React Router com URLs como /minha-conta/pedidos, o servidor deve devolver index.html em rotas do frontend não encontradas como arquivo. Se faltar essa regra, navegar a partir do início pode funcionar, mas atualizar uma rota profunda provoca 404.

Configuração ilustrativa do Nginx

location / {
    try_files $uri $uri/ /index.html;
}

Exemplo: landing e área do cliente

Uma empresa criou uma landing no Lovable antigo e uma seção /panel. O arquivo dist/index.html carrega, mas /panel dá 404 quando o usuário volta de um email. Configura as rotas SPA, revisa conexões à API e CORS, adiciona SSL e testa as mesmas URLs no celular. Garanta que as variáveis públicas não incluam chaves de pagamento nem senhas SQL.

Passos de verificação

1. Confirme que seja um SPA React/Vite e não uma stack com runtime de servidor. 2. Instale as dependências de acordo com o lockfile e execute um build limpo. 3. Implante o conteúdo de dist no diretório Nginx correto. 4. Configure fallback SPA, HTTPS e cache de assets. 5. Teste recarga de rotas, formulários e chamadas de API. 6. Publique por meio de um processo reversível e monitore 404.

Perguntas frequentes

### Deve-se usar npm run dev em produção? Não: deve-se publicar a build, salvo arquiteturas específicas diferentes. ### Posso fazer isso sem Docker? Sim, o Nginx pode servir arquivos estáticos diretamente. ### Onde fica a senha do PostgreSQL? No lado do servidor, nunca em um frontend baixável. ### O que acontece se o projeto usar TanStack Start? É necessário hospedar também sua parte de servidor.

Fontes

Vite Production Build · Nginx · Lovable Deployment.

Onde se encaixa o ArduMaker

O VPS ou os serviços do ArduMaker podem ser o destino do código exportado, se a arquitetura permitir, junto com domínio, HTTPS e processos de operação. Mas migrar o app não corrige automaticamente seus bugs, permissões nem o design de dados. Em ardumaker.com/lovable (em breve) será apresentado o serviço especializado para migrar código gerado por IA e convertê-lo em uma aplicação implantada com revisão técnica. A página ainda não foi criada: para informações atualizadas, consulte ArduMaker.

Revisão: outubro de 2026. Cada plataforma e suas modalidades de exportação mudam. Valide fontes oficiais e trabalhe em staging com dados de teste.

O que a fotografia mostra

Profissionais revisando uma interface web e seu código. Fotografia ilustrativa gerada para este artigo sobre levar código criado com IA para um aplicativo de produção; não é uma captura oficial da ferramenta nem demonstra uma implementação específica.

Leituras relacionadas da ArduMaker

- Passar uma web de Lovable para um VPS: Nginx, SSL e um domínio profissional - Desplegar Next.js criado com IA em um VPS: SSR, API Routes e Node.js - Migrar o domínio de Lovable sem perder SEO nem interromper um aplicativo

Escolha entre manter serviços gerenciados ou migrar para infraestrutura própria com base em testes e requisitos, não em promessas de um clique.