ocean-cleanup/PRODUCTION_DEPLOYMENT_NOTES.md

Production Deployment Notes

File Uploads Issue

Problem

Images are returning 404 errors in production because the uploads directory is not persisting or is in the wrong location.

Current Configuration

• Backend serves uploads from: /uploads route
• Files are stored in: UPLOAD_DIR environment variable (default: ./uploads)
• File URLs in database: /uploads/photo-{timestamp}-{random}.jpeg

Solution Options

Option 1: Ensure Persistent Upload Directory (Recommended)

Make sure the uploads directory on the production server persists across deployments:

# On production server
cd /path/to/server
mkdir -p uploads
chmod 755 uploads

# Set in .env
UPLOAD_DIR=/absolute/path/to/uploads

Option 2: Use Cloud Storage (Better for Production)

Instead of local file storage, use cloud storage like AWS S3, Cloudinary, or similar:

1. Update server/src/middleware/upload.ts to use cloud storage
2. Update photo URLs to point to cloud storage
3. No need for local uploads directory

Checking Upload Directory

Add this to your server to debug:

// In server/src/index.ts
app.get('/debug/uploads', (req, res) => {
  const uploadDir = process.env.UPLOAD_DIR || path.join(process.cwd(), 'uploads');
  const fs = require('fs');
  
  res.json({
    uploadDir,
    exists: fs.existsSync(uploadDir),
    files: fs.existsSync(uploadDir) ? fs.readdirSync(uploadDir) : [],
    cwd: process.cwd(),
  });
});

Current Status

• ✅ Frontend correctly requests: https://litter-api.psbailey.uk/uploads/photo-xxx.jpeg
• ✅ Backend serves uploads from /uploads route
• ❌ Files don't exist in the uploads directory on production server

Action Required

1. Check if uploads directory exists on production server
2. Verify UPLOAD_DIR environment variable is set correctly
3. Ensure uploads directory has correct permissions
4. Consider implementing cloud storage for production