Use an Amazon CloudFront distribution to serve a static website

This getting started tutorial shows you how to perform the following tasks:

• Register a domain name, such as example.com.

• Create a certificate for your domain.

• Create two Amazon S3 buckets and configure one to host a website and the other one to redirect to the subdomain.

• Create a sample website and save the file in your S3 bucket.

• Create CloudFront distributions for both S3 buckets.

• Configure Amazon Route 53 to route traffic to the CloudFront distributions.

When you're finished, you'll be able to open a browser, enter the name of your domain, and view your website securely.

Prerequisites

Before you begin, be sure that you've completed the steps in Setting up Amazon Route 53.

Step 1: Register a domain

To use a domain name (such as example.com), you must find a domain name that isn't already in use and register it. When you register a domain name, you reserve it for your exclusive use everywhere on the internet, typically for one year. By default, we automatically renew your domain name at the end of each year, but you can turn off automatic renewal.For more information, see Registering a new domain.

Step 2: Request a public certificate

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.

To request an AWS Certificate Manager(ACM) public certificate (console)

1. Sign in to the AWS Management Console and open the ACM console at https://console.aws.amazon.com/acm/home.

   Note

   Make sure you create the certificate in the US East (N. Virginia) Region. This is required for Amazon CloudFront.

   On the left nav, choose Request a certificate, and on the Request certificate page choose Request a public certificate, and then Next.

2. In the Domain names section, enter your domain, such as example.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 *.example.com.

3. In the Validation method section, choose DNS validation.

4. In the Key algorithm section, choose RSA 2048.

5. In the Add tags section, you can optionally tag your certificate. Tags are key-value pairs that serve as metadata for identifying and organizing AWS resources.

   Choose Request to be taken to the Certificates page.

6. 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 choose Create records.

   The Certificate status page should open with a status banner reporting Successfully created DNS records.

   Your new certificate might continue to display a status of Pending validation for up to 30 minutes.

Step 3: Create an S3 bucket to host your subdomain

To create an S3 bucket for www.your-domain-name

Amazon S3 lets you store and retrieve your data from anywhere on the internet. In this step you create an S3 bucket to store all the files for your website.

1. Open the Amazon S3 console at https://console.aws.amazon.com/s3/.

2. Choose Create bucket.

3. Enter the following values:

   Bucket name

   Enter www.your-domain-name. For example, if you registered the domain name example.com, enter www.example.com.

   Region

   Choose a Region for your bucket.

4. To accept the default settings and create the bucket, choose Create bucket.

   For more information about the S3 bucket settings, see View bucket properties in the Amazon S3 user guide.

Step 4 : Create another S3 bucket, for your root domain

If you also want your users to be able to use the root domain, .your-domain-name (such as example.com) to access your sample website, create a second S3 bucket. In this tutorial, you will then configure the second bucket (root domain) to route traffic to the first bucket.

To create an S3 bucket for your-domain-name

1. Open the Amazon S3 console at https://console.aws.amazon.com/s3/.

2. Choose Create bucket.

3. Enter the following values:

   Bucket name

   Enter your-domain-name. For example, if you registered the domain name example.com, enter example.com.

   Region

   Choose the same Region that you created the first bucket in.

4. To accept the default settings and create the bucket, choose Create bucket.

Step 5: Upload website files to your subdomain bucket

Now that you have an S3 bucket, you can upload your website files. In this tutorial you will just upload a simple index.html file that displays text on a page.

To enable your S3 bucket for website hosting

1. Open the Amazon S3 console at https://console.aws.amazon.com/s3/.

2. In the Buckets list, choose the linked name of the bucket you want to upload the website files to, such as www.example.com.

3. Copy the example text that creates a simple one-page website, paste it into a text editor, and save it as index.html:

   <html>
   <head>
   <title>Amazon Route 53 Getting Started</title>	
   </head>
   
   <body>
   
   <h1>Routing Internet traffic to Cloudfront distributions for your website stored in an S3 bucket</h1>
   
   <p>For more information, see 
   <a href="https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/getting-started.html">Getting Started with Amazon Route 53</a> 
   in the <emphasis>Amazon Route 53 Developer Guide</emphasis>.</p>
   
   </body>
   
   </html>

4. In the Objects tab choose Upload.

5. Under Files and folders, choose Add files and upload your website files. For this tutorial, upload the index.html file you saved in step 3.

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

After you configure your root domain bucket for website hosting, you can optionally configure your root domain bucket to redirect all requests to the subdomain. For example, you can configure all requests for example.com to be redirected to www.example.com.

To configure a redirect

1. On the Amazon S3 console, in the Buckets list, choose your bucket name (for example, example.com).

2. Choose Properties.

3. Under Static website hosting, choose Edit.

4. Under Static website hosting, select Enable.

5. Choose Redirect requests for an object.

6. In the Host name box, enter your subdomain, for example, www.example.com.

7. For Protocol, choose HTTPS.

8. Choose Save changes.

