Docker Reverse Proxy Testing Environment

Test your static web apps behind an nginx reverse proxy before production.

What This Does

• Nginx runs as reverse proxy on port 7878
• Your app runs behind nginx at /apps/my-app
• All logs stored locally in volumes/ folder
• Easy to swap different Docker images for testing

Project Files

├── docker-compose.yml          # Your actual app config
├── demo-docker-compose.yml     # Demo config for testing setup
├── nginx.conf                  # Proxy configuration
├── .env.nginx                  # Nginx settings
├── .env.app                    # Your app settings (API URLs, etc)
└── volumes/                    # Logs and cache

Quick Start

1. Test the Setup First (Demo Mode)

# Start demo
docker-compose -f demo-docker-compose.yml up -d

# Check it works
open http://localhost:7878/apps/my-app

# Stop demo
docker-compose -f demo-docker-compose.yml down

2. Use Your Own App

# Edit docker-compose.yml - change the image to yours:
#   image: your-registry/your-app:tag

# Update .env.app with your API URLs and settings

# Start
docker-compose up -d

# Check logs
docker-compose logs -f

# Access
open http://localhost:7878/apps/my-app

Configuration

Change Your Docker Image

Edit docker-compose.yml:

webapp:
  image: your-image:tag # Change this

Set Your App's Environment Variables

Edit .env.app:

API_BASE_URL=https://your-api.com/api
NUXT_APP_BASE_URL=/apps/my-app  # Must match nginx path!
# Add any other vars your app needs

Change the Proxy Path

Default is /apps/my-app. To change it:

1. Edit nginx.conf - change location /apps/my-app to your path
2. Edit .env.app - update NUXT_APP_BASE_URL to match
3. Restart: docker-compose restart

URL Rewriting (Important!)

In nginx.conf, there's a commented line:

#rewrite ^/apps/my-app/?(.*)$ /$1 break;

• Keep commented if your app knows about the /apps/my-app prefix
• Uncomment if your app expects to serve from root /

Common Commands

# Start
docker-compose up -d

# Stop
docker-compose down

# View logs
docker-compose logs -f
docker-compose logs -f webapp
docker-compose logs -f nginx

# Restart after changes
docker-compose restart

# Test with different image
docker-compose up -d --force-recreate webapp

# Clean restart
docker-compose down
rm -rf volumes/nginx/cache/* volumes/nginx/logs/*
docker-compose up -d

Access Points

• Your app: http://localhost:7878/apps/my-app
• Health check: http://localhost:7878/health

Common Issues

502 Bad Gateway

• Check if webapp container is running: docker-compose ps
• Check webapp logs: docker-compose logs webapp
• Restart: docker-compose restart webapp

404 Not Found

• Make sure you use /apps/my-app in URL (not just /)
• Check if webapp is serving content: docker exec -it webapp sh

CSS/JS Not Loading

• Check NUXT_APP_BASE_URL in .env.app matches nginx path
• Or enable the rewrite rule in nginx.conf

Environment Variables Not Working

Check container has the vars:

docker exec webapp env

Testing Different Apps

Just change the image and restart:

# Edit docker-compose.yml image line
nano docker-compose.yml

# Restart
docker-compose up -d --force-recreate webapp

View Logs Directly

Logs are stored locally:

tail -f volumes/nginx/logs/access.log
tail -f volumes/nginx/logs/error.log

---

That's it! Start with demo mode, then swap in your image.

Troubleshooting

Check if services are running:

docker-compose ps

Check nginx configuration:

docker-compose exec nginx nginx -t

Reload nginx without restart:

docker-compose exec nginx nginx -s reload

View container networks:

docker network inspect local-rp_app-network