My setup is as follows:
All this is perfectly what I want, HOWEVER .....
The reason is because EC2 see the request coming from the load balancer so it assumes the base url is elb.example.com and generates all links accordingly.
How do make EC2 see the base url as example.com ?
This behavior likely results from the fact that by default CloudFront sets the Host:
HTTP request header to the origin hostname, in this case elb.example.com. The application then presumably generates links based on that hostname.
If, instead, you configure CloudFront to whitelist that header for forwarding to the origin, the Host header sent by the browser (example.com) will be sent on to the application by CloudFront, so the application should behave more like you'd expect and use that value when generating the links. With this, CloudFront still uses the origin domain name to do the DNS lookup needed in order to establish the TCP connection to the origin (the ELB in this case), but stops injecting that hostname into the HTTP request headers.
You'll find the host header under cache behavior settings -> cache based on selected request headers -> whitelist.