Back to all posts

AWS HTTPS, Domain, and S3

Hosting a static website on AWS can seem daunting, but with the right guidance, you can get your site up and running securely in no time. This guide will walk you through the steps to configure HTTPS, set up a custom domain, and host your static website using AWS services.

Prerequisites

Before we start, make sure you have the following:

  1. An AWS account.
  2. A registered domain name. You can register one via AWS Route 53 or any other domain registrar.
  3. Basic knowledge of AWS services like S3, CloudFront, and Route 53.

Step 1: Create an S3 Bucket for Your Static Website

Create the Bucket

  1. Open the Amazon S3 Console.
  2. Click Create bucket.
  3. Enter a unique bucket name (e.g., my-unique-bucket-name).
  4. Choose a region.
  5. Click Create bucket.

Configure the Bucket for Static Website Hosting

  1. Click on your newly created bucket.
  2. Go to the Properties tab.
  3. Scroll down to Static website hosting and click Edit.
  4. Select Enable.
  5. Enter your index document (e.g., index.html) and error document (e.g., error.html).
  6. Click Save changes.

Upload Your Website Files

  1. Click on your bucket.
  2. Click Upload.
  3. Drag and drop your website files (HTML, CSS, JS) or click Add files.
  4. Click Upload.

Step 2: Set Up a Custom Domain with Route 53

Create a Hosted Zone

  1. Open the Route 53 Console.
  2. Click Create hosted zone.
  3. Enter your domain name.
  4. Click Create hosted zone.

Update Your Domain Registrar

  1. Note the NS (Name Server) records from Route 53.
  2. Log in to your domain registrar’s website.
  3. Update the domain’s name servers to the ones provided by Route 53.

Step 3: Configure CloudFront for HTTPS

Create a CloudFront Distribution

  1. Open the CloudFront Console.
  2. Click Create Distribution.
  3. Select Web.
  4. Under Origin Settings:
    • Origin Domain Name: Select your S3 bucket.
    • Origin Path: Leave empty.
    • Origin ID: Default value.
  5. Under Default Cache Behavior Settings:
    • Viewer Protocol Policy: Redirect HTTP to HTTPS.
  6. Under Distribution Settings:
    • Alternate Domain Names (CNAMEs): Enter your custom domain name.
    • SSL Certificate: Choose Custom SSL Certificate. If you don’t have one, follow the steps to create a certificate using AWS Certificate Manager (ACM).
  7. Click Create Distribution.

Request a Certificate in ACM

  1. Open the ACM Console.
  2. Click Request a certificate.
  3. Choose Request a public certificate and click Request a certificate.
  4. Enter your domain name and click Next.
  5. Choose DNS validation and click Next.
  6. Click Review and then Confirm and request.
  7. Follow the instructions to add a CNAME record to your Route 53 hosted zone to validate the certificate.

Step 4: Connect CloudFront to Route 53

  1. Open the Route 53 Console.
  2. Go to your hosted zone.
  3. Click Create Record Set.
  4. Set the Name to your domain (e.g., www).
  5. Set the Type to A - IPv4 address.
  6. Select Alias to Yes.
  7. In the Alias Target field, select your CloudFront distribution.
  8. Click Create.

Step 5: Test Your Setup

  1. Allow some time for the DNS changes to propagate.
  2. Open a browser and navigate to your domain (e.g., https://www.yourdomain.com).
  3. You should see your static website served over HTTPS.

Conclusion

Congratulations! You’ve successfully configured HTTPS, set up a custom domain, and hosted your static website on AWS using S3, Route 53, and CloudFront. This setup ensures your site is secure, fast, and scalable. AWS offers powerful tools to manage and serve your static websites, and with this guide, you’re well on your way to leveraging them effectively.

Published: May 7, 2022