9. Under Static website hosting, note the Endpoint.

   The Endpoint is the Amazon S3 website endpoint for your bucket. You will use this endpoint to set up an Amazon CloudFront distribution.

Step 7: Create an Amazon CloudFront distribution for your subdomain

In this step you create a CloudFront distribution for your subdomain, such as www.example.com, to enable your website to use HTTPS so people can view it securely.

To create a CloudFront distribution

1. Open the CloudFront console at https://console.aws.amazon.com/cloudfront/v4/home.

2. Choose Create Distribution.

3. Under Origin, for Origin domain, choose the Amazon S3 bucket that you created previously.

   For Origin access, select Legacy access identities. For the 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.

4. For the settings under Default Cache Behavior Settings, under Viewer, set Viewer protocol policy to Redirect HTTP to HTTPS and accept the default values for the rest.

   For more information about cache behavior options, see Cache behavior settings in the Amazon CloudFront developer guide.

5. In the Web Application Firewall (WAF) section you can choose to either enable or disable AWS WAF security protections.

6. For the fields under Settings, do the following:

   • Choose Add item for Alternate domain name (CNAME) - optional, and enter your subdomain, such as www.example.com.

   • For Custom SSL Certificate, choose the certificate you created previously.

   • In the Default root object text box, type in index.html.

   • For the rest, accept the default values and choose Create distribution.

     For more information about distribution options, see Distribution settings.

7. At the bottom of the page, choose 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.

   Record the 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 an Amazon CloudFront distribution for your root domain

In this step you create a CloudFront distribution for your root domain to have it use HTTPS when its URL is redirected to the subdomain.

To create a CloudFront distribution

1. Open the CloudFront console at https://console.aws.amazon.com/cloudfront/v4/home.

2. Choose Create Distribution.

3. Under Origin Settings, for Origin Domain Name, enter the bucket website endpoint. You get this from the Static website hosting section of Properties for the Amazon S3 bucket that you created previously.

   For the rest, accept the default values.

4. For the fields under Default Cache Behavior Settings, do the following:

   • Under Viewer, set Viewer protocol policy to Redirect HTTP to HTTPS.

   • Set Cache settings to CachingDisabled.

   • Accept the default values for the rest.

   For more information about cache behavior options, see Cache behavior settings in the Amazon CloudFront developer guide.

5. For the fields under Settings, do the following:

   • Choose Add item for Alternate domain name (CNAME) - optional, and enter your root domain, such as example.com.

   • For Custom SSL Certificate, choose the certificate you created previously.

   • For the rest, accept the default values.

   For more information about distribution options, see Distribution settings.

6. At the bottom of the page, choose Create Distribution.

7. 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.

   Record the 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 domain to your CloudFront distribution

You now have a one-page website 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.

For more information about routing traffic to CloudFront distributions, see Routing traffic to an Amazon CloudFront distribution by using your domain name.

To route traffic to your website

1. Open the Route 53 console at https://console.aws.amazon.com/route53/.

2. In the navigation pane, choose Hosted zones.

   Note

   When you registered your domain, Amazon Route 53 automatically created a hosted zone with the same name. A hosted zone contains information about how you want Route 53 to route traffic for the domain.

3. In the list of hosted zones, choose the name of your domain.

4. Choose Create record.

   If you are in the Quick create record view, choose Switch to wizard.

   Note

   Each record contains information about how you want to route traffic for one domain (such as example.com) or subdomain (such as www.example.com or test.example.com). Records are stored in the hosted zone for your domain.

5. Choose Simple routing and choose Next.

6. Choose Define simple record.

7. In Record name, type in www in front of the default value, which is the name of your hosted zone and your domain.

8. In Record type, choose A ‐ Routes traffic to an IPv4 address and some AWS resources.

9. In Value/Route traffic to, choose Alias to CloudFront distribution.

10. Choose the distribution.

    The distribution name should match the name that appears in the Domain name box in the Distributions list, for example, dddjjjkkk.cloudfront.net.

11. For Evaluate target health, choose No.

12. Choose Define simple record.

To add an alias record for your root domain (example.com)

Add an alias record for your root domain also, so it points to the S3 bucket that redirects traffic to www.example.com. For more information about routing traffic to CloudFront distributions, see Routing traffic to an Amazon CloudFront distribution by using your domain name.

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 the distribution.

   The distribution name should match the name that appears in the Domain name box in the Distributions list, for example, dddjjjkkk.cloudfront.net.

6. For Evaluate target health, choose No.

7. Choose Define simple record.

8. On the Configure records page, choose Create records.

Step 10 : Test your website

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

• https://www.your-domain-name, for example, www.example.com – Displays the index document in the www.your-domain-name bucket

• https://your-domain-name for example, example.com – Redirects your request to the www.your-domain-name bucket

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

For more advanced information about routing your internet traffic, see Configuring Amazon Route 53 as your DNS service. For information about routing your internet traffic to AWS resources, see Routing internet traffic to your AWS resources.