How to apply the CDN Cloudfront LightSail

I searched various methods because I couldn’t find satisfactory speed after checking the speed of the site, but the most recommended one was CDN. So we decided to apply AWS Cloudfront because we use light sale.

It was the same when I installed the wordpress. It was my first time to search various postings. It took a long time. For those of you who want to apply CDN to optimize the website, I’ll summarize the methods I did.

The settings I made are not absolute because there are various options. So in order to set it up according to your environment, please search and apply it additionally with my explanation.

1. Create Cloudfront

cdn

Since we made WordPress with a light sale, you might want to do it in one place rather than other CDN services. That’s why I started using Cloudfront.

First, when you enter Cloudfront from AWS service, there is a Create Distribution button at the top, and you can click it.

cdn

There are two choices on the next screen, and you can choose Web here. If you look at the phrase here, you can see why you choose this.

  • Speed deployment of static and dynamic content (ex: html, css, php, image files)
  • Use HTTP or HTTPS to distribute media files.
  • Add, update, or delete objects and submit data from the Web form.
  • Stream events in real time using real-time streaming.

Save the file to one of the Amazon S3 buckets or Web servers. You should look at this phrase carefully, but it’s a web server, not an S3, because we’re using a light sale.

You’ll be setting up Cloudfront based on this, so if you’re using an S3 bucket to save your files, you’ll need to set it up differently. I’ll explain based on the light sale.

cdn

When you press the Get Started button, you will see the setup screen, where you can enter your WordPress address in the Origin Domain Name and the Origin ID will automatically appear as Custom as shown above.

Then, if you are using HTTPS, you can check with HTTPS Only.

cdn

Then, select “Get, HEAD, OPTIONS” in the settings and check OPTIONS in the Cached HTTP methods.

Then, select Whitelist from Cache Based on Selected, select Origin on the left and press the Add button to add it. The reason for doing this is to solve the CORS error that occurs later, and I will explain this part below.

cdn

It was the most difficult part when I did it with the Distribution Settings setting. The reason is that Custom SSL Certificate is not active, so it took time to search, but you can create a certificate by pressing the Request or import a certificate with ACM button right below.

When you create and refresh a certificate in AWS Certificate Manager, the Custom SSL Certificate check is enabled and you can select the certificate that you created when you click on a blank space. – View official description

I left the bottom part as it is, so if you want to set it up for yourself, please check the official explanation and set it up.

2. Add Record

cdn

Once you have finished setting up Cloudfront, deployment will begin and you will see the Domain Name shown above. You can copy this, but the reason is to connect it to the light sale.

cdn

Now, after you go to the light sale, press the top networking menu and click the three-point icon in the DNS area to enter management.

cdn

When you enter DNS record management, there is an Add Record button at the top, click and then add cdn the subdomain to the mapping that you copied from Cloudfront.

3. Cloudfront CNAME

cdn

Now that DNS record setting is complete, if you come into Cloudfront and click on the blue ID in the list, you’ll see a place where you can change the existing setting, you can click the Edit button in General.

cdn

Then cdn to Alternate Domain Names.You can enter your own address. This will connect the light sale to Cloudfront.

4. CDN Settings

cdn

Now you have to apply it to WordPress, but most cache plug-ins have CDN settings, so you enter CDN Url and Origin Url and choose which files to distribute, and the whole process is over.

5. CORS Error

When I apply CDN and open the site, the icon breaks down, so I looked for foreign bulletin boards and modified them. However, I was able to solve it by finding one way to give up even though it didn’t work out properly.

cdn

This was resolved when creating an S3 bucket and creating a CORS configuration in privileges. If the icon breaks after applying CDN like me, please paste the code below into the CORS configuration.

<?xml version=”1.0″ encoding=”UTF-8″?>

<CORSConfiguration xmlns=”http://s3.amazonaws.com/doc/2006-03-01/”>

<CORSRule>

    <AllowedOrigin>*</AllowedOrigin>

    <AllowedMethod>GET</AllowedMethod>

    <MaxAgeSeconds>3000</MaxAgeSeconds>

    <AllowedHeader>Authorization</AllowedHeader>

</CORSRule>

</CORSConfiguration>

I’ve introduced you how to apply CDN to light sales using Cloudfront until now, but I’m not an expert, so there will be some deficiencies. So, just refer to the above and search additionally to set it up according to your environment.

I hope it will help those who set it up with difficulty like me.

▶ How to resolve GTmetrix fa-solid-900 errors

▶ Create GTranslate plugin translation page

▶ Delete old posts using WP phpMyAdmin

Leave a Comment

Your email address will not be published.