Como Configurar um VPS para Hospedar Aplicações React e Vite com Alta Performance

A combinação de React com Vite se tornou uma das mais populares para desenvolvimento front-end moderno, graças à velocidade de compilação e facilidade de uso. No entanto, ao migrar essas aplicações para produção, muitos desenvolvedores enfrentam dificuldades ao configurar corretamente um VPS (Virtual Private Server).

Este guia detalha como preparar e otimizar um servidor virtual para hospedar aplicações React + Vite de forma eficiente e segura.

Requisitos Mínimos Recomendados para o VPS

Para garantir que sua aplicação funcione sem problemas, recomenda-se ao menos:

• Sistema operacional: Ubuntu 20.04 LTS ou superior
• Memória RAM: mínimo de 1 GB (recomenda-se 2 GB)
• Armazenamento: 25 GB de SSD
• Processador: 1 vCPU
• Acesso SSH liberado

Esses recursos são suficientes para rodar aplicações estáticas geradas pelo Vite com desempenho adequado.

Recomendo servidores da Unesty por exemplo, que está rodando este blog agora.

Configuração Inicial do Servidor

Conecte-se ao seu VPS via SSH:

ssh root@seu-ip-do-vps

Atualize os pacotes do sistema:

apt update && apt upgrade -y

Instale ferramentas básicas:

apt install curl wget git unzip -y

Instale o Node.js:

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

Verifique as instalações:

node -v
npm -v

Instale e Configure o Servidor Web Nginx

O Vite gera arquivos estáticos, que precisam ser servidos por um servidor web. O Nginx é uma escolha ideal por sua leveza e performance.

Instale o Nginx:

apt install nginx -y

Inicie e habilite o serviço:

systemctl start nginx
systemctl enable nginx

Gere os Arquivos de Produção no Ambiente Local

No ambiente de desenvolvimento:

npm run build

Esse comando gera uma pasta chamada dist/, contendo os arquivos prontos para produção.

Compacte os arquivos:

zip -r dist.zip dist/

Envie os arquivos para o VPS:

scp dist.zip root@seu-ip-do-vps:/root/

Descompacte no VPS:

unzip dist.zip

Substitua o conteúdo padrão do Nginx:

rm -rf /var/www/html/*
cp -r dist/* /var/www/html/

Configure o Nginx para Servir Sua Aplicação React

Edite o arquivo de configuração do Nginx:

nano /etc/nginx/sites-available/default

Cole a seguinte configuração:

server {
    listen 80;
    server_name seu-dominio-ou-ip;

    location / {
        root /var/www/html;
        index index.html;
        try_files $uri $uri/ =404;
    }
}

Reinicie o Nginx:

systemctl restart nginx

Agora você pode acessar sua aplicação pelo IP ou domínio configurado.

Adicione Segurança com Certificado SSL

Instale o Certbot:

apt install certbot python3-certbot-nginx -y

Gere o certificado:

certbot --nginx -d seu.dominio.com.br

O Certbot ajustará automaticamente a configuração do Nginx para HTTPS.

Otimizações para Melhor Desempenho e Velocidade

Configure headers de cache no Nginx para melhorar o tempo de carregamento:

location ~ \.css$ {
    expires 1y;
}

location ~ \.js$ {
    expires 1y;
}

location ~ \.(png|jpe?g|gif|svg|ico)$ {
    expires 1y;
}

Habilite a compressão GZIP no arquivo /etc/nginx/nginx.conf:

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

Considere integrar com uma CDN como Cloudflare para reduzir latência global e proteger contra ataques.

Considerações Finais

Configurar um VPS para hospedar aplicações React e Vite é um processo direto e eficiente quando feito com atenção aos detalhes. Ao seguir este guia, você garante que sua aplicação seja executada com alta disponibilidade, segurança e desempenho otimizado — fatores essenciais tanto para experiência do usuário quanto para posicionamento nos motores de busca como o Google.

Se desejar automatizar deploys futuros, considere integrar pipelines de CI/CD com GitHub Actions ou ferramentas semelhantes.