Add (Cloudfront) CDN Distribution to WordPress Application hosted on Amazon Lightsail
Tags: aws, wordpress, cloud, beginners
Published: 2022-05-10 12:15:16

It's not very hard to add CDN Distribution to a WordPress app hosted on Amazon Lightsail. But if you are new, it can be cumbersome. This article is to demonstrate how to do it easily. 

## Why Should I use CDN distribution?
You might hear about Content Delivery Network (CDN). If not, here is an article explaining "[what is CDN?](https://www.cloudflare.com/en-gb/learning/cdn/what-is-a-cdn/)". 

If you are not interested to read a long article, here is TL;DR: 
In CDN, Lots of small servers run closer to your customer. Content gets cached there and served from the closer server(s) of your customer. In that way, ease the pressure from the main servers. 

## What is CDN Distribution?
It is the Amazon Lightsail CDN service. Under the hood, it uses Amazon Cloudfront. It has 300+ points of presence to deliver content closer to your customers. On top of that, it comes with AWS Shield, which protects infrastructure from DDoS attacks. 

Are you excited to create your first CDN Distribution? Let's go 🏃‍♂️

## Prerequisites 

### WordPress Application

You need to have an existing WordPress application for this tutorial. Don't worry if you don't have one. I covered How to **[Deploy WordPress Application to Amazon Lightsail](https://blog.harun.dev/deploy-wordpress-app-to-amazon-lightsail)** in the first part of this series. 

### Attach a Static IP to WordPress Instance

1. Go to the **Networking** tab  and then click on **Create static IP**
![Create static IP on Amazon Lightsail](https://cdn.hashnode.com/res/hashnode/image/upload/v1652105796032/ZIYg4ZWz8.png)

2. (A) Select the WP App instance. (B) Give it a meaningful name and (C) Hit **Create**.
![Create static IP on Amazon Lightsail 2](https://cdn.hashnode.com/res/hashnode/image/upload/v1652106216696/ZDKxefs2H.png)

Now we are ready to create our first distributions.

## Create CDN Distribution 

1. Go to [home page](https://lightsail.aws.amazon.com/ls/webapp/home/networking) of Lightsail. Go to **Network** tab again. This time hit the **Create distribution** button. 
![Create CDN Distribution on Amazon Lightsail](https://cdn.hashnode.com/res/hashnode/image/upload/v1652106732159/UaCC5eSiv.png)

2. Select the WordPress Instance as Origin 
![Amazon Lightsail CDN Distribution Origin](https://cdn.hashnode.com/res/hashnode/image/upload/v1652106891069/W12TgIi-k.png)

3. Hit **Yes, apply** to apply the predefined WordPress settings
![Amazon Lightsail CDN Distribution WordPress](https://cdn.hashnode.com/res/hashnode/image/upload/v1652107873667/piEvwljg1.png)

4. Now, (A) choose a plan. (B) Give it a name and (C) Hit **Create Distribution** button
![CleanShot 2022-05-09 at 20.37.34@2x.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1652107795929/Sf65bVVmN.png)

Woohoo 🎉 Your first distribution is created. Wait for a while to be available. After getting done, you will see this 👇 
![Amazon Lightsail CDN Cloudfront Distribution ](https://cdn.hashnode.com/res/hashnode/image/upload/v1652108794268/3BeQBMUzu.png)
(A) Your domain for the distribution. You can access the site using this URL.

## Domain

### Update the Domain in DB
Login to your WordPress application's database, you may follow [this](https://blog.harun.dev/deploy-wordpress-app-to-amazon-lightsail#heading-import-database). Update the `siteurl` and `home` to your `wp_options` table to your distribution domain. 

## Bonus

1. You can use a custom domain instead of CloudFront's sub-domain. You may follow [this tutorial](https://lightsail.aws.amazon.com/ls/docs/en_us/articles/amazon-lightsail-enabling-distribution-custom-domains).

2. You can add Object Storage to your WordPress app with a CDN distribution by following [this tutorial](https://aws.amazon.com/getting-started/hands-on/object-storage-cdn/).

## Conclusion

Hope you enjoyed this simple article and created your first CDN distribution. Ask your questions in the comment. Subscribe to get the next blog post. Thanks 🙏