HT-003 - Vercel 502 Fix

ATLANTIS ITS

Vercel 502 Bad Gateway Fix

How-To Guide #003

Field Detail

Document ID HT-003

Version 1.0

Date March 10, 2026

Author Ozzy (Claude --- Atlantis AI)

Reviewed By Shane Hardin

Applies To ai.atlantisits.co --- Roofing Lead Engine

Difficulty Intermediate

Est. Time 10--15 minutes

Related Docs HT-001 --- Cloudflare Connector Rebuild, HT-002 --- Docker Recovery

1. Overview

This guide covers how to diagnose and fix a 502 Bad Gateway error on ai.atlantisits.co --- the Atlantis Roofing Lead Engine.

A 502 error means Cloudflare successfully received the request but could not get a valid response from the origin server (Vercel). This typically happens after a drive migration, Docker reset, or accidental Cloudflare DNS configuration change.

There are two common root causes --- this guide covers both:

  • Cause A: Cloudflare DNS proxy (orange cloud) enabled on the ai subdomain --- blocks Vercel serverless functions

  • Cause B: Vercel environment variables missing or incorrect --- the API cannot reach n8n

2. How the Roofing Lead Engine Works

Understanding the flow helps diagnose where the break occurred:

Layer Component URL / Location

1 --- HTML form (index.html) https://ai.atlantisits.co Frontend

2 --- DNS routing only --- must ai CNAME record → Vercel Cloudflare NOT be proxied

3 --- Vercel Serverless function Vercel deployment API (/api/roofing-lead.js)

4 --- n8n Webhook automation engine https://n8n.atlantisits.co/webhook/roofing-lead

5 --- Outputs Google Sheets + Discord + Various Telegram + Twilio

⚠️ NOTE: The Cloudflare DNS record for ai must be set to DNS Only (grey cloud). If it is Proxied (orange cloud), Vercel serverless functions will return a 502 error.

3. When to Use This Guide

  • Submitting the roofing form returns a 502 Bad Gateway error

  • Browser dev tools show POST /api/roofing-lead returning status 502

  • Vercel function logs show the request timing out

  • After a drive migration or Docker reset

  • After any changes to Cloudflare DNS records

4. Diagnose the Problem First

Before jumping to fixes, identify which cause you are dealing with.

Check A --- Cloudflare DNS Proxy Status

  1. Go to dash.cloudflare.com and log in as Srhardin@gmail.com

  2. Click on atlantisits.co domain

  3. Click DNS in the left sidebar

  4. Click Records

  5. Find the CNAME record with Name: ai

  6. Look at the Proxy Status column

What you see:

Proxy Icon Meaning Action Needed Status

Proxied Orange PROBLEM --- Vercel 502 Click to change to cloud will occur DNS Only

DNS Only Grey cloud CORRECT --- no action Move to Check B needed

Check B --- Vercel Environment Variables

  1. Go to vercel.com and log in

  2. Find the atlantis-ai project (shows ai.atlantisits.co)

  3. Click Settings > Environment Variables

  4. Verify both of these variables exist:

Variable Name Expected Value

N8N_WEBHOOK_URL https://n8n.atlantisits.co/webhook/roofing-lead

ATLANTIS_WEBHOOK_SECRET [your secret value --- should not be empty]

Check C --- Vercel Deployment & Git Connection

  1. In Vercel, open the atlantis-ai project

  2. Click the Deployments tab

  3. Confirm the latest deployment shows Ready (green) status

  4. Confirm the project is connected to GitHub repo Golboni/atlantis-ai

⚠️ NOTE: If the Git repo is not connected, Vercel will not auto-deploy when you push changes to GitHub. Connect it under Settings > Git.

Check D --- GitHub Repo Cleanliness

A nested subfolder accidentally committed to GitHub can confuse Vercel\'s build process.

  1. Go to github.com/Golboni/atlantis-ai

  2. Confirm there is NO subfolder named atlantis-ai inside the repo root

  3. The root should contain: api/, index.html, package.json, .gitignore, README.md

⚠️ NOTE: If a nested atlantis-ai subfolder exists, remove it with: git rm -r --cached atlantis-ai then commit and push.

5. Fix A --- Disable Cloudflare Proxy on ai Subdomain

