No universo do desenvolvimento web moderno, a facilidade de uso de ferramentas como o Google AI Studio democratizou a criação de aplicações baseadas em Inteligência Artificial. Com poucos cliques, você tem um protótipo funcional rodando. No entanto, quando chega o momento de levar essa aplicação para o mundo real — o famoso deployment —, muitos desenvolvedores se deparam com um dilema: usar plataformas automatizadas e caras como a Vercel ou optar por soluções de hospedagem compartilhada mais econômicas e robustas, como a Hostinger?
Este artigo é um mergulho profundo e técnico sobre como realizar o deploy de apps do Google AI Studio na Hostinger. Mas não faremos apenas o básico. Abordaremos o ponto crítico que a maioria dos tutoriais ignora e que foi destacado como essencial (especialmente a partir dos 4 minutos e 18 segundos do vídeo de referência): a segurança da sua API Key. Se você simplesmente subir seus arquivos JavaScript para uma hospedagem comum, sua chave de API ficará exposta para qualquer um roubar. Aqui, ensinaremos a arquitetura correta para evitar isso.
O Dilema do Deployment: Vercel vs. Hostinger
Antes de entrarmos no código, é crucial entender o “porquê”. Plataformas como Vercel ou Netlify são incríveis para projetos React ou Next.js porque abstraem a infraestrutura. O processo de build e deploy é automático. Contudo, essa conveniência tem um preço, que pode escalar rapidamente em projetos de IA com alto tráfego.
A Hostinger (ou qualquer hospedagem cPanel/VPS tradicional) oferece um custo fixo previsível e permite consolidar múltiplos projetos em um único plano. Para desenvolvedores brasileiros e freelancers, isso representa uma economia brutal a longo prazo. O desafio é que o processo deixa de ser automático: você precisa compilar (buildar) o projeto e gerenciar a segurança manualmente.
O Grande Risco de Segurança: Exposição da API Key no Frontend
Aqui reside o coração deste tutorial. Quando você desenvolve localmente no Google AI Studio ou usa o npm run dev, muitas vezes a API Key é chamada diretamente pelo navegador. Em um ambiente local seguro, isso é aceitável.
Porém, ao fazer o build de uma aplicação React (ou qualquer framework SPA) e subir os arquivos estáticos para a Hostinger, todo o seu código JavaScript é enviado para o navegador do usuário. Se a sua lógica de chamada à API do Gemini estiver no frontend, sua API Key estará visível no código-fonte ou na aba “Network” do inspecionador do navegador.
Isso permite que terceiros copiem sua chave e usem sua cota de requisições, podendo gerar custos inesperados ou bloquear seu serviço. A solução? Criar um Middleware ou um Proxy reverso. E na Hostinger, a maneira mais eficiente e nativa de fazer isso é usando PHP.
Pré-requisitos Técnicos
Para seguir este guia épico, você precisará de:
- Um projeto criado no Google AI Studio (exportado para código).
- Node.js instalado em sua máquina local.
- Uma conta de hospedagem na Hostinger (ou similar com suporte a PHP).
- Acesso ao Gerenciador de Arquivos ou FTP da hospedagem.
Passo 1: Preparando a Aplicação Localmente
O primeiro passo é garantir que seu projeto esteja pronto para produção. Diferente do ambiente de desenvolvimento, precisamos gerar os arquivos estáticos otimizados.
Compilando o Projeto
Abra seu terminal na pasta do projeto e execute:
npm run buildEste comando criará uma pasta chamada dist (ou build, dependendo do seu framework). Dentro dela, estarão os arquivos HTML, CSS e JavaScript minificados. Estes são os únicos arquivos que o navegador precisa para renderizar sua aplicação visualmente.
Passo 2: A Arquitetura de Segurança com Proxy PHP
Em vez de sua aplicação React chamar diretamente generativelanguage.googleapis.com, ela chamará um arquivo PHP no seu próprio servidor. Este arquivo PHP, que nunca tem seu código exposto ao navegador, será o responsável por inserir a API Key e repassar a requisição ao Google. É um “escudo” perfeito.
Criando o Endpoint PHP (O Segredo)
Crie um arquivo chamado api-proxy.php na raiz da sua pasta pública na Hostinger (geralmente public_html ou uma subpasta do projeto). O conteúdo deve ser algo similar a esta lógica:
<?php
// Configurações de CORS para permitir que seu front acesse este back
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");// Sua API Key fica segura aqui, no lado do servidor
$apiKey = “SUA_API_KEY_DO_GOOGLE_AQUI”;
// Recebe o corpo da requisição do frontend
$inputData = file_get_contents(“php://input”);
// Configura a chamada para a API do Google
$url = “https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=” . $apiKey;
// Inicia o cURL para fazer a requisição server-side
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $inputData);
curl_setopt($ch, CURLOPT_HTTPHEADER, array(‘Content-Type: application/json’));
$response = curl_exec($ch);
if(curl_errno($ch)){
echo json_encode([‘error’ => curl_error($ch)]);
} else {
// Retorna a resposta do Google para o seu frontend
echo $response;
}
curl_close($ch);
?>
Nota: Em um ambiente de produção real, recomenda-se restringir o Access-Control-Allow-Origin apenas para o seu domínio específico, em vez de *.
Passo 3: Refatorando o Frontend com IA
Agora você precisa alterar seu código JavaScript para parar de falar com o Google e começar a falar com seu novo arquivo PHP. Se você não é um expert em fetch/axios, pode usar a própria IA para isso.
Copie o conteúdo do seu arquivo de serviço (ex: GeminiService.ts ou api.js) e peça ao ChatGPT ou Claude:
“Reescreva este código para que, em vez de chamar a API do Google diretamente usando a chave, ele faça um POST para o endpoint relativo ‘./api-proxy.php’, repassando o mesmo corpo da requisição.”
A IA ajustará a URL de destino. Com isso, a lógica do seu app permanece a mesma, mas a rota dos dados muda para um caminho seguro.
Passo 4: Upload e Deploy na Hostinger
Com o código ajustado e o build refeito (lembre-se de rodar npm run build novamente após alterar o serviço):
- Acesse o Gerenciador de Arquivos da Hostinger.
- Navegue até a pasta
public_html.
- Faça o upload do arquivo
api-proxy.phpque criamos.
- Faça o upload de todo o conteúdo da pasta
dist(não a pasta em si, mas os arquivos dentro dela) para o mesmo diretório.
Ao final, você deve ter o index.html, seus arquivos .js, .css e o api-proxy.php convivendo na mesma pasta.
Verificação e Testes
Acesse seu domínio. A aplicação deve carregar visualmente. Tente usar a funcionalidade de IA. Se tudo estiver correto:
- A IA responderá normalmente.
- Ao abrir o DevTools (F12) > Network, você verá uma requisição para
api-proxy.php.
- Vitória: Se você inspecionar essa requisição, não verá a API Key do Google em lugar nenhum. Ela foi injetada silenciosamente pelo servidor PHP.
Solução de Problemas Comuns (Troubleshooting)
Tela Branca ou Erro 404
Geralmente causado por caminhos absolutos no index.html. Certifique-se de que no seu vite.config.js (se usar Vite) a base esteja configurada como './' para caminhos relativos, garantindo que o app funcione em qualquer subpasta.
Erro de Permissão no PHP
Verifique as permissões do arquivo api-proxy.php. O padrão seguro em servidores Linux é 644 para arquivos e 755 para pastas.
Conclusão
Publicar aplicações do Google AI Studio na Hostinger exige um passo a mais do que o simples “drag-and-drop” da Vercel, mas oferece controle total e segurança superior quando configurado corretamente. A técnica do Proxy PHP apresentada aqui é uma habilidade fundamental para qualquer desenvolvedor Full Stack, pois ensina como segregar responsabilidades e proteger credenciais sensíveis em ambientes serverless ou de hospedagem compartilhada.
Ao dominar esse fluxo, você não apenas economiza com infraestrutura, mas também entrega produtos profissionais e seguros, prontos para escalar sem medo de vazamento de dados. Agora, é hora de codar e fazer o deploy!