Combining AWS Serverless with CloudFlare Sub Domains

“TLDR”
A quick article on how to connect your AWS resources to your Cloudflare system. The AWS services in question are API Gateway and S3. The way you can connect these two services is by using AWS cloudfront and running cloudflare in strict SSL with CNAME settings pointing to your cloudflare distribution.
Photo by rawpixel on Unsplash

Introduction

I am Bob Thomas(24) and currently I am a freelancing software engineer in the web development field. I have been working in web development since I was 18 and have been involved with deploying and building web shops for companies like T-Mobile and KPN. In my free time I build weird IoT projects like skateboards that measure your jump height and keep track of them in a scoreboard.

A couple of months ago I joined a project named KYD and started learning about AWS and serverless. This was all completely new to me and with many hurdles. One of those hurdles was combining our Cloudflare setup with the AWS endpoints for S3 and API Gateway. After quite a lot of googling and reading multiple examples and combining them I arrived at a workable solution. In this Article I will tell you about my findings and how to implement it yourself.

Cloudflare

I am assuming that my readers have experience with Cloudflare and what services they provide. The most important steps in enabling CloudFlare to work with AWS is the crypto settings and in particular the SSL settings. AWS requires your connections to always be https and contain valid certificates.

To be able to use the Full (strict) setting you need to provide the connecting servers with a Cloudflare origin certificate.
https://support.cloudflare.com/hc/en-us/articles/115000479507
This will generate an Origin CA and a private key you will need those two later on so keep them somewhere safe and secure.

After you have generated the certificate you will need to add them to any of your other webservers that your Cloudflare is using for example Nginx or Apache webserver. You will need the previously generated CA and private key for this. You will also need to add the Origin CA chain authority to your webserver.

Origin CA chain authority
https://support.cloudflare.com/hc/en-us/articles/218689638-What-are-the-root-certificate-authorities-CAs-used-with-Cloudflare-Origin-CA-

Nginx
http://nginx.org/en/docs/http/configuring_https_servers.html

Apache
https://access.redhat.com/solutions/43575

Once you have done this you update the SSL settings on Cloudflare to be strict.

This will force all your connected services to provide their own Origin CA and only allow SSl protected connections, and will allow our upcoming AWS services to connect with the Cloudflare DNS.

AWS

So now we have set up our Cloudflare system we can continue on setting up our AWS environment. One of the most important steps is generating a AWS ACM certificate. You will need to generate this certificate on the us-east-1 region since the certificate will need to be globally available for the API Gateway. To create a certificate you will need to go to https://console.aws.amazon.com/acm/home?region=us-east-1#/, then you click on “Import a certificate” and you will be greeted with the underlying screen.

For the certificate body you will enter the Origin CA you created in Cloudflare and for the private key you will use the private key you generated in Cloudflare as well. For the final input you will need to add the Origin CA chain authority. After those steps you can review and import it, it will take around 40 minutes for the certificate activate so you can use it in the rest of your AWS infrastructure.

API Gateway

So now we are going to generate a cloudfront distribution for our API. This is all done using the API Gateway console and only takes a couple of steps and is actually quite simple.

1: Creating a custom domain
For the first step you will need to create a custom domain inside the API console. You do this by clicking on custom domains and clicking “create custom domain”. For the domain name you need to fill in your domain name that you will use on Cloudflare and falls under your Cloudflare certificate. You need to use the edge optimized configuration since we want to use the global certificates. For certificate you choose your newly created certificate and press create.

2: Mapping
After you have created the custom domain name it will take 40 minutes to get activated. You can already see the cloudfront domain taking shape underneath “Target Domain Name”. This value you will eventually add to your CNAME in the DNS panel of Cloudflare.

To enable the “Custom domain” to make use of the actual API resource you need to add a path mapping. You can do this by clicking “edit” underneath the mapping and adding a new mapping. Then you choose the path it should be for example “/” for blog-test.io to be directed to the API or “/v1/api” for blog-test.io/v1/api to direct to the API. For this example we will use the “/” path the next step is selecting the API you want to add you can do this by using the dropdown underneath destination and then select the stage you want to use.

3: Connecting to Cloudflare
For the final step we will connect the API to the Cloudflare DNS. The only thing you need for this step is the cloudfront distribution name. For this example the distribution name is “dbj52nopz8640.cloudfront.net”. Go to the Cloudflare DNS panel and add a new CNAME record with the name of the domain and the value of the cloudfront distribution.

Et voila your API is connected to your cloudflare DNS and available at “api.example.io”

S3

So now we have our API up and running at “api.example.io” but we also want to host a frontend on “platform.example.io”. To do this we will need to create a cloudfront distribution just like what API gateway did behind the scenes but now we create it ourselves. Luckily AWS made it quite easy to attach a S3 bucket to a cloudfront distribution so in the end you will need about 3 steps to complete it.

1: Creating a cloudfront distribution
For this example we already have a S3 bucket ready to go called platform.example.io-bucket which contains our frontend. Go to your cloudfront control panel at https://console.aws.amazon.com/cloudfront
and click create distribution. Choose the web option and continue, you will now see a plethora of input fields with different meanings. For the sake of simplicity I will show you my final configuration in a screenshot. The origin settings you need to put your bucket name as the domain name you can start typing the bucket and it will try to auto complete the name.

Cloudfront origin settings

For “Default Cache Behavior Settings” you can play with it yourself and decide what is handy for your own needs. They don’t really have an impact on the actual connection we are trying to make. The next important step is filling in the “Distribution Settings”.

Distribution settings

In the alternate domain name input you add your full domain name you are going to use on the DNS and choose custom SSL certificate. Choose the certificate you are using for our Cloudflare connection. As final important step add index.html as your default root object. This will make sure it will actually serve the index file when browsing to platform.example.io. The rest of the settings are not well-known to me but feel free to tinker around and explore.

2: Connecting it to Cloudflare
Just as with API gateway the actual connection is quite easy it’s just adding a CNAME to your DNS that points to the cloudfront distribution like we did in the API connection. You can find the cloudfront distribution name under domain name after you finished creating it. Activating the distribution will take around 40 minutes but you can add the connection in Cloudflare beforehand.

And those are all the steps of adding a S3 bucket to your cloudflare DNS

Closing arguments

Thinking about my closing arguments and how I wrote this article I am not really satisfied with the outcome mostly because this is my first blog post that I wrote piece by piece over several weeks and it started to feel like a chore instead of something I really like doing. It was also quite difficult to explain the AWS console without pictures but adding pictures also really messes with the readability but it’s pretty decent. Anyway I hope this article helps some people with setting up their AWS and Cloudflare connections feel free to leave questions and suggestions in the comment section

Sources