Cómo desplegar apps de Google AI Studio en tu VPS

Arquitectura ciberpunk 16:9 que conecta DATA → STORAGE → APPLICATIONS en un despliegue con Docker y PostgreSQL

Cuando descargas un proyecto desde Google AI Studio (Gemini Apps), lo que obtienes no es una app lista para producción, sino solo el frontend React generado por la IA.

Es un esqueleto visual con componentes, hooks y servicios… pero sin entorno de ejecución. Por eso, si lo subes tal cual a un servidor, verás “pantalla blanca” o errores de conexión con el backend. Veamos lo necesario para instalarlo en un VPS

Capas obligatorias

Backend o API

Google AI Studio no incluye servidor (Express, Flask, etc.) por eso, hay que crear un pequeño backend que haga de puente entre la web y la base de datos.

Mínimo que debe tener el backend:

  • server.cjs o server.js con Express.
  • Endpoints /health, /auth/login, /auth/register, /collection, /wishlist, etc.
  • Conexión a la base de datos (pg si usas PostgreSQL).
  • Un .env con las credenciales y claves de API.
  • Dockerfile que lo empaquete y exponga un puerto (4000 o 3000 normalmente).
  • Infraestructura base (entorno ejecutable)

AI Studio no empaqueta nada para producción. Necesitas crear manualmente estos archivos de entorno:

ArchivoPropósito
.envVariables de entorno (DB, claves, puerto, etc.)
DockerfileDefine cómo se construye la imagen del backend
.dockerignoreEvita subir basura como node_modules
package.jsonLista de dependencias (express, pg, jsonwebtoken, etc.)
(opcional) docker-compose.ymlPara levantar el backend junto a Postgres y Traefik

Google AI Studio usa por defecto almacenamiento local (localStorage o SQLite simulado). Para pasarla a producción necesitas conectarla a algo estable como PostgreSQL (lo ideal en VPS).

Elementos a subir para complementar el zip

/mi-proyecto-ai/
├── web/                  ← aquí descomprimes el ZIP de Google AI Studio
├── server.cjs            ← backend Express listo para usar
├── package.json          ← dependencias del backend
├── Dockerfile            ← build del contenedor Node
├── .dockerignore
├── .env
└── docker-compose.yml    ← (opcional) para API + Postgres + Traefik

.env

# --- CONFIGURACIÓN GENERAL ---
PORT=4000
NODE_ENV=production
# --- BASE DE DATOS POSTGRES ---
PGHOST=postgres
PGPORT=5432
PGDATABASE=main
PGUSER=user
PGPASSWORD=Password-seguro
# --- SEGURIDAD ---
JWT_SECRET=uoHGtt6p-pil886RnH

package.json

{
 "name": "google-ai-vps-ready",
  "version": "1.0.0",
  "main": "server.cjs",
  "type": "commonjs",
  "scripts": {
    "start": "node server.cjs"
  },
  "dependencies": {
    "express": "^4.19.2",
    "cors": "^2.8.5",
    "pg": "^8.12.0",
    "bcrypt": "^5.1.1",
    "jsonwebtoken": "^9.0.2"
  }
}

Dockerfile

FROM node:20-alpine
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install --omit=dev
COPY . .
ENV PORT=4000
EXPOSE 4000
CMD ["node", "server.cjs"]

.dockerignore

node_modules
.git
.env
*.log
.DS_Store

docker-compose.yml

(opcional, si no usas Traefik ni PostgreSQL externos)

version: '3.8'
services:
  api:
    build: .
    container_name: ai-studio-api
    env_file:
      - .env
    ports:
      - "4000:4000"
    depends_on:
      - postgres
    restart: unless-stopped
  postgres:
    image: postgres:16-alpine
    container_name: postgres
    environment:
      POSTGRES_USER: ${PGUSER}
      POSTGRES_PASSWORD: ${PGPASSWORD}
      POSTGRES_DB: ${PGDATABASE}
    volumes:
      - pgdata:/var/lib/postgresql/data
    restart: unless-stopped
volumes:
  pgdata:

server.cjs

