Skip to main content
Docker provides a containerized deployment option for Estudio Three, packaging the application with Nginx for serving the PWA in production environments.

​
Prerequisites

  • Docker 24.x or higher
  • Docker Compose (optional, for simplified workflows)
  • .env file configured with all required variables

​
Docker Architecture

Estudio Three uses a multi-stage Docker build:
  1. Build stage: Compiles the Vite application with embedded environment variables
  2. Production stage: Serves the static build with Nginx (unprivileged)
VITE_ environment variables must be provided at build time, not runtime, as they are embedded into the JavaScript bundle

​
Management Scripts

Estudio Three includes interactive management scripts for both Unix and Windows:

​
Linux/macOS: manage.sh

1

Make script executable

chmod +x scripts/manage.sh
2

Run the manager

./scripts/manage.sh
3

Select option

The interactive menu provides:
  • [1] Lanzar Rápido: Quick start (skips rebuild if image exists)
  • [2] Construcción Total: Force rebuild and launch
  • [3] Terminal Shell: Access container shell
  • [4] Ver Registros: View live logs
  • [5] Detener Sistema: Stop container
  • [6-8] Dev Tools: Development server, tests, cache cleanup
  • [9] Info Sistema: System diagnostics
  • [10] Limpieza Docker: Remove image and container

​
Windows: manage.ps1

1

Run PowerShell script

.\scripts\manage.ps1
2

Docker detection

The script automatically detects:
  • Docker Desktop (Windows)
  • Docker in WSL (fallback)
3

Use interactive menu

Similar options to the bash script with additional features:
  • [12] Exponer a Internet: Cloudflare Tunnel integration
  • [13-14] I18N Tools: Translation management

​
Manual Docker Commands

If you prefer manual control over the Docker workflow:

​
Building the Image

# Load environment variables
export $(cat .env | grep -v '^#' | xargs)

# Build with arguments
docker build \
  --build-arg VITE_SUPABASE_URL="$VITE_SUPABASE_URL" \
  --build-arg VITE_SUPABASE_ANON_KEY="$VITE_SUPABASE_ANON_KEY" \
  --build-arg VITE_APP_URL="$VITE_APP_URL" \
  -t estudio:latest \
  -f deploy/docker/Dockerfile \
  .
Build time typically takes 2-5 minutes depending on your system and network speed

​
Running the Container

docker run -d \
  -p 8080:8080 \
  --name estudio-web \
  estudio:latest
Access the application at http://localhost:8080

​
Container Management

# View logs
docker logs -f estudio-web

# Stop container
docker stop estudio-web

# Remove container
docker rm estudio-web

# Access container shell
docker exec -it estudio-web sh

# View resource usage
docker stats estudio-web

​
Docker Compose

For more complex setups, use Docker Compose: 
# Run production build
docker-compose --profile prod up --build

# Access at http://localhost:8080
The docker-compose.yml file includes two profiles:
  • dev: Runs npm run dev with source volume mounts
  • prod: Serves production build with Nginx

​
Port Mappings

Container PortHost PortPurpose
80808080Production Nginx server
51735173Development Vite server
The production build uses nginxinc/nginx-unprivileged:alpine which runs on port 8080 instead of the standard 80 for security

​
Volumes and Persistence

The Docker image includes:
  • Static assets: Built application in /usr/share/nginx/html
  • Nginx config: Custom configuration at /etc/nginx/conf.d/default.conf
  • No persistent data: All data is stored in Supabase
This application stores all user data in Supabase, not in the container. No volume mounts are required for data persistence.

​
Production Considerations

​
Security

1

Use unprivileged images

The Dockerfile uses nginxinc/nginx-unprivileged:alpine which runs as a non-root user
2

Don't expose service_role key

Never pass Supabase service_role key to the Docker build. Only use anon key.
3

Use HTTPS in production

Deploy behind a reverse proxy (Nginx, Traefik) with SSL certificates
4

Scan for vulnerabilities

docker scan estudio:latest

​
Performance Optimization

1

Enable gzip compression

The Nginx configuration should include:
gzip on;
gzip_types text/css application/javascript application/json;
2

Set resource limits

docker run -d \
  -p 8080:8080 \
  --memory="512m" \
  --cpus="1.0" \
  --name estudio-web \
  estudio:latest
3

Use multi-stage builds

The Dockerfile already uses multi-stage builds to minimize image size:
  • Build stage: ~600MB (Node.js + dependencies)
  • Final stage: ~30MB (Nginx + static files only)

​
Health Checks

Add health checks to your Docker run command: 
docker run -d \
  -p 8080:8080 \
  --name estudio-web \
  --health-cmd="wget --no-verbose --tries=1 --spider http://localhost:8080 || exit 1" \
  --health-interval=30s \
  --health-timeout=3s \
  --health-retries=3 \
  estudio:latest

​
Logging

Configure log drivers for centralized logging: 
docker run -d \
  -p 8080:8080 \
  --name estudio-web \
  --log-driver json-file \
  --log-opt max-size=10m \
  --log-opt max-file=3 \
  estudio:latest

​
Deployment to Cloud

​
AWS ECS/Fargate

1

Push to ECR

aws ecr get-login-password --region us-east-1 | docker login --username AWS --password-stdin <account-id>.dkr.ecr.us-east-1.amazonaws.com
docker tag estudio:latest <account-id>.dkr.ecr.us-east-1.amazonaws.com/estudio:latest
docker push <account-id>.dkr.ecr.us-east-1.amazonaws.com/estudio:latest
2

Create ECS task definition

Define container with environment variables and port mappings
3

Deploy to ECS service

Create or update service with the new task definition

​
Google Cloud Run

# Build and push to GCR
gcloud builds submit --tag gcr.io/PROJECT_ID/estudio

# Deploy to Cloud Run
gcloud run deploy estudio \
  --image gcr.io/PROJECT_ID/estudio \
  --platform managed \
  --port 8080 \
  --set-env-vars VITE_SUPABASE_URL=https://...,VITE_SUPABASE_ANON_KEY=...
Cloud Run requires environment variables at deployment time. The image must be rebuilt with correct VITE_ variables, or use a runtime configuration approach.

​
Azure Container Instances

az container create \
  --resource-group myResourceGroup \
  --name estudio-web \
  --image estudio:latest \
  --ports 8080 \
  --dns-name-label estudio-app

​
Troubleshooting

​
Blank screen after deployment

Problem: Application loads but shows blank screen Cause: Environment variables not provided at build time Solution: Rebuild the image with --build-arg for all VITE_ variables

​
”Cannot find module” errors

Problem: Build fails with missing dependencies Solution: Ensure package-lock.json is committed and npm ci is used (not npm install)

​
Port already in use

Problem: docker run fails with “port is already allocated” Solution: 
# Check what's using port 8080
lsof -i :8080  # macOS/Linux
netstat -ano | findstr :8080  # Windows

# Use different port
docker run -d -p 8081:8080 --name estudio-web estudio:latest

​
Container exits immediately

Problem: Container starts but exits immediately Solution: Check logs for errors 
docker logs estudio-web
Common causes:
  • Nginx configuration syntax error
  • Missing build files in /usr/share/nginx/html

​
Permission denied errors

Problem: Container can’t write to filesystem Solution: The unprivileged Nginx runs as user nginx (UID 101). Ensure files are readable: 
COPY --chown=nginx:nginx deploy/docker/nginx.conf /etc/nginx/conf.d/default.conf

​
Next Steps

For most users, Vercel deployment is simpler and includes automatic SSL, CDN, and serverless functions out of the box

Build docs developers (and LLMs) love

Get started for freeTalk to us