|
| 1 | +# 🌐 Azure Portal Deployment Guide |
| 2 | +**Deploy your Calendar Integration Backend using Azure Portal** |
| 3 | + |
| 4 | +## 🚀 Step-by-Step Portal Deployment |
| 5 | + |
| 6 | +### **Step 1: Create Database (PostgreSQL)** |
| 7 | + |
| 8 | +1. **Go to Azure Portal**: https://portal.azure.com |
| 9 | +2. **Click "Create a resource"** |
| 10 | +3. **Search for "Azure Database for PostgreSQL"** |
| 11 | +4. **Select "Azure Database for PostgreSQL flexible server"** |
| 12 | +5. **Click "Create"** |
| 13 | + |
| 14 | +**Configuration:** |
| 15 | +- **Resource Group**: Create new → `calendar-integration-rg` |
| 16 | +- **Server Name**: `calendar-integration-db` (must be globally unique) |
| 17 | +- **Region**: Choose closest to you (e.g., East US) |
| 18 | +- **PostgreSQL Version**: 14 |
| 19 | +- **Workload Type**: Development |
| 20 | +- **Admin Username**: `calendaradmin` |
| 21 | +- **Password**: Create a strong password (save it!) |
| 22 | +- **Pricing Tier**: Burstable → B1ms (1 vCore, 2GB RAM) - ~$20/month |
| 23 | + |
| 24 | +6. **Click "Review + Create"** → **"Create"** |
| 25 | +7. **Wait for deployment** (takes 5-10 minutes) |
| 26 | + |
| 27 | +### **Step 2: Configure Database** |
| 28 | + |
| 29 | +1. **Go to your database resource** |
| 30 | +2. **Click "Databases" in left menu** |
| 31 | +3. **Click "+ Add"** |
| 32 | +4. **Database Name**: `calender_app` |
| 33 | +5. **Click "Save"** |
| 34 | + |
| 35 | +6. **Configure Firewall**: |
| 36 | + - Go to **"Networking"** in left menu |
| 37 | + - Check **"Allow public access from any Azure service within Azure"** ✅ |
| 38 | + - **For Development**: Add your IP: Click **"Add current client IP address"** |
| 39 | + - **For Production**: Remove your IP rule (keep only Azure services) |
| 40 | + - Click **"Save"** |
| 41 | + |
| 42 | + **⚠️ Security Note**: |
| 43 | + - The "Azure services" rule allows your App Service to connect |
| 44 | + - Users access your app through the frontend/backend, NOT directly to database |
| 45 | + - Never add 0.0.0.0/0 (all IPs) - this would be insecure |
| 46 | + |
| 47 | +### **Step 3: Create Web App (Backend)** |
| 48 | + |
| 49 | +1. **Go back to Azure Portal home** |
| 50 | +2. **Click "Create a resource"** |
| 51 | +3. **Search for "Web App"** |
| 52 | +4. **Click "Create"** |
| 53 | + |
| 54 | +**Configuration:** |
| 55 | +- **Resource Group**: Select `calendar-integration-rg` |
| 56 | +- **Name**: `calendar-integration-backend` (must be globally unique) |
| 57 | +- **Publish**: Code |
| 58 | +- **Runtime Stack**: Node 18 LTS |
| 59 | +- **Operating System**: Linux |
| 60 | +- **Region**: Same as database |
| 61 | +- **Pricing Plan**: |
| 62 | + - Click "Create new" |
| 63 | + - Name: `calendar-plan` |
| 64 | + - Size: Basic B1 (~$13/month) or Free F1 (limited) |
| 65 | + |
| 66 | +5. **Click "Review + Create"** → **"Create"** |
| 67 | +6. **Wait for deployment** |
| 68 | + |
| 69 | +### **Step 4: Configure Environment Variables** |
| 70 | + |
| 71 | +1. **Go to your Web App resource** |
| 72 | +2. **Click "Configuration" in left menu** |
| 73 | +3. **Click "Application settings" tab** |
| 74 | +4. **Add these environment variables** (click "+ New application setting" for each): |
| 75 | + |
| 76 | +**CRITICAL Variables (Required):** |
| 77 | +``` |
| 78 | +Name: DATABASE_URL |
| 79 | +Value: postgresql://calendaradmin:YOUR_PASSWORD@calendar-integration-db.postgres.database.azure.com:5432/calender_app?sslmode=require |
| 80 | +
|
| 81 | +Name: GOOGLE_CLIENT_ID |
| 82 | +Value: YOUR_GOOGLE_CLIENT_ID_HERE |
| 83 | +
|
| 84 | +Name: GOOGLE_CLIENT_SECRET |
| 85 | +Value: YOUR_GOOGLE_CLIENT_SECRET_HERE |
| 86 | +
|
| 87 | +Name: GOOGLE_REDIRECT_URL |
| 88 | +Value: https://calendar-integration-backend-eabkffc4gphtenfc.westus-01.azurewebsites.net/api/auth/google/callback |
| 89 | +
|
| 90 | +Name: FRONTEND_URL |
| 91 | +Value: http://localhost:3000 |
| 92 | +
|
| 93 | +Name: FRONTEND_CALLBACK_URL |
| 94 | +Value: http://localhost:3000/auth/callback |
| 95 | +
|
| 96 | +Name: FRONTEND_ERROR_URL |
| 97 | +Value: http://localhost:3000 |
| 98 | +
|
| 99 | +Name: PORT |
| 100 | +Value: 8080 |
| 101 | +(Azure App Service expects apps to listen on port 8080) |
| 102 | +
|
| 103 | +Name: SCM_DO_BUILD_DURING_DEPLOYMENT |
| 104 | +Value: true |
| 105 | +(Tells Azure to automatically build your TypeScript code during deployment) |
| 106 | +``` |
| 107 | + |
| 108 | +**OPTIONAL Variables:** |
| 109 | +``` |
| 110 | +Name: NODE_ENV |
| 111 | +Value: production |
| 112 | +(Standard practice but not used in your current code) |
| 113 | +``` |
| 114 | + |
| 115 | +7. **Click "Save"** at the top |
| 116 | + |
| 117 | +### **Step 5: Deploy Code from GitHub** |
| 118 | + |
| 119 | +**Option A: Direct GitHub Connection** |
| 120 | + |
| 121 | +1. **In your Web App**, click **"Deployment Center"** in left menu |
| 122 | +2. **Source**: Select **"GitHub"** |
| 123 | +3. **Sign in to GitHub** if prompted |
| 124 | +4. **Organization**: Select your GitHub username |
| 125 | +5. **Repository**: Select `Event-Management` |
| 126 | +6. **Branch**: `main` |
| 127 | +7. **Build Provider**: Select **"App Service Build Service"** |
| 128 | +8. **Application folder**: `/backend` (important!) |
| 129 | +9. **Click "Save"** |
| 130 | + |
| 131 | +Azure will automatically deploy your code! |
| 132 | + |
| 133 | +**Option B: Local Git (if GitHub doesn't work)** |
| 134 | + |
| 135 | +1. **In Deployment Center**, select **"Local Git"** |
| 136 | +2. **Click "Save"** |
| 137 | +3. **Copy the Git URL** provided |
| 138 | +4. **In your local terminal**: |
| 139 | +```bash |
| 140 | +cd "e:\My work\Calender-Integration\backend" |
| 141 | +git remote add azure [PASTE_GIT_URL_HERE] |
| 142 | +git push azure main |
| 143 | +``` |
| 144 | + |
| 145 | +### **Step 6: Run Database Migration** |
| 146 | + |
| 147 | +1. **In your Web App**, go to **"Development Tools"** → **"Console"** |
| 148 | +2. **Run these commands**: |
| 149 | +```bash |
| 150 | +cd /home/site/wwwroot |
| 151 | +npm run migrate |
| 152 | +``` |
| 153 | + |
| 154 | +Or use **"SSH"** option: |
| 155 | +1. **Click "SSH"** in Development Tools |
| 156 | +2. **Click "Go"** |
| 157 | +3. **Navigate to app directory**: `cd /home/site/wwwroot` |
| 158 | +4. **Run migration**: `npm run migrate` |
| 159 | + |
| 160 | +### **Step 7: Test Your Deployment** |
| 161 | + |
| 162 | +1. **Go to "Overview" in your Web App** |
| 163 | +2. **Click the URL** (e.g., https://calendar-integration-backend-eabkffc4gphtenfc.westus-01.azurewebsites.net) |
| 164 | +3. **You should see**: "✅ Calendar Integration API is running!" |
| 165 | + |
| 166 | +### **Step 8: Update Google OAuth** |
| 167 | + |
| 168 | +1. **Go to**: https://console.cloud.google.com |
| 169 | +2. **APIs & Services** → **Credentials** |
| 170 | +3. **Edit your OAuth 2.0 Client ID** |
| 171 | +4. **Add to "Authorized redirect URIs"**: |
| 172 | + ``` |
| 173 | + https://calendar-integration-backend-eabkffc4gphtenfc.westus-01.azurewebsites.net/api/auth/google/callback |
| 174 | + ``` |
| 175 | +5. **Save** |
| 176 | + |
| 177 | +### **Step 9: Handle Google Verification Warning** |
| 178 | + |
| 179 | +When testing OAuth, Google will show: *"Google hasn't verified this app"* |
| 180 | + |
| 181 | +**This is normal!** To continue: |
| 182 | +1. **Click "Advanced"** |
| 183 | +2. **Click "Go to [Your App] (unsafe)"** |
| 184 | +3. **Complete OAuth flow** |
| 185 | + |
| 186 | +**For production**: Add test users in OAuth consent screen or submit for Google verification. |
| 187 | + |
| 188 | +## 🔧 Alternative: Azure Portal File Upload |
| 189 | + |
| 190 | +If GitHub deployment doesn't work: |
| 191 | + |
| 192 | +### **Upload ZIP File** |
| 193 | + |
| 194 | +1. **Create deployment package**: |
| 195 | + - Zip your entire `backend` folder |
| 196 | + - Name it `backend.zip` |
| 197 | + |
| 198 | +2. **In Azure Portal**: |
| 199 | + - Go to your Web App |
| 200 | + - **Advanced Tools** → **Go** (opens Kudu) |
| 201 | + - **Tools** → **ZIP Push Deploy** |
| 202 | + - **Drag and drop** your `backend.zip` |
| 203 | + - Wait for deployment |
| 204 | + |
| 205 | +3. **Run commands in Console**: |
| 206 | +```bash |
| 207 | +npm install |
| 208 | +npm run build |
| 209 | +npm run generate |
| 210 | +npm run migrate |
| 211 | +``` |
| 212 | + |
| 213 | +## 🎯 Your Backend URL |
| 214 | + |
| 215 | +After deployment, your backend will be available at: |
| 216 | +``` |
| 217 | +https://calendar-integration-backend-eabkffc4gphtenfc.westus-01.azurewebsites.net |
| 218 | +``` |
| 219 | + |
| 220 | +Test endpoints: |
| 221 | +- Health: `https://calendar-integration-backend-eabkffc4gphtenfc.westus-01.azurewebsites.net/` |
| 222 | +- Auth: `https://calendar-integration-backend-eabkffc4gphtenfc.westus-01.azurewebsites.net/api/auth/google` |
| 223 | + |
| 224 | +## 💡 Next Steps |
| 225 | + |
| 226 | +1. ✅ **Backend deployed to Azure** |
| 227 | +2. **Update your frontend** `.env.local`: |
| 228 | + ``` |
| 229 | + NEXT_PUBLIC_API_URL=https://calendar-integration-backend-eabkffc4gphtenfc.westus-01.azurewebsites.net/api |
| 230 | + ``` |
| 231 | +3. **Deploy frontend** (Vercel/Azure Static Web Apps) |
| 232 | +4. **Update environment variables** with frontend URL |
| 233 | + |
| 234 | +## 🛠️ Troubleshooting |
| 235 | + |
| 236 | +### **Check Logs**: |
| 237 | +1. **Web App** → **Monitoring** → **Log stream** |
| 238 | +2. Or **Diagnose and solve problems** |
| 239 | + |
| 240 | +### **Common Issues**: |
| 241 | +- **App won't start**: Check environment variables |
| 242 | +- **Database connection**: Verify DATABASE_URL and firewall |
| 243 | +- **OAuth issues**: Check Google redirect URLs |
| 244 | + |
| 245 | +### **Restart App**: |
| 246 | +1. **Web App** → **Overview** → **Restart** |
| 247 | + |
| 248 | +## 💰 Cost Summary |
| 249 | + |
| 250 | +- **PostgreSQL B1ms**: ~$20/month |
| 251 | +- **App Service B1**: ~$13/month |
| 252 | +- **Total**: ~$33/month |
| 253 | + |
| 254 | +**Free Options**: |
| 255 | +- App Service F1: Free (limited) |
| 256 | +- Use Azure free credits! |
| 257 | + |
| 258 | +You're all set! 🚀 |
0 commit comments