aws
• Markdown

cloudfront

Steps to Deploy a Static Website on Amazon AWS

DNS Configuration Advice

  • On Mac: Network > Advanced > DNS > Change to 1.1.1.1
  • Keep switching if it doesn't work. Change to 8.8.8.8

Purchase a Domain Name

  • Use Namecheap to buy a domain.

Create a Certificate

  • Use AWS Certificate Manager in the North Virginia region.
  • Request a certificate for your domain:
  • Add both naked domain (e.g., domain.xyz) and wildcard (e.g., *.domain.xyz).
  • Validate the certificate via DNS in Namecheap.
  • Do this before setting the Route 53 hosted zone.
  • Make sure to only copy the part before the dot eg. _35bc762465a76a1641eafbadef765ce2.ecoseafresh.com, take only the _35bc762465a76a1641eafbadef765ce2 part.
  • In Namecheap, go to advanced DNS, make a new CNAME Record under Host Record, paste _35bc762465a76a1641eafbadef765ce2 in Host and CNAME Value from certificate manager, eg. _3e6903d02c2e4abac7fa2a4d63f341c4.sdgjtdhdhz.acm-validations.aws, in Value.
  • Wait until AWS Certificate Manager validates the certificate.

Configure Route 53

  • Create a hosted zone for your domain in Route 53.
  • Update Namecheap to use AWS DNS servers, ie. update the nameservers in Namecheap to the ones in Route 53.

Create an S3 Bucket

  • Create an S3 bucket with your domain name.
  • Upload your website files to the S3 bucket.

Set Up CloudFront

  • Create a CloudFront distribution pointing to the S3 bucket.
  • Restrict bucket access and enable HTTPS.
  • Use a custom SSL certificate.
  • Specify the default root object (e.g., index.html).

Create a Redirect for Naked Domain

  • Create a second S3 bucket for the naked domain.
  • Configure it for static website hosting to redirect to the www subdomain.
  • Create another CloudFront distribution for this redirect bucket.

Finalize Route 53 Configuration

  • Add a record in Route 53 to point the naked domain to the CloudFront distribution.
  • Ensure alternate domain names has www in cloufront.
  • In route 53, make an A record with alias to the cloudfront distribution.
  • Ensure the naked domain redirects to www.

Verify the Setup

- Check both `www` and naked domain to ensure they redirect properly.
- Test on different devices and networks to confirm functionality.

Summary

  • The tutorial guides you through purchasing a domain, setting up DNS, creating certificates, configuring S3 and CloudFront, and ensuring proper redirection between www and naked domains.
Back to top