How to Cache All WordPress Assets via CloudFront

I am using Amazon Cloudfront to cache my WordPress site, with the following steps:

1. My site is https://www.example.com
2. I use Duplicator to create a package for my site.
3. I launch a EC2 instance in Amazon.
4. I add the following A record in example.com's DNS zone:

origin.example.com - IP of the EC2 instance.

5. I install a Let's Encrypt certificate for origin.example.com on the EC2 instance so that I can access the website via https://origin.example.com
6. I start Duplicator installer in origin.example.com and set the new website URL to:

https://origin.example.com

7. After completing the Duplicator installation, I can visit my website via https://origin.example.com
8. Now I create a Cloudfront distribution, and set the origin to origin.example.com
9. Then I can access the distribution via a URL like this https://xxxx.cloudfront.net

But, via Chrome DevTools, I find only the webpage is retrieved from https://xxxx.cloudfront.net, all the assets on the page, such as the image, css and javascript, seems to using a absolute URL of https://origin.example.com, which is not cached by Cloudfront.

So, for such a issue, what will be a good solution?

What I can figure out is:

1. Change all the absolute URLs in the theme to relative URLs, but that will be time-consuming?
2. Change the WordPress Address (URL) and Site Address (URL) of the website to https://xxxx.cloudfront.net. This seems not change everything, I am just searching to see if there are more to be replaced. But In such a case, I will never be able to visit via https://origin.example.com
3. Use WP Rocket to set CDN and change all static assets to CDN URL, like https://xxxx.cloudfront.net/images/xxx.jpg, this may also not change everything. I am studying to see if that it works.