Example: Setting Up a Static Website Using a Custom Domain Name Registered with Route 53 - Amazon Simple Storage Service

Example: Setting Up a Static Website Using a Custom Domain Name Registered with Route 53

Suppose that you want to host your static website on Amazon S3. You've registered a domain with Amazon Route 53 (for example, example.com), and you want requests for http://www.example.com and http://example.com to be served from your Amazon S3 content. You can use this walkthrough to learn how to host a static website and create redirects on Amazon S3 for a website with a custom domain name that is registered with Route 53. You can work with an existing website that you want to host on Amazon S3, or you use this walkthrough to start from scratch.

Before You Begin

As you follow the steps in this example, you work with the following services:

Amazon Route 53 – You use Route 53 to register domains and to define where you want to route internet traffic for your domain. The example shows how to create Route 53 alias records that route traffic for your domain (example.com) and subdomain (www.example.com) to an Amazon S3 bucket that contains an HTML file.

Amazon S3 – You use Amazon S3 to create buckets, upload a sample website page, configure permissions so that everyone can see the content, and then configure the buckets for website hosting.

Step 1: Register a Custom Domain with Route 53

If you don't already have a registered domain name, such as example.com, register one with Route 53. For more information, see Registering a New Domain in the Amazon Route 53 Developer Guide. After you register your domain name, you can create and configure your Amazon S3 buckets for website hosting.

Step 2: Create Two Buckets

To support requests from both the root domain and subdomain, you create two buckets:

  • Domain bucketexample.com

  • Subdomain bucketwww.example.com

You host your content out of the root domain bucket (example.com). You create a redirect request for the subdomain bucket (www.example.com). If someone enters www.example.com in their browser, they are redirected to example.com and see the content that is hosted in the Amazon S3 bucket with that name.

To create your buckets for website hosting

The following instructions provide an overview of how to create your buckets for website hosting. For detailed, step-by-step instructions on creating a bucket, see How Do I Create an S3 Bucket? in the Amazon Simple Storage Service Console User Guide.

  1. Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3/.

  2. Create your root domain bucket:

    1. Choose Create bucket.

    2. Enter the Bucket name (for example, example.com).

    3. Choose the Region where you want to create the bucket.

      Choose a Region close to you to minimize latency and costs, or to address regulatory requirements. The Region that you choose determines your Amazon S3 website endpoint. For more information, see Website Endpoints.

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

  3. Create your subdomain bucket:

    1. Choose Create bucket.

    2. Enter the Bucket name (for example, www.example.com).

    3. Choose the Region where you want to create the bucket.

      Choose a Region close to you to minimize latency and costs, or to address regulatory requirements. The Region that you choose determines your Amazon S3 website endpoint. For more information, see Website Endpoints.

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

In the next step, you configure example.com for website hosting.

Step 3: Configure Your Root Domain Bucket for Website Hosting

In this step, you configure your root domain bucket (example.com) as a website. This bucket will contain your website content. When you configure a bucket for website hosting, you can access the website using the Website Endpoints.

To configure your bucket for website hosting

  1. On the Amazon S3 console, in the S3 buckets list, choose the bucket that has the same name as your domain.

    The bucket that is named after your domain contains the website content.

  2. Choose Properties.

  3. Choose Static website hosting.

  4. Choose Use this bucket to host a website.

  5. In the Index Document box, enter the name of your index page.

    The file name of the home page of a website is typically index.html, but you can give it any name. In Step 6: Upload Index and Website Content, you will upload the index.html document for your static website. If you have not created a website, the instructions for creating the index.html document are in Step 6: Upload Index and Website Content.

    Note

    If you don't enter the name of your index page, the Save button won't become active, and you won't be able to configure your bucket for static website hosting.

  6. Choose Save.

    
						Console screenshot showing the Static website hosting dialog box
							with appropriate settings.

In the next step, you configure your subdomain (www.example.com) to redirect requests to your domain (example.com).

Step 4: Configure Your Subdomain Bucket for Website Redirect

After you configure your root domain bucket for website hosting, you can configure your subdomain bucket to redirect all requests to the domain. In this example, all requests for www.example.com are redirected to example.com.

