Introduction

As you may have already known, without further configuration, websites’ speed is restricted by the physical distance between your end users and the location where you host your server. A common approach to solve this problem would be to add what is called content delivery network (CDN) to your website, so that there will be cache copies of your website all around the world, and your users will be able to download contents from the cache server that is closest to their location. In this tutorial we will discuss how you may add global CDN to your WordPress site that’s hosted on AWS Lightsail. The image below demonstrates the distribution diagram of your website when you have CDN. The number one in the diagram represents where you host your Lightsail instance. Number twos in the diagram represent cache servers all around the world and number threes represent your end users.

Prerequisite

Before you can continue with this tutorial, make sure you have already created a WordPress website on AWS Lightsail and registered a domain on Lightsail.

Create Distribution

On the AWS Lightsail console, navigate to the Networking tab.

Click on Create distribution

Choose your Lightsail instance as your distribution origin. This is where your CDN will pull contents from.

Select Yes, apply to use the WordPress cache behavior preset. WordPress has some default cookies that it uses internally, by enabling the WordPress cache behavior preset, this will make sure these default WordPress cookies can still function as expected.

Choose the pricing plan that fits your needs, enter a distribution name then click on Create distribution.

It will take 5 ~ 10 minutes before your distribution is ready to use.

In the meantime, let’s modify our WordPress configuration, so it will work with our distribution.

On the Lightsail console, click on Connect using SSH to open a ssh session in a browser window.

Paste in the following command to create a backup file of the wp-config.php

sudo cp /opt/bitnami/apps/wordpress/htdocs/wp-config.php /opt/bitnami/apps/wordpress/htdocs/wp-config.php.backup

Enter the following command to open the wp-config.php file with Vim

sudo vim /opt/bitnami/apps/wordpress/htdocs/wp-config.php

Press I to enter insert mode in Vim, and delete the following lines of code in the file.

define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST'] . '/');
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST'] . '/');

Add the following lines of code at the place where you deleted the two line of code.

define('WP_SITEURL', 'https://' . $_SERVER['HTTP_HOST'] . '/');
define('WP_HOME', 'https://' . $_SERVER['HTTP_HOST'] . '/');
if (isset($_SERVER['HTTP_CLOUDFRONT_FORWARDED_PROTO'])
&& $_SERVER['HTTP_CLOUDFRONT_FORWARDED_PROTO'] === 'https') {
$_SERVER['HTTPS'] = 'on';
}

Press the Esc key and type :wq! then press Enter to save and exit the file.

Enter the following command to restart the Apache service

sudo /opt/bitnami/ctlscript.sh restart apache

Close the window to terminate the SSH connection

Point Custom Domain to the Distribution

After the distribution is ready, it will by default have a domain name like xxx.cloudfront.net, but this domain name doesn’t look friendly to end users. Let’s add a custom domain to our distribution.

On the distribution page, click on the Custom domains tab then click on Create certificate.

Enter your custom domain name.

Once you click create, your certificate will be in the validating progress.

To validate the certificate, we must create CNAME records in the DNS Zone. Click on the Lightsail logo on the top left corner to return to the home page. 

Click on the Networking tab then click on the DNS Zone that you registered your domain in.

Click on Add record, select CNAME record then copy and paste Name into the Subdomain field and copy and paste Value field into the Maps to field.

Add both records to DNS Zone. 

It may take 5 ~ 10 minutes before the Lightsail pickup changes.
When Lightsail pickups your changes, the status of your certificate will become Valid, not in use.

Toggle the switch to enable custom domain.

Now let’s link the domain to our distribution.

Navigate back to the Networking tab and select the DNS zone where you registered your domain. Click on Add record, select A record and choose your distribution in the Resolves to field. Then click on the green check mark to save.

Add a second record, but this time choose CNAME record. Enter www as the subdomain and point it to your domain.

Validate Content is Served from CDN

On a new browser tab, enter your domain url to visit your site. Press F12 to open up the developer console and go to the Network tab. Look for any image of the website, and you’ll see the content is indeed served from CloudFront when you look at the via and x-cache property