YourNote 802: Configure Cloudflare Subdomain - zhamri/CSC584-Enterprise_Programming GitHub Wiki

Configure Cloudflare Subdomain

Architecture

                 Internet
                     │
              Namecheap (Domain Registrar)
                     │
     Nameservers → Cloudflare
                     │
        DNS: example.zhamri.com
                     │
     CNAME → cname.vercel-dns.com
                     │
                 Vercel
                     │
              Your Application

Important

You do NOT need to use a Vercel IP address.

Vercel uses CNAME records for subdomains.

Step 1 - Add Your Domain to Cloudflare

If your domain is still using Namecheap DNS, first move the DNS management to Cloudflare.

  1. Login to Cloudflare
  2. Click Add Record
  3. Enter your domain
zhamri.com
  1. Cloudflare will provide two nameservers similar to:
amy.ns.cloudflare.com
john.ns.cloudflare.com
  1. Login to Namecheap
Domain List
    ↓
Domain
    ↓
Nameservers
    ↓
Custom DNS

Replace the existing Namecheap nameservers with the Cloudflare nameservers.

Wait for DNS propagation (usually 5–30 minutes, sometimes a few hours).

Step 2 - Deploy Your Application to Vercel

Deploy your application.

Example:

https://my-app.vercel.app

or

https://waqf-system.vercel.app

Verify that your application is accessible.

Step 3 - Add the Subdomain in Vercel

Go to:

Project
    ↓
Domains

Add the new domain:

example.zhamri.com

Initially, Vercel will display something like:

Needs Configuration

Vercel may provide hostname such as:

Type:
CNAME

Target:
cname.vercel-dns.com

Always use the hostname provided by Vercel.

Step 4 - Create the DNS Record in Cloudflare

Go to:

Cloudflare
    ↓
DNS
    ↓
Records

Add a new record.

Field Value
Type CNAME
Name example
Target cname.vercel-dns.com
TTL Auto

Step 5 - Proxy Status

Cloudflare offers two options.

DNS Only

⚪ DNS Only

Recommended while configuring Vercel.

Proxied

🟠 Proxied

After everything is working correctly, you can switch to Proxied to enable:

  • Cloudflare CDN
  • SSL
  • Web Application Firewall (WAF)
  • DDoS Protection
  • Caching

Step 6 - Verify in Vercel

Return to:

Project
    ↓
Domains

The status should change from:

Needs Configuration

to

Valid Configuration

Step 7 - Test the Subdomain

Open:

https://example.zhamri.com

Your Vercel application should load successfully.

Example Cloudflare DNS Configuration

Suppose you have:

Your Cloudflare DNS could look like this.

Type Name Target
A @ 123.45.67.89 (DigitalOcean)
CNAME www @
CNAME example cname.vercel-dns.com
A api 123.45.67.89

Result

zhamri.com
        │
        └── DigitalOcean

www.zhamri.com
        │
        └── DigitalOcean

api.zhamri.com
        │
        └── DigitalOcean

example.zhamri.com
        │
        └── Vercel

This allows one domain to host applications across multiple platforms.

Example Architecture

                    Namecheap
                (Domain Registrar)
                        │
                        ▼
                  Cloudflare DNS
                        │
        ┌───────────────┼────────────────┐
        │               │                │
        ▼               ▼                ▼
 DigitalOcean      DigitalOcean      Vercel
     Nginx             Nginx
        │               │                │
        ▼               ▼                ▼
 zhamri.com      api.zhamri.com   example.zhamri.com

Real-World Example

For a typical Angular + Spring Boot deployment:

DigitalOcean
    │
    ├── api.zhamri.com
    ├── admin.zhamri.com
    └── zhamri.com

Vercel
    │
    ├── app.zhamri.com
    ├── demo.zhamri.com
    ├── test.zhamri.com
    └── example.zhamri.com

Everything is managed from Cloudflare DNS.

There is no need to configure Nginx for any subdomain that points directly to Vercel.

Summary

Component Responsibility
Namecheap Domain registration
Cloudflare DNS management, SSL, CDN, WAF
Vercel Frontend hosting (Angular, React, Next.js, Vue, etc.)
DigitalOcean + Nginx Backend APIs, Spring Boot services, databases, reverse proxy

This architecture is scalable, easy to maintain, and commonly used in production environments.