DEV Community 👩‍💻👨‍💻

Julie Laursen
Julie Laursen

Posted on • Updated on

Cloudflare and Terraform- Tweaking the AWS Cloud Resume Challenge Experience

I recently went through the AWS cloud resume challenge, only in the end to realize that I didn't want to do my project in SAM at all, but in terraform. For that, I wanted to try a new terraform project first with some of the same elements such as an S3 bucket, visitor counter and CI/CD.

Following this site Host a Static Website with S3 and Cloudflare , here's how I created my project with terraform:

CloudFlare

I really wanted to learn CloudFlare because it includes SSL, CDN services and DDOS protection. We also use both CloudFlare and CloudFront at work, so I wanted experience in both. CloudFront also advertises itself as easy set up and having tried both options, I'd have to agree.

Set up

First, acknowledge that you can't do this tutorial in a day. You have to wait for several steps:

  1. Cloudflare to complete their verification.
  2. When you update nameservers in AWS, the changes don't propagate immediately. AWS needs to approve these as well.
  3. Finally, you have to tell Cloudflare to poll Route 53 again for the changes.

The tutorial we're following wasn't very specific on how to include Cloudflare authorization. I started down the rabbit hole on CF-terraforming's github but it requires you to go through another tutorial on CloudFlare workers first: CloudFlare workers. That seemed a little complicated so I just did this:

provider "cloudflare" {
  #Cloudflare email saved in $CLOUDFLARE_EMAIL
  #Cloudflare api token saved in $CLOUDFLARE_API_TOKEN
}
Enter fullscreen mode Exit fullscreen mode

and then in my tfvars file (not my variable.tf file) I just instantiated

 CLOUDFLARE_API_TOKEN=<my token>
Enter fullscreen mode Exit fullscreen mode

And bob's your uncle- not only did it work, but I didn't have to worry about setting up SSL certificates and waiting for approval. I didn't have to tweak the CNAME. CloudFlare is definitely easier.

Adding Website files to your S3 bucket

It's exciting to see the 'terraform-apply' command working the first time, but don't get your hopes up by clicking on your S3 bucket yet. You'll notice that bucket is empty.

Run

aws s3 cp website/index.html s3://$(terraform output -raw website_bucket_name
)/
Enter fullscreen mode Exit fullscreen mode

and not only will you see the file uploaded to your S3 bucket, but if you go to your domain, your index.html will load.

Github Actions and Terraform

Now, to continue to update your website, you'd have to type this aws CLI command every time! How annoying. Set up a Terraform Cloud account and follow this tutorial to automate your Terraform code with Github Actions

Finishing my website

I didn't end up with lambda/dynamoDB/api gateway or a counter after all. I saw I could do everything I wanted by integrating google sheets. I created a script from my google sheets and then verified by creating a TXT record in DNS.

https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server#3-set-the-to_address-in-the-script

https://support.google.com/a/answer/7173990?hl=en

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.