This is the most common cause of the 502 after a migration. Vercel does not work correctly when traffic is routed through Cloudflare\'s proxy layer.

  1. Go to dash.cloudflare.com > atlantisits.co > DNS > Records

  2. Find the CNAME record with Name: ai

  3. Click Edit on that record

  4. Click the orange cloud icon next to Proxy Status to toggle it to grey (DNS Only)

  5. Click Save

  6. Wait 2 minutes for DNS to propagate

  7. Test the form at https://ai.atlantisits.co

💡 TIP: You only need to do this once --- the setting persists until someone changes it again.

6. Fix B --- Restore Vercel Environment Variables

If the env vars were lost during migration or the project was redeployed from scratch, you will need to re-enter them.

  1. Go to vercel.com and open the atlantis-ai project

  2. Click Settings > Environment Variables

  3. Click Add New to add each missing variable:

Variable Name Value Environments

N8N_WEBHOOK_URL https://n8n.atlantisits.co/webhook/roofing-lead Production, Preview, Development

ATLANTIS_WEBHOOK_SECRET [your secret --- check n8n workflow If: Secret Production, check node] Preview, Development

  1. Click Save for each variable

  2. Go to Deployments tab and click Redeploy on the latest deployment

  3. Wait for it to show Ready status

  4. Test the form

⚠️ NOTE: After adding env vars you MUST redeploy --- existing deployments do not automatically pick up new variables.

7. Fix C --- Remove Nested Subfolder from GitHub

If Vercel is deploying from a nested subfolder, the API routes will not be found correctly.

Run these commands in PowerShell from your D:\Data\AtlantisITS\AI folder:

cd D:\Data\AtlantisITS\AI

git rm -r --cached atlantis-ai

git commit -m \"remove nested atlantis-ai folder\"

git push origin main

Vercel will auto-deploy when it detects the push. Confirm the new deployment shows Ready.

8. Verification --- Test the Full Flow

After applying fixes, test the complete end-to-end flow:

  1. Open https://ai.atlantisits.co in your browser

  2. Fill in the roofing estimate form with test data

  3. Click Request My Free Estimate

  4. You should see a success message --- no 502 error

  5. Check Google Sheets --- a new row should appear

  6. Check Discord #roofing-leads channel --- notification should appear

  7. Check Telegram --- notification should appear

  8. Check your phone --- Twilio SMS should arrive

If the form submits but notifications do not fire, the issue is in n8n --- check the n8n workflow execution log at http://localhost:5678.

💡 TIP: Open browser Dev Tools (F12) > Network tab before submitting --- you can see the exact response from /api/roofing-lead in real time.

9. Troubleshooting

Error / Symptom Cause Fix

502 on form submit Cloudflare proxy Fix A --- set ai CNAME to enabled on ai record DNS Only

502 after fixing DNS Env vars missing in Fix B --- restore Vercel N8N_WEBHOOK_URL and ATLANTIS_WEBHOOK_SECRET

Form submits but n8n n8n tunnel down Follow HT-001 to rebuild not triggered Cloudflare Connector

Vercel deployment Nested subfolder in Fix C --- run git rm -r shows Error GitHub repo --cached atlantis-ai

Success message but n8n workflow inactive Open localhost:5678 and no notifications activate the Roofing Lead Engine workflow

530 error instead of n8n tunnel completely Follow HT-001 first, then 502 down retest

Environment variables Vars set for wrong Ensure vars are set for missing after environment Production, not just redeploy Preview

10. Quick Reference --- Key URLs & Settings

Item Value

Roofing Lead Engine https://ai.atlantisits.co URL

Vercel Project atlantis-ai.vercel.app → ai.atlantisits.co

GitHub Repo github.com/Golboni/atlantis-ai

Vercel API File api/roofing-lead.js

n8n Webhook Path /webhook/roofing-lead

n8n Public URL https://n8n.atlantisits.co

Cloudflare Login Srhardin@gmail.com → dash.cloudflare.com

ai CNAME Target bf36d2e4c77df8df.vercel-dns-... (DNS Only --- grey cloud)

Env Var: Webhook URL N8N_WEBHOOK_URL

Env Var: Secret ATLANTIS_WEBHOOK_SECRET

Document prepared by Ozzy (Claude --- Atlantis AI Automations)

atlantisits.info | HT-003 | v1.0 | March 2026