RML for Amazon S3 & CloudFront plugin comes with an Assets module that allows you to rewrite URLs of your wordpress theme and plugins scripts, fonts and stylesheets in order to serve them with CloudFront or any other CDN. In order to use this module, you will need to enter the host of a CDN that is configured to pull assets from your website in the following settings.
Here is how to create such a host with a CloudFront distribution. You will have the option to set it up to use your own domain name (like assets.yourdomain.com) or the default CloudFront distribution domain name (dxxxxxxxxxxxxx.cloudfront.net). Note: even if you have a CloudFront distribution configured already to serve your S3 bucket content you still need to create a new distribution like this guide explains for your assets to be served properly.
Before you start, if you are using the part of this tutorial to set your own domain name, make sure you have an idea on how to add CNAME records with your DNS provider. It is quite simple, but varies for every provider. It should be however very well documented by your DNS provider. So, if you do not know how to do that at this moment, it is a good idea to find the documentation from your DNS provider on that matter and keep it around for when you need it.
So here is how to proceed:
- Login to your AWS account online as you would normally do
- Access your CloudFront Console and click on Create distribution
- For delivery method, use Web. So, click on Get Started in the Web section
- Now, setup the Distribution Origin Settings. You can keep all fields to default value except for the following:
- For Origin Domain Name, enter your website domain.
- For Origin Protocol Policy, select Match Viewer
- Next, scroll down to Default Cache Behavior Settings. And set the following fields:
- For Query String Forwarding and Caching, select Forward all, cache based on all.
- For Compress Objects Automatically, select Yes
- Now, you may decide to set your own domain to access your distribution content. It is optional, but it is a good practice, specially for SEO, to use a subdomain of your site domain to refer to your CloudFront distribution. If you do not want to set that up, you can keep the default settings for now and scroll down to click on Create Distribution as shown in step 7 and then skip to step 17. If you wish to proceed, scroll to Distribution Settings section and take the following actions:
- For Alternate Domain Names(CNAMEs), enter the subdomain you wish to use. For example, you can use assets.yourdomain.com, cdn.yourdomain.com or any other subdomain that you wish.
- Then click on the button Request or import a Certificate with ACM. A new browser tab will open at the Request a certificate screen
- Before proceeding with the new tab to request a certificate, get back to your original Distribution Creation tab, scroll down and click on Create Distribution. Take note of the distribution domain name that is generated (dxxxxxxxxxxxxx.cloudfront.net). You will need it at step 12.2 and you may use it directly at step 18 it you do not wish to use create your own domain. Also, since the certificate creation process can take some time, it is safe to save the distribution at this point.
- Now access the Request a certificate screen that opens after you clicked on the Request or import a Certificate with ACM button. If you lost that screen, you can access it via the ACM console, click on Request a certificate, then select public certificate and again on Request certificate. Insert your domain name with a wildcard as subdomain like *.yourdomain.com. Then. click Next
- For validation method, you can choose what is easiest for you. DNS validation option will direct you to add a CNAME record to your DNS, while Email validation will proceed with an email validation to emails officially registered to this domain name. This tutorial use the DNS validation option, since it is slightly quicker option.
- Then, Review your choices and click Confirm and request
- For DNS validation, click on the toggle arrow, to discover the CNAME record name and value you need to add to your DNS configuration and keep the name and value handy.
- At this point you will need to log in to your DNS provider to add two CNAME records.
- Add CNAME with name and value provided for the DNS validation
- Add another CNAME record for the subdomain you entered at step 6.1. In this case name will be assets and the value will be your CloudFront distribution domain name that you got at step 7.
- Go back to the Validation process and click Continue
- Now you will need to wait a certain time for your new DNS to be populated. It usually take about 5-15 minutes, but it can take up to 24 hours depending on your DNS provider settings. You can click the refresh after 5-15 minutes to see when your certificate is status is Issued
- When your certificate is Issued. Go back to your CloudFront Console, find the distribution that you created earlier at step 7. Click on the distribution ID and then Edit under the General tab.
- Now, select Custom SSL certificate and click on the text input. the certificate that you just created should appear for you to select it.
- Scroll down, and click Yes, Edit.
- At this point, you need to wait that the status of your distribution switch from In Progress to Deployed. This normally takes 5-15 minutes.
- Finally, now that your distribution is deployed. Go back to your Remote Library – Assets CDN settings metabox to enter the CDN host you configured. You can enter you distribution domain name (https://dxxxxxxxxxxxxx.cloudfront.net) or the subdomain you entered at step 6.1 and 12.2. Do not forget to add the HTTPS protocol prefix. After you enter your CDN host, a verification will be made. Then you can select Enable to allow the module to rewrite the URLs of site scripts, fonts and stylesheets to be serve by your CDN. Well done!