096
LVL 04 — SENIOR-IN-TRAININGSESSION 096DAY 96

DEPLOY TO PRODUCTION

🎫 PIXELCRAFT-082
🔧DevOps | 🔴 Expert | Priority: 🔴 Critical

PixelCraft has never been on a real URL. Deploy frontend to Vercel, backend to Railway, database to MongoDB Atlas. Get a real domain with HTTPS. Share the link with anyone in the world.
CONCEPTS.UNLOCKED
☁️
Cloud Platforms
Vercel (frontend), Railway (backend), Atlas (database). Each service does one thing well. Vercel serves static files from a global CDN. Railway runs your Node.js server. Atlas manages your MongoDB cluster.
🚀
Deployment
Pushing code to production servers. Connect your GitHub repo → platform builds and deploys automatically on push. No SSH, no FTP, no manual file copying. Git push = live.
🌐
DNS
Mapping a domain name to a server's IP. pixelcraft.dev → 76.76.21.21. Your browser asks DNS servers (a global distributed database) to resolve the name. A/CNAME records point to your hosting.
🔒
HTTPS / SSL
Encrypted connections via TLS. Let's Encrypt provides free certificates. Every byte between browser and server is encrypted. Required for Service Workers, required for trust.
🔧
Environment Variables
Different config per environment. Development: localhost database, test keys. Production: Atlas connection string, real API keys. Same code, different config. Never hardcode.
💓
Health Checks & Monitoring
GET /api/health → { status: "ok" }. Uptime monitoring pings this endpoint every minute. If it fails, you get an alert before users notice. Proactive, not reactive.
HANDS-ON.TASKS
01
Deploy Frontend to Vercel
npm install -g vercel vercel --prod # Or: connect GitHub repo on vercel.com # → Auto-deploy on push to main # Set environment variable: # VITE_API_URL=https://api.pixelcraft.dev # Vercel: # - Builds your React app # - Serves from global CDN (edge nodes) # - Automatic HTTPS # - Preview URLs for every PR
02
Deploy Backend to Railway
# Connect GitHub repo on railway.app # Railway detects Node.js, builds, deploys # Set environment variables: DATABASE_URL=mongodb+srv://... JWT_SECRET=your-64-char-random-secret REDIS_URL=redis://... RESEND_API_KEY=re_... NODE_ENV=production FRONTEND_URL=https://pixelcraft.dev # Add health check endpoint: app.get('/api/health', (req, res) => { res.json({ status: 'ok', uptime: process.uptime(), timestamp: new Date().toISOString(), }); });
03
Set Up MongoDB Atlas
# mongodb.com/atlas → Create free cluster # 1. Create database user # (strong random password) # 2. Network access: # Whitelist Railway's IP range # (or 0.0.0.0/0 for free tier) # 3. Get connection string: # mongodb+srv://user:pass@cluster.mongodb.net/pixelcraft # 4. Set as DATABASE_URL in Railway # Atlas provides: # - Automatic backups # - Monitoring dashboard # - Performance advisor # - Free 512MB tier
04
Configure Domain & DNS
# Buy domain: pixelcraft.dev # (Namecheap, Cloudflare, Google) # DNS records: # pixelcraft.dev # → CNAME → cname.vercel-dns.com # (frontend) # api.pixelcraft.dev # → CNAME → your-app.railway.app # (backend) # Automatic HTTPS: # Vercel + Railway both provision # TLS certificates via Let's Encrypt. # No configuration needed.
05
Post-Deployment Checklist
[✅] CORS configured for production domain [✅] Environment variables set correctly [✅] Database connection works [✅] Auth flow works end-to-end [✅] File upload works [✅] HTTPS verified (no mixed content) [✅] Error tracking integrated [✅] Health check responds # Open https://pixelcraft.dev # on your phone. It works.
06
Close the Ticket
git switch -c devops/PIXELCRAFT-082-deploy git add vercel.json railway.toml git commit -m "Deploy to production: Vercel + Railway + Atlas (PIXELCRAFT-082)" git push origin devops/PIXELCRAFT-082-deploy # PR → Review → Merge → Auto-deploy ✅
CS.DEEP-DIVE

DNS is the phone book of the internet.

When you type pixelcraft.dev, your browser queries a global distributed database spanning millions of servers to resolve it to an IP address.

// DNS resolution chain:

Browser cache (instant)
  → OS cache (instant)
  → Router cache (<1ms)
  → ISP DNS (<10ms)
  → Root nameserver
  → TLD nameserver (.dev)
  → Authoritative nameserver
  → 76.76.21.21

// HTTPS (TLS handshake):
1. Client → Server: "Hello"
2. Server → Client: certificate
   (proves identity)
3. Client verifies certificate
   against trusted CAs
4. Key exchange (Diffie-Hellman)
5. Symmetric encryption begins
   Every byte is encrypted.
   Even your ISP can't read it.
"Deploy Lab"
[A]Set up uptime monitoring: use UptimeRobot (free) to ping /api/health every 5 minutes. Get email/Slack alerts when the server goes down. Know before your users do.
[B]Add Cloudflare as a CDN in front of the API: cache static responses, add DDoS protection, reduce latency with edge nodes worldwide. Measure the latency improvement.
[C]Research: what is the difference between PaaS (Vercel, Railway), IaaS (AWS EC2), and serverless (Lambda)? When would you choose each? What are the tradeoffs in cost, control, and complexity?
REF.MATERIAL
ARTICLE
Vercel
Official Vercel guide: deploying, environment variables, custom domains, edge functions, and preview deployments.
VERCELOFFICIALESSENTIAL
ARTICLE
Railway
Official Railway guide: deploying Node.js, adding databases, configuring domains, environment variables, and scaling.
RAILWAYOFFICIAL
VIDEO
Fireship
Visual explanation of DNS: root servers, TLD servers, authoritative servers, caching, and why it takes milliseconds to resolve a domain.
DNSVISUAL
ARTICLE
MongoDB
Official Atlas guide: creating clusters, connecting applications, monitoring, backups, and security configuration.
ATLASOFFICIAL
VIDEO
Computerphile
How HTTPS works: public-key cryptography, certificate authorities, the TLS handshake, and why every connection should be encrypted.
HTTPSSECURITY
// LEAVE EXCITED BECAUSE
PixelCraft is LIVE on the internet. Real URL. Real HTTPS. Real database. Share the link with anyone in the world. You deployed a full-stack web application to production. This is the most important milestone in the course.