HOWTO: Easy steps to configure a static webpage using S3

You can configure an Amazon S3 bucket to function like a webpage. In this tutorial, you will learn how to set up S3 with Route 53 and CloudFront to host a web page. This tutorial walks you through the steps of: 

• Hosting a webpage on Amazon S3. 
• Create redirects on Amazon S3 for a webpage with a custom domain name that is registered with Route 53. (optional)
• Create Amazon CloudFront distributions to set up a secure static webpage.

You can also use CloudFront without using Route 53, follow the instructions at – https://aws.amazon.com/cloudfront/getting-started/S3/ to skip setting up a custom domain.

Services used

• Amazon S3
  • You use Amazon S3 to create buckets, upload a sample webpage page, and then configure the buckets for webpage hosting.
  • Amazon S3 does not support HTTPS access to the webpage. If you want to use HTTPS, you can use Amazon CloudFront to serve a static webpage hosted on Amazon S3.

• Amazon Route 53
  • You use Route 53 to register custom domains and to define where you want to route internet traffic for your domain.

• Amazon CloudFront
  • Amazon CloudFront provides the capabilities required to set up a secure static webpage. 
  • Amazon CloudFront uses the storage of Amazon S3 while providing additional security headers, such as HTTPS. HTTPS adds security by encrypting a normal HTTP request and protecting against common cyberattacks.

• AWS Certificate Manager
  • A public certificate is required for your Amazon CloudFront distributions to configure CloudFront to require that viewers use HTTPS so that connections are encrypted when CloudFront communicates with viewers.

Implementation

Step 1: Register a domain, such as maghildaprojects.com

1. I registered a new domain with AWS, maghildaprojects, to practice projects and start building a portfolio.
2. The example shows how to create Route 53 alias records that route traffic for your domain (maghildaprojects.com) and subdomain (www.maghildaprojects.com) to an Amazon S3 bucket that contains an HTML file.
3. You can work with an existing webpage that you want to host on Amazon S3, or use this walkthrough to start from scratch.
4. To register a new domain:
   • Set it up for one year. 
   • At the time of this writing, the cost to register one domain with AWS is $13 for one year.
   • Turn off automatic renewal.
5. Follow the instructions in the following link – Register a new domain with Route 53

Step 2: Create a certificate for your domain.

To use Amazon CloudFront, you need to manage your Secure Sockets Layer (SSL) certificate. There are two options:

• Use the Default CloudFront Certificate.
• Since you are using a custom domain in this tutorial, upload or request a Custom SSL Certificate from AWS Certificate Manager (ACM) and associate it to your CloudFront distribution (as noted later in the CloudFront section below). Follow the instructions below –

1. Sign in to the AWS Management Console and search for Certificate Manager 
2. Make sure you create the certificate in the US East (N. Virginia) Region. This is required for Amazon CloudFront.
3. On the left nav, choose Request a certificate, and on the Request certificate page choose Request a public certificate, and then Next.
4. In the Domain names section, enter your domain, such as maghildaprojects.com.
   Choose Add another name to this certificate, enter an asterisk in front of the domain name to request a wildcard certificate for all subdomains, such as *.maghildaprojects.com.
5. In the Validation method section, choose DNS validation.
6. In the Key algorithm section, choose RSA 2048.
7. Click Request to be taken to the Certificates page.
8. Once your new certificate appears in Pending status, choose the certificate ID, and on the certificate details page, choose Create record in Route 53 to automatically add the CNAME records for your domains, and then Click Create records.
9. The Certificate status page should open with a status banner reporting Successfully created DNS records.
10. Your new certificate might continue to display a status of Pending validation for up to 30 minutes.

Step 3: Create DNS-complaint S3 bucket to redirect to a subdomain.

To create an S3 bucket for the root domain maghildaprojects.com

1. Sign in to the AWS Management Console and search for S3
2. Choose Create bucket.
3. Enter the following values:
   Bucket name = maghildaprojects.com
   Region = US East (N. Virginia) Region
   Accept the default settings and create the bucket, click Create bucket.

Step 4: Create DNS-complaint S3 bucket to host a webpage.

To create an S3 bucket for the subdomain www.maghildaprojects.com (this will host the webpage)

1. Choose Create bucket.
2. Enter the following values:
   Bucket name = www.maghildaprojects.com
   Region = US East (N. Virginia) Region
   Accept the default settings and create the bucket, click Create bucket.

Step 5: Create a sample webpage and save the file in your S3 subdomain bucket.

1. Create an index.html file. Use the following HTML to create one:
   

2. Save the index file locally on your desktop.
3. To upload the index document to your www.maghildaprojects.com bucket, choose Upload, and follow the prompts to choose and upload the index file.

Step 6: Set up your root domain bucket for webpage redirect

To configure all requests for maghildaprojects.com to be redirected to www.maghildaprojects.com, follow the steps below:

1. On the Amazon S3 console, in the Buckets list, choose your bucket name maghildaprojects.com
2. Choose Properties tab
3. Under Static webpage hosting, click Edit
4. Under Static webpage hosting, select Enable
5. Select Redirect requests for an object
6. In the Host name box, enter your subdomain, www.maghildaprojects.com
7. For Protocol, choose HTTPS
8. Click Save changes.
9. Under Static webpage hosting, note the Endpoint – http://maghildaprojects.com.s3-webpage-us-east-1.amazonaws.com
   The Endpoint is the Amazon S3 webpage endpoint for your bucket. You will use this endpoint to set up an Amazon CloudFront distribution.

Step 7: Create CloudFront distributions for subdomain S3 bucket.

Create a CloudFront distribution for your subdomain www.maghildaprojects.com, to enable your webpage to use HTTPS so people can view it securely.

