Vercel and Pythonanywhere | Deploy separtly frontend and backend on domain and subdomain

Question

I've been working on a project using Django as backend and React as a framework for the frontend. I've deployed this project in Pythonanywhere and it worked fine. Now, I would like to implement Next.js in my project but, unfortunately, Pythonanywhere does not support Node.js. So I decided to deploy my frontend in Vercel and let the backend in Pythonanywhere.

To achieve this, I plan to create a subdomain that handles the API request. In the domain DNS panel, each domain and subdomain respectively will point to different sites. It'd look like this:

• www.example.com (Pointing to Vercel, where the React app is hosted)
• api.example.com (Pointing to Pythonanywhere, where the backend is hosted)

I've searched about this in Google and it should work. But, here comes my question, is this the best approach or should I consider other options?

Here is a post that is related to this one. In the post, the author plans to deploy both: backend and frontend on GCP.

Thank you in advance for your time and answers!

Answer 1

The setup you described is pretty standard and it will work perfectly. All you need is to take care of the following points:

1. Make sure "www" and "@" (aka root) points to Vercel's using DNS configuration. It should be an A record to 76.76.21.21 in the root domain and a CNAME record to cname.vercel-dns.com on the "www" subdomain. Remember to redirect the domains for optimal SEO score.
2. The DNS record for api.example.com should point to the other provider. You need to check if they require an A or CNAME record. They may require additional DNS records (CAA?).
3. CORS: Notice that example.com should trigger requests to api.example.com. Your CORS configuration should account for that. CORS is a whole different discussion but I will point you in the right direction. You need to check Next.js custom headers and CORS guides.

If you face any issues on Vercel, you can contact their support channel.