How to setup CloudFront to WordPress on Raspberry Pi 4

AWS
Reading Time: 5 minutes



In this site I am hosting blog which theme is vacation/airbnb.

https://airbnbfun.org/



I installed CloudFront of AWS in front of this blog site.

As you may know CloudFront is high functional cache server.

It is usually used to AWS VPC, but I applied to my own Raspberry Pi.

You are free of charge for CloudFront if your monthly transmission data is less than 1TB.
This will be very useful for personal use.

System architecture

Before

Click to expand to original size

After
– You should notice CloudFront is inserted between client and Raspberry Pi.

Click to expand to original size



My expectation is to increase performance by borrowing machine power of AWS because Raspberry Pi is low CPU power.

Create CloudFront distribution

First you need to prepare CloudFront which is called “distribution”.

Create a CloudFront distribution.

Click to expand to original size



Input origin URL.

Click to expand to original size



Origin means server whch has contents to be provided to visitor.

In previous diagram red rectangle part is origin URL.
Be careful it isn’t the URL which visitor inputs to browser.

Click to expand to original size



In my case I configured as below.

URL user inputs
 - https://airbnbfun.org
Origin
 - https://origin.airbnbfun.org

Usually they are in the same domain.

My configuration is here.
You can easily delete and create again, so be relaxed.

Click to expand to original size



Initially GET/HEAD is allowed.
In WordPress POST or other method should be used, so I configured to allow all HTTP methods.

Click to expand to original size



To be able to access by HTTPS you need to configure Alternate domain name and Custom SSL certificate but perhaps you don’t have yet.
They will be configured later.

Click to expand to original size



Distribution is created.

Click to expand to original size



Then you need to add some headers in Behaviors.
Host is needed because trick target server “Hey, I am accessing airbnbfun.org not origin.airbnbfun.org”.
And CloudFront-Forwarded-Proto is original header which is used only by CloudFront.

Click to expand to original size



Then add a few code to wp-config.php of WordPress to recognize CloudFront-Forwarded-Proto header like this.

 if (!empty($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
         $_SERVER['HTTPS'] = 'on';
+} elseif (!empty( $_SERVER['HTTP_CLOUDFRONT_FORWARDED_PROTO']) && $_SERVER['HTTP_CLOUDFRONT_FORWARDED_PROTO'] === 'https') {
+        $_SERVER['HTTPS'] = 'on';
 }

Navigate to CloudFront when browser inputs target URL

Next is to navigate visitor to CloudFront when he/she/it inputs URL airbnbfun.org

To do it we need to do 2 things.

- Configure Route53
- Forward DNS request to Route53

Configure Route53

Please configure like this.

Click to expand to original size



They are what I did.

- Create airbnbfun.org host zone
- Configure A record of airbnbfun.org to what is alias of CloudFront host name
(CNAME record is used later, so let's skip now)
- Configure A record of origin.airbnbfun.org to IP address of Raspberry Pi



Now your Route53 can process DNS request for airbnbfun.org.

Forward DNS request to Route53

Next step is to configure conventional DNS server to forward to Route53.

In my case I bought airbnbfun.org from Google Domains, so I configured Google Domains.

Each domain name servers are copied from Route53.

Click to expand to original size



Now this flow is able to be performed when visitor inputs airbnbfun.org.

Visitor inputs https://airbnbfun.org
 - Browser asks Google Domains which is DNS server of airbnbfun.org
 - Google Domains replies "Please ask Route53"
 - Browser asks Route53
 - Route53 replies CloudFront host name
 - Browser asks DNS server of CloudFront(itself?) for CloudFront host name
 - Browser gets IP address of CloudFront
 - Browser intends to communicate HTTPS communication to CloudFront

Assign SSL certificate to CloudFront

Create SSL certificate

You can easily create SSL certificate by using ACM which is included AWS.

Request a certificate.

Click to expand to original size



Request a public certificate and Next.

Click to expand to original size



Input information to be configured.
You need to include 2 domains.
– airbnbfun.org
– *.airbnbfun.org
I would recommend DNS validation because this is easy to perform.

Click to expand to original size



Certificate is created.
You can notice CNAME record is there.

Click to expand to original size



Please create CNAME record in Route53 with CNAME name/value shown in above picture like this.
– Please refer black rectangle.

Click to expand to original size



After a few minutes certificate will be verified by CNAME and available.

Assign SSL certificate to CloudFront

Please go to CloudFront distribution configuration and do followings.
– Input airbnbfun.org to Alternate domain name (CNAME).
– Select proper certificate which you created just now.

Click to expand to original size

Smoke test

Now your CloudFront should work well.

Let’s access your target server and confirm SSL certificate is issued from ACM.



Before
– Certificate is issued by Let’s Encrypt.

Click to expand to original size



After
– Certificate is issued by Amazon.

Click to expand to original size

Conclusion

How was it?

I should perform benchmarking to compare performance!

Comments

Copied title and URL