1. Open the CloudFront console at https://console.aws.amazon.com/cloudfront/v4/home.
2. Click Create Distribution.
3. Under Origin,
   • Origin domain, enter the Amazon S3 bucket www.maghildaprojects.com  
   • Origin access, select Legacy access identities. 
   • Origin access identity, you can choose from the list, or choose Create new OAI (both will work).
   • For Bucket policy, select Yes, update the bucket policy. (Giving access permissions enables CloudFront to read the objects from your bucket.)
4. Under Default Cache Behavior,
   • Viewer protocol policy, select Redirect HTTP to HTTPS 
   • accept the default values for the rest.
5. In the Web Application Firewall (WAF) section you can choose Enable security protections.
6. Under Settings,
   • Click Add item for Alternate domain name (CNAME) – enter your subdomain www.maghildaprojects.com
   • Custom SSL Certificate, choose the certificate you created previously.
   • Default root object text box, type in index.html
   • For the rest, accept the default values
7. Click Create distribution.
8. After CloudFront creates your distribution, the value of the Status column for your distribution changes from In Progress to Deployed. This typically takes a few minutes.
9. Record the Distribution domain name that CloudFront assigns to your distribution, which appears in the list of distributions. You can use this domain name to test the distribution.

Step 8: Create CloudFront distributions for root S3 bucket.

Create a CloudFront distribution for your root domain maghildaprojects.com, to have it use HTTPS when its URL is redirected to the subdomain www.maghildaprojects.com

1. Open the CloudFront console at https://console.aws.amazon.com/cloudfront/v4/home.
2. Click Create Distribution.
3. Under Origin,
   • Origin domain, enter the bucket webpage endpoint – http://maghildaprojects.com.s3-webpage-us-east-1.amazonaws.com
   • for the rest, accept default values
4. Under Default Cache Behavior,
   • Viewer protocol policy to Redirect HTTP to HTTPS
   • accept the default values for the rest.
5. In the Web Application Firewall (WAF) section you can choose Enable WAF security protections.
6. Under Settings,
   • Choose Add item for Alternate domain name (CNAME) – enter your root domain maghildaprojects.com
   • Custom SSL Certificate, choose the certificate you created previously.
   • For the rest, accept the default values
7. Click Create distribution.
8. After CloudFront creates your distribution, the value of the Status column for your distribution changes from In Progress to Deployed. This typically takes a few minutes.
9. Record the Distribution domain name that CloudFront assigns to your distribution, which appears in the list of distributions. You can use this domain name to test the distribution.

Step 9: Route DNS traffic for your subdomain to your CloudFront distribution

You now have a one-page webpage in your S3 bucket that uses a CloudFront distribution. To start routing internet traffic for your domain to the CloudFront distribution, perform the following procedure.

1. Open the Route 53 console at https://us-east-1.console.aws.amazon.com/route53/v2/home.
2. In the navigation pane, choose Hosted zones.
3. In the list of hosted zones, choose the name of your domain maghildaprojects.com
4. Click Create record.
   If you are in the Quick create record view, choose Switch to wizard.
5. Choose Simple routing and click Next.
6. Click Define simple record.
7. Record name, type in www in front of the default value, which is the name of your hosted zone and your domain.
8. Record type, choose A ‐ Routes traffic to an IPv4 address and some AWS resources.
9. Value/Route traffic to, choose Alias to CloudFront distribution.
10. Choose distribution.
    The distribution name should match the name that appears in the Domain name box in the Distributions list, d2ngn5t8k4m7b1.cloudfront.net
11. For Evaluate target health, choose No.
12. Click Define simple record.
13. On the Configure records page, click Create records.

Step 10: Route DNS traffic for you root domain to your CloudFront distribution

Add an alias record for your root domain (maghildaprojects.com) so it points to the S3 bucket that redirects traffic to www.maghildaprojects.com.

1. Under Configure records, choose Define simple record.
2. In Record name, accept the default value.
3. In Record type, choose A ‐ Routes traffic to an IPv4 address and some AWS resources.
4. In Value/Route traffic to, choose Alias to CloudFront distribution.
5. Choose distribution.
   The distribution name should match the name that appears in the Domain name box in the Distributions list, for example, d2bcw05eiclhmt.cloudfront.net
6. For Evaluate target health, choose No.
7. Click Define simple record.
8. On the Configure records page, click Create records.

Step 11: Test your webpage

To verify that the webpage is working correctly, open a web browser and browse to the following URLs:

• https://www.maghildaprojects.com –  Displays the index document in the www.maghildaprojects.com bucket
• https://maghildaprojects.com – Redirects your request to the www.maghildaprojects.com bucket

In some cases, you might need to clear the cache to see the expected behavior.

Step 12: Clean up

If you created your static webpage only as a learning exercise, delete the AWS resources that you allocated so that you no longer accrue charges. After you delete your AWS resources, your webpage is no longer available.

1. Delete the two buckets
2. Delete the two route 53 A records created above. Keep the other records as-is
   • maghildaprojects.com
   • www.maghildaprojects.com
3. Delete the cloud front distributions
   • first disable the distributions. this may take a few minutes
   • then, delete both the distributions
4. Do not delete the ssl cert

Conclusion

In addition to the above, you can,

• set up logs to assess how many visitors
• create custom error pages
• automate the creation by using Infrastructure as Code (IaC) – AWS CloudFormation or Hashicorp’s Terraform

AWS Document References

• Tutorial: Configuring a static webpage on Amazon S3 
• Tutorial: Configuring a static webpage using a custom domain registered with Route 53
• Use an Amazon CloudFront distribution to serve a static webpage