const express = require('express');
const cors = require('cors');
const path = require('path');
const { Pool } = require('pg');
const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');
const app = express();
app.use(cors());
app.use(express.json());
const {
  PORT = 4000,
  PGHOST, PGPORT, PGDATABASE, PGUSER, PGPASSWORD,
  JWT_SECRET = 'devsecret'
} = process.env;
const pool = new Pool({
  host: PGHOST,
  port: PGPORT,
  database: PGDATABASE,
  user: PGUSER,
  password: PGPASSWORD,
  ssl: false
});
const ensureUsersTable = async () => {
  await pool.query(`
    CREATE EXTENSION IF NOT EXISTS "pgcrypto";
    CREATE TABLE IF NOT EXISTS users (
      id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
      email TEXT UNIQUE NOT NULL,
      password_hash TEXT NOT NULL,
      created_at TIMESTAMPTZ DEFAULT now()
    );
  `);
};
app.get('/health', (_req, res) => res.json({ status: 'ok' }));
app.post('/auth/register', async (req, res) => {
  const { email, password } = req.body || {};
  if (!email || !password) return res.status(400).json({ error: 'email y password requeridos' });
  try {
    const hash = await bcrypt.hash(password, 10);
    const { rows } = await pool.query(
      'INSERT INTO users(email, password_hash) VALUES ($1, $2) RETURNING id, email, created_at',
      [email, hash]
    );
    const user = rows[0];
    const token = jwt.sign({ sub: user.id, email: user.email }, JWT_SECRET, { expiresIn: '7d' });
    res.json({ token, user });
  } catch (e) {
    if (String(e.message).includes('duplicate key')) return res.status(409).json({ error: 'Usuario ya existe' });
    console.error(e);
    res.status(500).json({ error: 'internal_error' });
  }
});
app.post('/auth/login', async (req, res) => {
  const { email, password } = req.body || {};
  if (!email || !password) return res.status(400).json({ error: 'email y password requeridos' });
  try {
    const { rows } = await pool.query('SELECT id, email, password_hash FROM users WHERE email=$1', [email]);
    if (!rows.length) return res.status(401).json({ error: 'credenciales inválidas' });
    const ok = await bcrypt.compare(password, rows[0].password_hash);
    if (!ok) return res.status(401).json({ error: 'credenciales inválidas' });
    const token = jwt.sign({ sub: rows[0].id, email: rows[0].email }, JWT_SECRET, { expiresIn: '7d' });
    res.json({ token, user: rows[0] });
  } catch (e) {
    console.error(e);
    res.status(500).json({ error: 'internal_error' });
  }
});
const webPath = path.join(__dirname, 'web');
app.use(express.static(webPath));
app.get('*', (req, res) => res.sendFile(path.join(webPath, 'index.html')));
app.listen(PORT, async () => {
  await ensureUsersTable();
  console.log(`✅ Servidor AI Studio listo en puerto ${PORT}`);
});

Estructura genérica del proyecto

Crea esta estructura en ~/apps/AI-Studio-Base:

AI-Studio-Base/
├─ .env                     # variables (dominios y DB)
├─ docker-compose.yml       # orquestación Traefik + redes + servicios
├─ api/
│  ├─ Dockerfile
│  ├─ package.json
│  ├─ server.cjs
│  └─ db.sql               # migraciones mínimas
└─ web/
   ├─ Dockerfile
   └─ nginx.conf
   └─ (aquí descomprimes tu ZIP de Google AI Studio)

Cómo usar estos archivos

  • Crea la carpeta base:
mkdir ~/apps/ai-template
cd ~/apps/ai-template
  • Pega todos los archivos anteriores.
  • Dentro de web/, descomprime el ZIP que descargues desde Google AI Studio.
  • Ejecuta:
docker compose build
docker compose up -d
  • Abre en el navegador: https://api-tuapp.tudominio.es/health y https://api-tuapp.tudominio.es

Preguntas frecuentes: Apps con Google AI Studio en VPS