To redirect requests from www.example.com to example.com

  1. On the Amazon S3 console, in the S3 buckets list, choose your subdomain bucket ( www.example.com in this example).

  2. Choose Properties.

  3. Choose Static website hosting.

  4. Choose Redirect requests.

  5. In the Target bucket or domain box, enter your domain (for example, example.com).

  6. In the Protocol box, enter http.

  7. Choose Save.

Step 5: Configure Logging for Website Traffic

Optionally, you can configure logging for your root domain bucket to track the number of visitors who access your website. For more information, see (Optional) Configuring Web Traffic Logging.

Step 6: Upload Index and Website Content

You have now configured your root domain bucket for website hosting and your subdomain bucket for the redirect. Next, you upload your index document and optional website content to your root domain bucket.

To create an index.html file

You can use the following HTML to create your index.html.

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>My Website Home Page</title> </head> <body> <h1>Welcome to my website</h1> <p>Now hosted on Amazon S3!</p> </body> </html>

To upload your index and website content

  1. In the Bucket name list, choose your domain bucket (for example, example.com.

  2. Upload your index document to your domain bucket (for example, example.com):

    • Drag and drop the index file into the console bucket listing.

    • Choose Upload, and follow the prompts to choose and upload the index file.

  3. (Optional) Upload your website content to your domain bucket.

For step-by-step instructions, see How Do I Upload an Object to an S3 Bucket? in the Amazon Simple Storage Service Console User Guide.

Step 7: Edit Block Public Access Settings

In this example, you edit block public access settings for the domain bucket (example.com) to allow public access.

By default, Amazon S3 blocks public access to your account and buckets. If you want to use a bucket to host a static website, you can use these steps to edit your block public access settings.

Warning

Before you complete this step, review Using Amazon S3 Block Public Access to ensure that you understand and accept the risks involved with allowing public access. When you turn off block public access settings to make your bucket public, anyone on the internet can access your bucket. We recommend that you block all public access to your buckets.

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

  2. Choose the name of the bucket that you have configured as a static website.

  3. Choose Permissions.

  4. Choose Edit.

  5. Clear Block all public access, and choose Save.

    Warning

    Before you complete this step, review Using Amazon S3 Block Public Access to ensure you understand and accept the risks involved with allowing public access. When you turn off block public access settings to make your bucket public, anyone on the internet can access your bucket. We recommend that you block all public access to your buckets.

  6. In the confirmation box, enter confirm, and then choose Confirm.

    Under S3 buckets, the Access for your bucket updates to Objects can be public. You can now add a bucket policy to make the objects in the bucket publicly readable. If the Access still displays as Bucket and objects not public, you might have to edit the block public access settings for your account before adding a bucket policy.

Step 8: Attach a Bucket Policy

Once you edit S3 Block Public Access settings, you must add a bucket policy to grant public read access to your bucket. When you grant public read access, anyone on the internet can access your bucket.

Important

The policy below is an example only and allows full access to the contents of your bucket. Before you proceed with this step, review How can I secure the files in my Amazon S3 bucket? to ensure that you understand the best practices for securing the files in your S3 bucket and risks involved in granting public access.

  1. Under Buckets, choose the name of your bucket.

  2. Choose Permissions.

  3. Choose Bucket Policy.

  4. To grant public read access for your website, copy the following bucket policy, and paste it in the Bucket policy editor.

    { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": [ "s3:GetObject" ], "Resource": [ "arn:aws:s3:::example-bucket/*" ] } ] }
  5. Update the Resource to include your bucket name.

    In the above example bucket policy, example-bucket is the bucket name. To use this bucket policy with your own bucket, you must update this name to match your bucket name. For example, if your bucket name is my-example-bucket, the bucket policy would look like this:

    { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": [ "s3:GetObject" ], "Resource": [ "arn:aws:s3:::my-example-bucket/*" ] } ] }
  6. Choose Save.

    A warning appears indicating that the bucket has public access. On Bucket Policy, you see a Public label.

    If you see an error that says Policy has invalid resource, confirm the bucket name in the bucket policy matches your bucket name. For information about adding a bucket policy, see How Do I Add an S3 Bucket Policy?

    If you get an Error - Access denied warning and the Bucket policy editor does not allow you to save the bucket policy, check your account-level and bucket-level block public access settings to confirm that you allow public access to the bucket. For more information about website permissions, see Permissions Required for Website Access.

In the next step, you can figure out your website endpoints and test your domain endpoint.

Step 9: Test Your Domain Endpoint

After you configure your domain bucket to host a public website and your subdomain bucket to redirect, you can test your domain endpoint. For more information, see Website Endpoints.

Depending on your Region, Amazon S3 website endpoints follow one of these two formats:

http://bucket-name.s3-website.Region.amazonaws.com
http://bucket-name.s3-website-Region.amazonaws.com

For a complete list of Amazon S3 website endpoints, see Amazon S3 Website Endpoints.

To test the domain endpoint

  • In your web browser, enter the domain endpoint URL.

    The browser should display the index document that you uploaded to the bucket.

In the next step, you use Amazon Route 53 to enable customers to use both of your custom URLs to navigate to your site.

Step 10: Add Alias Records for Your Domain and Subdomain

In this step, you create the alias records that you add to the hosted zone for your domain maps example.com and www.example.com. Instead of using IP addresses, the alias records use the Amazon S3 website endpoints. Amazon Route 53 maintains a mapping between the alias records and the IP addresses where the Amazon S3 buckets reside. You create two alias records, one for your root domain and one for your subdomain.

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

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

    Note

    If you don't already use Route 53, see Step 1: Register a Domain in the Amazon Route 53 Developer Guide. After completing your setup, you can resume the instructions.

  2. Choose Hosted Zones.

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

  4. Choose Create Record Set.

  5. Specify the following values:

    Name

    Accept the default value, which is the name of your hosted zone and your domain.

    For the root domain, you don't need to enter any additional information in the Name field.

    Type

    Choose A – IPv4 address.

    Alias

    Choose Yes.

    Alias Target

    In the S3 website endpoints section of the list, choose your bucket name.

    The bucket name should match the name that appears in the Name box. In the Alias Target listing, the bucket name is followed by the Amazon S3 website endpoint for the Region where the bucket was created, for example example.com (s3-website-us-west-2). Alias Target lists a bucket if:

    • You configured the bucket as a static website.

    • The bucket name is the same as the name of the record that you're creating.

    • The current AWS account created the bucket.

    If your bucket does not appear in the Alias Target listing, enter the Amazon S3 website endpoint for the Region where the bucket was created, for example, s3-website-us-west-2. For a complete list of Amazon S3 website endpoints, see Amazon S3 Website Endpoints. For more information about the alias target, see Alias Target in the Amazon Route 53 Developer Guide.

    Routing Policy

    Accept the default value of Simple.

    Evaluate Target Health

    Accept the default value of No.

  6. Choose Create.

To add an alias record for your subdomain (www.example.com)

  1. In the hosted zone for your root domain (example.com), choose Create Record Set.

  2. Specify the following values:

    Name

    For the subdomain, enter www in the box.

    Type

    Choose A – IPv4 address.

    Alias

    Choose Yes.

    Alias Target

    In the S3 website endpoints section of the list, choose the same bucket name that appears in the Name field—for example, www.example.com (s3-website-us-west-2).

    Routing Policy

    Accept the default value of Simple.

    Evaluate Target Health

    Accept the default value of No.

  3. Choose Create.

Note

Changes generally propagate to all Route 53 servers within 60 seconds. When propagation is done, you can route traffic to your Amazon S3 bucket by using the names of the alias records that you created in this procedure.

Step 11: Test the Website

Verify that the website and the redirect work correctly. In your browser, enter your URLs. In this example, you can try the following URLs:

  • Domain (http://example.com) – Displays the index document in the example.com bucket.

  • Subdomain (http://www.example.com) – Redirects your request to http://example.com. You see the index document in the example.com bucket.

In some cases, you might need to clear the cache of your web browser to see the expected behavior.