Serving React App and WordPress Blog from Same Domain Using CloudFront - WordPress Admin Issues

Question

Environment

• Frontend: React Application hosted on CloudFront
• Blog: WordPress hosted on Lightsail
• Domain: Using a single domain (xyz.com) without subdomains
• CDN: AWS CloudFront

Current Setup

• Main domain (xyz.com) -> React App
• Blog path (xyz.com/blog) -> WordPress installation
• Using CloudFront behaviors to route /blog/* requests to WordPress origin

Desired Outcome

• Serve React app from the main domain (xyz.com)
• Serve WordPress blog from xyz.com/blog
• Hide the actual WordPress installation URL
• Maintain full WordPress functionality including the admin panel

Issue When setting up CloudFront behavior for /blog/* to route to WordPress origin, the WordPress admin panel functionality breaks. Specifically:

• Some internal WordPress API calls are being incorrectly routed to xyz.com instead of the WordPress installation
• The admin panel becomes partially non-functional
• Regular blog viewing works fine, but administrative functions fail

What I've Tried

1. Added CloudFront origin pointing to WordPress installation
2. Created behavior pattern for /blog/* to route to WordPress origin
3. WordPress installation is functioning correctly when accessed directly

Questions

1. How can I properly configure CloudFront to handle both React app and WordPress admin functionality?
2. What's the correct way to handle WordPress internal API calls in this setup?
3. Are there specific WordPress settings or configurations needed for this setup?

Additional Context

• Need to maintain a single domain for SEO purposes
• Want to avoid exposing actual WordPress installation URL
• Full admin functionality is crucial for content management