How To Use CloudFront with WordPress

What is CloudFront:

“Amazon CloudFront is a content delivery network operated by Amazon Web Services. Content delivery networks provide a globally-distributed network of proxy servers that cache content, such as web videos or other bulky media, more locally to consumers, thus improving access speed for downloading the content.” -Wikipedia

I made this tutorial to address some of the issues I ran into and how to solve them and for anyone who wants to set up CloudFront for their site. When using Elementor, which is a popular WordPress Editor I ran into a list of issues just getting my site to work. All of these were caused by a CloudFront Caching my /wp-admin/path. and missing the need for an authorization header on the entire site.

Step 1

To start off let head the Certificate Manager Provision of the SSL/TLS Certificate for the domain needed. MAKE SURE YOUR CERTIFICATE IS IN US East (N. Virginia)us-east-1. CloudFront only accepts certs from this region. If you already have one you can pass this step. Make sure however your Certificate has “yourdomain.com” and for additional domains “*.yourdoman.com”. This will allow you to attach your S3 Bucket for static photos for origin “media.yourdomain.com” Your main origin used for WordPress will be either “www.yourdomain.com or yourdomain.com” (also if you are offloading your images to S3 using a CNAME like media.yourdomain.com is worth including)

Step 2

Now create a CNAME in Route53 for this domain. If you have no idea how to do this I want to check out Stephane Maarek’s AWS Route 53 Tutorial.

When your status changes to Issued, you’ll need to navigate to CloudFront.

Please note most of my setting I’m showing are not in the exact order as setting up a new CloudFront Distribution.

Step 3

Navigate to Create Origin.

Origin Domain: Your ALB or EC2 Instance for WordPress

Protocol : Match View (or HTTPS)
Ports: HTTP:80, HTTPS:443
Min Origin SSL protocol TLSv1.1
Origin Path: N/A
Name: auto filled for ALB/EC2
Headers:

Enable Origin Shield: Not needed

Default cache behavior: Default(*) Reference Cache Behaviors chart below.

Settings:
Price class: Use all edge locations
Custom SSL Certificate: Select the Cert you created in Step 1
Logging – Optional
IPv6: Off

Step 4

Necessary CloudFront Behaviors.

Default (*)	GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE (Cache HTTP methods : OPTIONS)	Legacy cache settings => Headers: Authorization, Origin, Referer, Host	Query strings : All	Cookies => Choose which cookies to include in the cache key. => Include specified cookies => Allow => Name of the cookie: wordpress_, wordpress_test_cookie, comment_author, comment_author_email_, comment_author_url_, wp-settings, wordpress_logged_in_, _ga, _gat, _gid
/wp-admin/*	GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE (Cache HTTP methods : OPTIONS)	Legacy cache settings => Headers: All, Query strings: All	Query strings: All	Cookies: All
/wp-login.php	GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE (Cache HTTP methods : OPTIONS)	INFO	Query strings: All	Cookies => Choose which cookies to include in the cache key. => Include specified cookies => Allow => Name of the cookie: wordpress_, wordpress_test_cookie, comment_author, comment_author_email_, comment_author_url_, wp-settings, wordpress_logged_in_
/wp-includes/*	GET, HEAD, OPTIONS, (Cache HTTP methods : OPTIONS)	Legacy cache settings => Headers: Origin, Access-Control-Request-Method, Access-Control-Request-Headers, Referer, Host	Query strings : None	Cookies => Choose which cookies to include in the cache key. => Include specified cookies => Allow => Name of the cookie: None
/wp-content/*	GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE (Cache HTTP methods : OPTIONS)	Legacy cache settings => Headers: Origin, Access-Control-Request-Method, Access-Control-Request-Headers, Referer, Host	Query strings : None	Cookies => Choose which cookies to include in the cache key. => Include specified cookies => Allow => Name of the cookie: None