🚀 Quick Start - CI/CD Setup (3-Repo Structure)

📁 Your Repository Structure

GitHub:
├── FF8Dev/ctrl-audio-back          ← Backend (NestJS)
│   └── .github/workflows/
│       ├── deploy.yml              ← Deploys to Azure Container Apps
│       └── mirror-to-azure.yml     ← Mirrors to Azure DevOps
│
├── FF8Dev/ctrl-audio-front         ← Frontend (Next.js)
│   └── .github/workflows/
│       ├── deploy.yml              ← Deploys to Azure Static Web Apps
│       └── mirror-to-azure.yml     ← Mirrors to Azure DevOps
│
└── FF8Dev/ctrl-audio-infrastructure ← Infrastructure scripts
    ├── setup-azure.sh              ← Creates Azure resources
    ├── cleanup-azure.sh            ← Removes Azure resources
    └── configure-env.sh            ← Sets environment variables

🔄 Flow Diagram

┌─────────────────────────────────────────────────────────────────┐
│                         GitHub                                   │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│  ctrl-audio-back          ctrl-audio-front                      │
│       │                        │                                 │
│       ├──(mirror)──▶ Azure DevOps (backup)                      │
│       │                        │                                 │
│       └──(deploy)──▶ Container Apps    Static Web Apps ◀──(deploy)
│                            │                 │                   │
└────────────────────────────┼─────────────────┼───────────────────┘
                             │                 │
                             ▼                 ▼
                    ┌─────────────────────────────────┐
                    │         Azure Resources          │
                    ├─────────────────────────────────┤
                    │  • Container Apps (Backend)     │
                    │  • Static Web Apps (Frontend)   │
                    │  • Container Registry           │
                    │  • Blob Storage (existing)      │
                    │  • MongoDB Atlas (external)     │
                    └─────────────────────────────────┘

---

✅ Setup Steps

Step 1: Run Azure Infrastructure Setup

# Clone the infrastructure repo (or use local copy)
cd /path/to/ctrl-audio-infrastructure

# Login to Azure
az login --tenant d696653f-8bd7-4877-a422-7bb00fe509c1

# Run setup
chmod +x setup-azure.sh
./setup-azure.sh

This creates:

• Azure Container Registry
• Container Apps (backend dev + prod)
• Static Web Apps (frontend dev + prod)
• Service Principal for GitHub Actions

Step 2: Configure Backend Repo Secrets

Go to: github.com/FF8Dev/ctrl-audio-back → Settings → Secrets and variables → Actions

Secret Name	Value (from setup script output)
ACR_USERNAME	Container Registry username
ACR_PASSWORD	Container Registry password
AZURE_CREDENTIALS	Service Principal JSON

Step 3: Configure Frontend Repo Secrets & Variables

Go to: github.com/FF8Dev/ctrl-audio-front → Settings → Secrets and variables → Actions

Secrets:

Secret Name	Value
AZURE_STATIC_WEB_APPS_API_TOKEN	SWA token (prod)
AZURE_STATIC_WEB_APPS_API_TOKEN_DEV	SWA token (dev)
NEXTAUTH_SECRET	openssl rand -base64 32

Variables:

Variable Name	Value (from setup script output)
NEXT_PUBLIC_API_URL	Backend prod URL
NEXT_PUBLIC_API_URL_DEV	Backend dev URL
NEXTAUTH_URL	Frontend prod URL
NEXTAUTH_URL_DEV	Frontend dev URL

Step 4: Push to Main ✅

Since you're not in production yet, it's safe to push directly:

# Backend repo
cd ctrl-audio-back
git add .
git commit -m "Add CI/CD deployment workflow"
git push origin main

# Frontend repo
cd ctrl-audio-front
git add .
git commit -m "Add CI/CD deployment workflow"
git push origin main

Step 5: Watch the Magic! 🎉

Go to GitHub Actions tab in each repo and watch:

1. ✅ Build & test
2. ✅ Build Docker image (backend)
3. ✅ Push to Azure Container Registry (backend)
4. ✅ Deploy to Azure

---

📋 What Each Workflow Does

Backend (ctrl-audio-back)

Workflow	Trigger	What it does
mirror-to-azure.yml	Push to main/develop	Mirrors code to Azure DevOps
deploy.yml	Push to main/develop	Builds, tests, deploys to Azure

Frontend (ctrl-audio-front)

Workflow	Trigger	What it does
mirror-to-azure.yml	Push to main/develop	Mirrors code to Azure DevOps
deploy.yml	Push to main/develop	Builds, tests, deploys to Azure

---

🌿 Branch Strategy

Branch	Backend	Frontend
main	→ ctrl-audio-backend (prod)	→ ctrl-audio-frontend (prod)
develop	→ ctrl-audio-backend-dev	→ ctrl-audio-frontend-dev

---

🔧 Configure Backend Environment Variables

After deployment, set your backend secrets in Azure:

# Set secrets (MongoDB, JWT, etc.)
az containerapp secret set \
  --name ctrl-audio-backend \
  --resource-group Sonnance-WebApp \
  --secrets \
    mongodb-uri="your-mongodb-connection-string" \
    jwt-secret="your-jwt-secret"

# Set environment variables
az containerapp update \
  --name ctrl-audio-backend \
  --resource-group Sonnance-WebApp \
  --set-env-vars \
    NODE_ENV=production \
    PORT=8080 \
    MONGODB_URI=secretref:mongodb-uri \
    JWT_SECRET=secretref:jwt-secret

Or run the interactive script:

./configure-env.sh

---

🆘 Troubleshooting

Workflow fails with "secret not found"

→ Make sure you added secrets to the correct repo

Backend won't start

→ Check environment variables are set in Azure Container Apps

Frontend build fails

→ Check that NEXT_PUBLIC_API_URL variable is set

View logs

# Backend logs
az containerapp logs show \
  --name ctrl-audio-backend \
  --resource-group Sonnance-WebApp \
  --follow

# Check workflow logs
# → GitHub repo → Actions → Click on failed workflow

---

💰 Estimated Costs

Service	Free Tier	Estimated Cost
Container Registry (Basic)	-	~$5/month
Container Apps	180K vCPU-sec/month	$0 (within free tier)
Static Web Apps	100GB bandwidth	$0 (Free tier)
GitHub Actions	2,000 min/month	$0
Total		~$5/month

---

📚 Full Documentation

• README.md - Complete reference
• SAFE-DEPLOYMENT.md - Production safety guide