DEV Community

Andreas Niss*
Andreas Niss*

Posted on • Edited on

Cloud Resume on AWS

Background

I'm pursuing the Cloud Resume Challenge on AWS

Purpose

I love technology and currently work as a Senior PM. I want to advance my understanding of AWS by building projects instead of just learning from tutorials. Using the Cloud Resume challenge, I want to learn more about S3, CloudFront, Route 53 and databases on AWS with the goal to have hands-on experience and be better prepared for a more tech focused role and passing the AWS SA certificate.

Experience for each building block

Part 1: Static website hosting

A: Create website with CSS

Use GenAI to help me with template generation and build very basic website and saved as index.html, styles.css and for error handling a page called 404.html

B: Upload the files on S3 (simple website hosting)

  1. Create a S3 bucket (arn:aws:s3:::www.anissen.net) and upload all files
  2. Adjust properties to allow "static website hosting" with hosting type: "bucket hosting"
  3. Adjust permissions: turn "block public access" to OFF
  4. Adjust permission: add bucket policy to allow action "s3.getObject"

Helpful Tutorial: Configuring a static website on Amazon S3

Result: AWS region specific website endpoint, link to access website found in Bucket under properties at the end of the page with start of the URL being the bucket name
http://www.anissen.net.s3-website-us-east-1.amazonaws.com

C: Created a different bucket without direct access to internet and use Route 53 for custom domain and access the website via CloudFront

End to end YT tutorial

New private S3 bucket

  1. I uploaded all files to another bucket (arn:aws:s3:::resume.challenge.anissen2)
  2. Adjust properties to allow "static website hosting" with hosting type: "bucket hosting"
  3. Adjust permissions: leave "block public access" to ON
  4. Adjust permissions: add bucket policy which allows access to service CloudFront

CloudFront

Useful tutorials:

Enable HTTPS on CloudFront
Host static website on CloudFront
Webiste Hosting with custom domain walkthrough

Use Route 53 to route to CloudFront: https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/routing-to-cloudfront-distribution.html
-> first need to request a certificate:

Result: Access to private S3 bucket HTML page via https://d3q2tesdwm4f6.cloudfront.net/

Route 53 and AWS Certificate Manager

  1. Purchased and registered domain anissen.net
  2. I set everything up already within CloudFront, but could not access via domain (I assume needs 1/2 day that domain is registered with all relevant DNS and spend a lot of time troubleshooting, although it was already correctly set up)
  3. Request a (SSL) certificate for the domain via AWS Certificate Manager and create a record in Route 53 for the domain with Type CNAME

Tutorial: Certificate for Cloudfront

  1. In Route 53 under the hosted zone, add one more record to with type A to route traffic to the CloudFront generated before.
    You will have at least 4 records in Route 53:
    i) Record Type NS (auto created when domain was created through Route 53)
    ii) Record Type SOA (auto created when domain was created through Route
    iii) Record Type A (which routes traffic to CloudFront)

  2. Add alternate domain name in CloudFront under General > Settings to "anissen.net"
    Result: When opening anissen.net in browser, the user is redirected via Route 53 and the SSL certificate to a HTTPS URL accessing the static website hosted in S3 through CloudFront.

I want to have customer open website under www.anissen.net and anissen.net

I realized that one can only attach one custom domain with certificate to Cloudfront. So I needed to created a second CF distribution and attach a certificate for www.anissen.net to this distribution and add this type a record to Route 53.

Image description

Top comments (0)