amazon – How to Cache All WordPress Assets via CloudFront

Question

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.

  1. 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
  2. I start Duplicator installer in origin.example.com and set the new website URL to:

https://origin.example.com

  1. After completing the Duplicator installation, I can visit my website via https://origin.example.com
  2. Now I create a Cloudfront distribution, and set the origin to origin.example.com
  3. 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.
0
alancc 3 months 2021-09-17T20:32:30-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse