Cloudfront with Application Load balancer

I have used AWS application load balancer for my domain and it is serving properly. However, I want to add caching layer for my website, but when I try to use Cloudfront for the same it gives me 502 error. I have followed aws blogs but unable to resolve the issue. please find attached images for my cloudfront distribution.