5.7 KiB
5.7 KiB
🚀 TCG Vault Deployment Guide
🏆 OPTION 1: Vercel Pro + Railway - BEST CHOICE
✅ Perfect for You (Already Have Vercel Pro!):
- Frontend → Your existing Vercel Pro account ($20/month already paying)
- Backend → Railway cloud service (free tier)
- Total additional cost: $0/month 🎉
- Enterprise-grade performance that crushes shared hosting
🔥 Why Vercel Pro Is Superior:
- 10M edge requests/month included (10x more than Hobby)
- 1TB data transfer/month (vs 100GB DreamHost shared)
- Global CDN with 40+ locations (instant worldwide loading)
- 4-CPU build machines (2x faster builds than Hobby)
- Advanced WAF protection (enterprise security)
- Observability & monitoring (performance insights)
- Zero-downtime deployments (professional reliability)
🚀 Step 1: Deploy Backend to Railway (5 minutes)
1. Create Railway Account
- Visit railway.app
- Sign up with GitHub (free)
2. Push Backend to GitHub
# In your tcg-vault directory
cd backend
git init
git add .
git commit -m "TCG Vault backend for deployment"
git branch -M main
# Create a new GitHub repo and push
git remote add origin YOUR_GITHUB_REPO_URL
git push -u origin main
3. Deploy to Railway
- In Railway dashboard: "New Project"
- "Deploy from GitHub repo"
- Select your backend repository
- Railway auto-detects Python and uses our
railway.tomlconfig - Deployment starts automatically!
4. Set Environment Variables (Important!)
In Railway dashboard, add environment variable:
ALLOWED_ORIGINS=https://your-vercel-domain.vercel.app
5. Get Your API URL
- Copy your Railway app URL (e.g.,
https://tcg-vault-backend-production-xyz.up.railway.app)
🌟 Step 2: Deploy Frontend to Vercel Pro (3 minutes)
1. Connect GitHub to Vercel
# In your tcg-vault directory
cd frontend
git init
git add .
git commit -m "TCG Vault frontend for Vercel"
git branch -M main
# Create GitHub repo for frontend
git remote add origin YOUR_FRONTEND_GITHUB_REPO_URL
git push -u origin main
2. Deploy to Vercel
- Go to vercel.com/dashboard
- "Import Project" → Choose your frontend GitHub repo
- Framework: React (auto-detected)
- Build Settings: Use defaults
- Environment Variables → Add:
REACT_APP_API_URL=https://your-railway-backend-url.up.railway.app/api/v1 - Deploy! ✨
3. Custom Domain (Optional)
- Use your existing domain or get a new one
- Vercel Pro includes SSL certificates automatically
🎯 Alternative Options (If you want to compare)
Option 2: DreamHost (Frontend) + Railway (Backend)
- Cost: $0/month (uses existing DreamHost)
- Performance: Good, but not as fast as Vercel Pro
- Setup: Manual file uploads vs automatic Git deployments
Option 3: DreamHost VPS ($12/month)
- Full Python support - Deploy everything together
- More expensive than using your existing Vercel Pro
Option 4: All Railway
- Frontend + Backend both on Railway
- Cost: ~$5-10/month for frontend hosting
📋 Quick Deployment Checklist
✅ Backend (Railway):
- Push backend code to GitHub
- Connect Railway to repository
- Set ALLOWED_ORIGINS environment variable
- Verify deployment success
- Copy API URL
✅ Frontend (Vercel Pro):
- Push frontend code to GitHub
- Import project in Vercel dashboard
- Set REACT_APP_API_URL environment variable
- Deploy and verify
- Optional: Set up custom domain
🛠️ Troubleshooting
Common Issues:
1. CORS Errors
- Ensure ALLOWED_ORIGINS in Railway includes your Vercel domain
2. API Not Found
- Double-check REACT_APP_API_URL in Vercel environment variables
- Ensure Railway backend is running (check Railway logs)
3. Build Failures
- Check Vercel build logs in dashboard
- Verify all dependencies are in package.json
4. OCR Not Working
- OCR runs client-side with Vercel's edge computing - should work great!
- Check browser console for any errors
🎯 Expected Results with Vercel Pro
After deployment, you'll have enterprise-grade hosting:
- ⚡ Blazing fast worldwide - 40+ edge locations
- 📱 Perfect mobile performance - OCR scanning works flawlessly
- 🛡️ Advanced security - WAF protection included
- 📊 Performance monitoring - Built-in observability tools
- 🔄 Automatic deployments - Push to Git, instantly live
- ✨ All visual effects - Enhanced with edge optimization
- 🌍 Global scalability - Handles traffic spikes automatically
💡 Pro Tips for Vercel Pro Users
Performance Optimization:
- Your 1TB transfer limit easily handles high-traffic
- Cold start prevention keeps your app instantly responsive
- Advanced caching speeds up repeat visits
Development Workflow:
- Preview deployments for every Git branch
- Automatic PR previews for testing features
- Instant rollbacks if anything goes wrong
Monitoring:
- Use Observability tools to track performance
- Web Analytics to see user behavior
- Speed Insights to optimize further
🎉 Your TCG Vault Will Be Professional-Grade!
With Vercel Pro + Railway, you get:
- Netflix-level performance for your card scanner
- $0 additional cost (using existing Vercel Pro)
- Enterprise security and reliability
- Automatic scaling to handle any traffic
- Professional deployment pipeline
Ready to deploy to your Vercel Pro account? This will be significantly better than any shared hosting option! 🚀