Issue
I want to configure a CloudFront distribution to use my Heroku application as its Origin, but am not sure how.
Resolution
Start by creating a new web CloudFront distribution from your AWS web console.
Under the Origin Settings area, enter the domain you want CloudFront to use when making requests to your application in the "Origin Domain Name" field. This can be a Custom Domain you've added or the default herokuapp.com domain for your application. We recommend using a Custom Domain like origin.your-domain.com for this.
If you're using Heroku SSL, it's important to note that you do not want to use the herokudns.com domain here. Rather, use the Custom Domain you've added and configured to point to the herokussl.com or herokudns.com domain via a CNAME record.
After adding the domain, tab to the next field and some new options will appear. If you're using SSL, then change the "Origin Protocol Policy" to "HTTPS Only" otherwise leave it set to "HTTP Only". You can leave the other options as-is.
Under the Distribution Settings area, change the Supported HTTP Versions option to "HTTP/1.1, HTTP/1.0" (Heroku doesn't currently support HTTP/2).
Depending upon how you're using CloudFront, you may want to specify a custom URL to fetch cached content from rather than the default *.cloudfront.net domain. If so, then you need to specify the domain you want to use in the "Alternate Domain Names (CNAMEs)" field. This domain should be different from any of the domains you've added to your Heroku application and should be configured as a CNAME to the *.cloudfront.net domain.
If you use an alternate domain and want to allow connections over SSL to this domain, you'll need to specify an SSL certificate for CloudFront to serve. Choose the "Custom SSL Certificate" option under "SSL Certificate". If the option is grayed out, then that just means you have yet to upload an SSL certificate. To import a certificate, browse to the AWS Certificate Manager – don't click the "Request or Import a Certificate with ACM" button (that takes you to a form specifically for requesting a new SSL certificate and doesn't provide you with an option to upload an existing certificate) – and add your SSL certificate there. Once you've done that, go back to the distribution creation page and choose that certificate from the dropdown.
There may be other adjustments you'll like to make, but the above are the only settings required to get CloudFront pulling content from your application.