Cloudflare DevelopersCD
Cloudflare Developers•2y ago
w3bcode

How to add custom hostname for multi tenant application with cloudflare pages ?

In order to have multi tenant support for cloudflare pages I followed this steps.

Step 1:
Deploy the application to cloudflare pages and set custom domain app.mycompany.com

Step 2:
Wrote a simple cloudflare worker proxy

// src/index.ts
var src_default = {
  async fetch(request, env, ctx) {
    
    const newRequest = new Request(request);
    let url = new URL(request.url);

    newRequest.headers.set("x-company-id", url.hostname)
    
    url.hostname = 'app.mycompany.com';
    

    return fetch(url.toString(), newRequest)
  }
};
export {
  src_default as default
};
//# sourceMappingURL=index.js.map


Step 3:
Added the worker route as on different domain mycompany.site

*.mycompany.site/*

I chose a seperate domain for multi tenant apps, so that its easier to maintain the CNAME if later on I wanted to add subdomains to my primary domain mycompany.com

Another reason was that having a seperate domain makes it easier to have a proxy worker route for only purpose of multitenant.

( Please do suggest if there is a better approach, if I could use the existing domain for this)


Now From this step onwards, things are getting a little of confusing to me

Step 4:
I added a wildcard record to mycompany.site DNS

AAAA * 100:: Proxied

Step 5:
Enabled Custom Hostnames for mycompany.site

Step 6:
Added custom hostname example.com

Step 7:
I didnt understand this part
image.png
Was this page helpful?