¿Por qué el ZIP de Google AI Studio no funciona “solo” en producción?
Contiene solo frontend React. Le falta un backend y el entorno ejecutable (Docker, variables, DB). Por eso se muestran errores o pantalla en blanco.
¿Qué backend mínimo necesito?
Un Express con server.cjs, endpoints /health, /auth/*, /collection, conexión a PostgreSQL, .env con secretos y Dockerfile que exponga el puerto.
¿Qué archivos de infraestructura son obligatorios?
.env, Dockerfile, .dockerignore, package.json y opcional docker-compose.yml para levantar API + Postgres (+ Traefik/NGINX).
¿Qué base de datos uso en un VPS?
PostgreSQL. Evita localStorage/SQLite en producción. Define usuario, contraseña y DB en .env y usa pg en la API.
¿Cómo sirvo el frontend de AI Studio?
Coloca el ZIP en web/. Sírvelo con Express estático o con NGINX en un contenedor separado detrás de Traefik.
¿Cómo organizo el proyecto para escalar?
Estructura en api/ y web/. Orquesta con docker-compose.yml, separa redes, y usa volúmenes persistentes para Postgres (pgdata).
¿Qué endpoints mínimos debo exponer?
/health para monitorización, /auth/register y /auth/login con JWT, y recursos como /collection y /wishlist.
¿Cómo calculo los costes del despliegue?
Suma: VPS (CPU/RAM/Disco), dominio, almacenamiento/backups, y transferencia. TLS con Let’s Encrypt ≈ 0 €.
¿Qué buenas prácticas de seguridad aplico?
Usa JWT con secreto fuerte, variables en .env, puertos mínimos expuestos, actualizaciones de contenedores y backups verificados.
¿Cómo publico el dominio con HTTPS?
Configura DNS hacia tu VPS, usa Traefik o NGINX con Let’s Encrypt para certificados y redirige todo a HTTPS.

56 comentarios en “Cómo desplegar apps de Google AI Studio en tu VPS”

  3. Runa

    Oye, pues este artículo sobre cómo desplegar apps de Google AI Studio en tu VPS, vaya, no está mal, ¿eh? Aunque, igual me estoy liando, pero creo que se podría haber explicado un poco mejor eso de las capas obligatorias. Por cierto, me ha gustado cómo han mencionado lo del .env, muy útil. Una cosilla, ¿alguien sabe si hay alguna forma más eficiente de subir los elementos para complementar el zip? Y otra cosa, ¿es muy complicado lo del Backend o API? Siento si me he ido por las ramas, es que soy nuevo en esto.

  4. Olwen Oliver

    Vale, entonces, si lo entiendo bien, no podemos prescindir de ninguna de esas capas obligatorias, ¿no? Eso tiene sentido, claro. Pero ya me estoy liando un poco… esas partes que hay que subir para complementar el zip, ¿son imprescindibles todas? Por cierto, ¿alguien ha tenido problemas con la configuración del .env? No sé si es cosa mía, pero me cuesta un poco entenderlo. Y ya que estamos, ¿qué backend o API recomendáis usar? ¿Alguna preferencia?

  6. Orson Jurado

    Vale, a ver, creo que entendí bien esto. Me parece que el artículo explica cómo desplegar apps de Google AI Studio en un VPS y todo eso, pero, ahora que lo pienso, me surge una duda con el tema de las capas obligatorias. ¿No se supone que estas son las que hacen que la app sea sostenible en el tiempo? Y otra cosa, por cierto, ¿qué papel juega el .env en todo esto? ¿Es solo para el backend o algo más?

  8. Kevin Vargas

    Vaya, así que las Capas obligatorias son un must, ¿no? Nunca me lo había planteado, la verdad. Por cierto, ahora que lo pienso, este tema del Backend o API siempre me ha tenido un poco liado. Digo, claro que entiendo la teoría, pero a la hora de la práctica… siempre me hago un lío. Y eso de .env para complementar el zip, ¿no es un poco técnico? No sé, igual es cosa mía. ¿Alguien más tiene problemas con estos temas o solo soy yo?

  9. Nadia Minguez

    ¿Alguien ha probado desplegar las apps de Google AI Studio en un VPS diferente al recomendado en el artículo? ¿Funcionan igual de bien?

  11. Hodei

    Vale, creo que entendí bien esto… a ver si me aclaro. Según el artículo, hay que tener en cuenta las capas obligatorias y el backend/API al desplegar las apps en el VPS, ¿no? Y, por cierto, ¿alguien sabe si esos elementos que hay que subir para complementar el zip, tienen que ser específicos o puede ser cualquier cosa? Ahora que lo pienso, igual me estoy liando con eso del archivo .env. Mmm… ¿Y qué papel juega la sostenibilidad en todo esto?

  13. Osiel

    Hmm, vaya, esto del Google AI Studio suena a chino, ¿no? Pero, bueno, como entiendo, las capas obligatorias parecen ser el núcleo de todo el asunto, ¿verdad? Y lo del .env, ya ni te cuento, parece que es algo realmente importante para que todo funcione bien. Ah, y por cierto, una duda que me surge, ¿es el Backend o API lo que permitiría conectar esta app con otras plataformas? Es que igual me estoy liando un poco con todos estos términos técnicos. ¿Alguien puede arrojar algo de luz?

  17. Felisa Sosa

    Mmm, vaya, me ha parecido super interesante esto de las Capas obligatorias. No sé, me pregunto si esas capas son siempre las mismas o, igual me estoy liando, ¿varían dependiendo de la app? Por cierto, me ha dejado un poco confundido el tema del .env. ¿Cómo es que es tan crucial para la sostenibilidad de la app? Y otra cosita, en lo referente a los Elementos a subir, ¿subir al VPS directamente o hay otra forma? Oye, y hablando de la API, ¿puede ser cualquier backend?

  18. Idra Ferrera

    ¿No sería más fácil si Google AI Studio permitiera el despliegue directo en VPS sin tanta complicación con los complementos y el .env?

  19. Sabrina Boix

    ¿Alguien ha probado desplegar estas apps en un VPS con Linux? ¿Funcionaría igual que en Windows con estas capas obligatorias?

  27. Walter Castello

    No sé si es porque estoy leyendo esto desde el móvil y ya estoy un poco cansado, pero me ha costado un poco entender lo de las capas obligatorias. ¿Eso significa que hay partes de la app que tenemos que subir sí o sí al VPS? Y lo del .env, supongo que se refiere al archivo de configuración, ¿no? En fin, es bastante interesante el tema, pero creo que tendré que repasarlo otra vez con más calma, igual me estoy liando yo solo.

  28. Caeli Saez

    Bueno, me parece un rollo eso de las capas obligatorias, ¿no? Yo lo que quiero es subir mi app y ya, sin complicaciones. ¿Tiene que ser tan lioso el backend o API? Y eso del .env, ¿es necesario subirlo o es opcional? Me parece que me estoy liando un poco con todo esto, la verdad.

  29. Odessa

    Me ha liado un poco lo de Capas obligatorias, ¿no se supone que ya vienen con la app de Google AI Studio? Y el backend, ¿tenemos que desarrollarlo nosotros o Google ya nos da una API? Me ha costado un poco entender ese punto. Por cierto, muy útil lo de los elementos a subir en el zip, no tenía ni idea de eso.

  30. Genaro Carranza

    Vale, a ver si lo pille bien. Entonces, las Capas obligatorias son como los componentes primordiales de la app, ¿no? Y el Backend o API es lo que hace que todo funcione por detrás… Aunque, ¿qué pasa si faltan Elementos para complementar el zip? ¿Se jode todo el despliegue? Y lo del .env, ni idea, la verdad. ¿Alguien puede explicármelo un poco mejor? Me parece super interesante, pero siento que me estoy ahogando en un vaso de agua.

  31. Nuru

    Vaya, bastante lío con lo de las Capas obligatorias, nunca me había parado a pensar en eso. Pero me pregunto, ¿qué pasa si no subo todos los Elementos a subir para complementar el zip? ¿Habría algún problema con el Backend o API? Y otra cosa, el .env, ¿es realmente necesario o se puede prescindir de él? Siento si me estoy liando un poco…

  32. Raziel

    Vaya, bastante interesante lo de las Capas obligatorias. Aunque, ¿no sería más fácil si Google AI Studio ofreciera ya un sistema para desplegar las apps directamente en VPS? Igual me estoy liando… Y otra cosa, ¿qué pasa si no subo todos los Elementos complementarios para el zip? ¿Funcionaría igual? El .env sigue siendo un misterio para mí… en fin, gracias por el artículo!

  33. Bruna

    Mmm, interesante eso de las Capas obligatorias, aunque lo del .env me ha dejado un poco liado, ¿alguien sabe si ese es el nombre del archivo o es solo un ejemplo? El tema del Backend o API me parece fundamental, pero me pregunto, ¿qué elementos debería subir para complementar el zip? Igual me pierdo algo aquí…

  34. Cuchulain

    Mmm, me ha dejado pensando esto de las Capas obligatorias, siempre pensé que todo lo relacionado con el backend era más flexible. Y lo del .env, ¿no podría ser un poco inseguro subirlo así no más? Igual me estoy liando… en fin, interesante.

  35. Harsal

    Bueno, he estado intentando desplegar apps de Google AI Studio en mi VPS, pero la verdad me estoy liando un poco con esto de las Capas obligatorias y el Backend o API. No sé si me lo podéis aclarar un poco más. Y otra cosa, ¿qué elementos exactamente tengo que subir para complementar el zip? ¿Y eso del .env cómo va? Uff, es que soy nuevo en esto y ando un poco perdido. Gracias.

  36. Sakura Maroto

    ¿Alguien ha intentado desplegar apps de Google AI Studio en VPS que no sean de Google? Entre el lío de las capas obligatorias y configurar el .env, me estoy volviendo loco. ¿Es necesario subir todos los elementos complementarios del zip o puedo saltarme algunos? No sé, chicos, igual me pierdo en algo… A ver si a alguien le suena esto.

  37. Ulises Fraile

    La verdad es que me ha parecido muy útil la parte de las Capas obligatorias, nunca lo había visto explicado así. Pero me he liado un poco con lo del .env, ¿es necesario tenerlo siempre o depende del caso? Igual me estoy liando yo solo, pero no acabo de pillarle el punto a eso. En fin, gracias por el artículo, me ha aclarado bastante el tema.

  38. Kon Romera

    No sé si lo he entendido bien, pero ¿qué pasa si no tengo todas las capas obligatorias? ¿Puedo seguir adelante o es un stop en seco? No soy muy técnico, pero me interesa el tema. Otra cosita, esto del .env, ¿es como un adicional al zip? Igual me estoy liando… Bueno, gracias de todos modos.

  39. Iago Paredes

    ¿Alguien más tiene problemas con el .env? Intenté seguir los pasos del artículo pero no me queda claro qué elementos subir para complementar el zip. O sea, entiendo lo de las capas obligatorias y el backend, pero ¿qué más? ¿Alguien podría aclararme eso? Me estoy liando…

  40. Amias Ordoñez

    Oye, este artículo es bastante útil, aunque me ha dejado un poco confuso eso de las Capas obligatorias. ¿Se refiere a las dependencias necesarias para que la app funcione correctamente? Y en cuanto al .env, entiendo que es para las variables de entorno, pero ¿cómo se maneja la seguridad en ese caso? No querría tener información sensible flotando en mi VPS.

  41. Aixa Dasilva

    La verdad es que me ha liado un poco eso de las Capas obligatorias y .env. ¿No se supone que el backend se encarga de todo eso? Y lo de los Elementos a subir para complementar el zip, ¿son necesarios todos o depende de la app? No sé, igual me estoy liando yo solo.

  42. Nahid Sousa

    Bueno, la verdad es que me ha dejado algo liado eso de Capas obligatorias. Es la primera vez que trasteo con Google AI Studio y no sé muy bien a qué se refiere. ¿Es algo que se tiene que configurar en el .env o va más relacionado con el Backend? Y otra cosa, no me ha quedado claro cuales son los Elementos a subir para complementar el zip. ¿Alguien podría echarme una mano? Gracias.

  43. Melisa

    Muy interesante el tema de desplegar apps con Google AI Studio, me ha dejado pensando. Pero me lío un poco con lo de Capas obligatorias, ¿es algo que siempre se debe tener en cuenta al trabajar con AI? Y en cuanto al .env, siempre me ha confundido un poco su función. ¿Es muy crucial en todo este proceso? A ver si me aclaro un poco más con el próximo artículo, jeje.

  44. Saiko

    Bueno, me resultó bastante útil la parte de Capas obligatorias, nunca había pensado en ello de esa manera. Pero me hago un lío con la Backend o API, ¿es necesario tener conocimientos avanzados para ello? Y sobre .env, ¿basta con subirlo al servidor y ya está? Igual me estoy liando yo solo…

Los comentarios están cerrados.

Más contenido relacionado que puede interesarte...

Scroll al inicio