I’m utilizing Amazon Cloudfront to cache my WordPress web site, with the next steps:
- My web site is https://www.instance.com
- I take advantage of Duplicator to create a package deal for my web site.
- I launch a EC2 occasion in Amazon.
- I add the next A report in instance.com’s DNS zone:
origin.instance.com -> IP of the EC2 occasion.
- I set up a Let’s Encrypt certificates for origin.instance.com on the EC2 occasion in order that I can entry the web site through https://origin.instance.com
- I begin Duplicator installer in origin.instance.com and set the brand new web site URL to:
- After finishing the Duplicator set up, I can go to my web site through https://origin.instance.com
- Now I create a Cloudfront distribution, and set the origin to origin.instance.com
- Then I can entry the distribution through a URL like this https://xxxx.cloudfront.internet
However, through Chrome DevTools, I discover solely the webpage is retrieved from https://xxxx.cloudfront.internet, all of the property on the web page, such because the picture, css and javascript, appears to utilizing a absolute URL of https://origin.instance.com, which isn’t cached by Cloudfront.
So, for such a challenge, what can be an excellent answer?
What I can work out is:
- Change all absolutely the URLs within the theme to relative URLs, however that can be time-consuming?
- Change the WordPress Handle (URL) and Web site Handle (URL) of the web site to https://xxxx.cloudfront.internet. This appears not change all the things, I’m simply looking to see if there are extra to get replaced. However In such a case, I’ll by no means be capable to go to through https://origin.instance.com
- Use WP Rocket to set CDN and alter all static property to CDN URL, like https://xxxx.cloudfront.internet/photos/xxx.jpg, this may occasionally additionally not change all the things. I’m learning to see if that it really works.
