In this project, I demonstrate the steps for deploying a secured static website to AWS. We will utilize Amazon S3 bucket storage service to host our website file and Amazon Route 53 will be used to acquire a new custom domain name and for management of DNS. We will secure the website using an SSL certificate and then serve up our content by using a CloudFront distribution for fast delivery!
Pre-requisite: You will need an Amazon Web Services (AWS) Account
Services used: Amazon S3, Amazon Route 53, Certificate Manager (ACM), and CloudFront
Repo for this project: Static Website on AWS
Table of Contents
- Purchase a custom domain from AWS Route 53 domain registrar.
- Create an Amazon S3 bucket and upload website files to it
- Use Route 53 to redirect our custom domain URL to the AWS-provided URL
- Request Certificate from ACM
- Add Cloudfront Distribution
- Update DNS record to point to Cloudfront Distribution
Step 1: Purchase a custom domain from AWS Route 53
Amazon Route 53 is a highly available and scalable cloud Domain Name System (DNS) web service offered by Amazon Web Services (AWS). In addition to DNS services, it provides health-checking services to automatically route end users to healthy application endpoints and supports domain registration services. In this step, we will purchase a domain for our website using the Route 53 service.
From the AWS Console, search for “Route 53” and select it from the resulting list of services.
You will be directed to the Route 53 Dashboard. From here, click on “Registered Domains” from the left-side menu.
On the next page, you will click on the “Register Domain” button.
On this Domain Search page, you will enter your desired domain into the field, select a domain extension from the drop-down list, and then click on “Check” to find out if your domain name is available for purchase.
In my example, I’ve selected “nishaproject.click”. I selected the “.click” extension because it is the cheapest one available. Click on “Add to cart”
After adding your chosen domain name to the shopping cart, you will be taken to a checkout page where you need to fill out your contact information in order to complete the purchase.
Prior to finalizing your purchase, you will need to accept the “Terms and Conditions” of the Route 53 DNS registration services. You also have the option to allow automatic renewal of your domain on an annual basis. It is set to “Enable” by default. However, you can change this setting at any time.
After submitting your order, you will see a notification that your order has been submitted and will be debited to your payment method on file. Click on Close and then click on the “Go to Domains” button.
You will likely be presented with a “Pending requests page”. It took about 10 minutes after completing my purchase before my domain completed the registration process.
Step 2: Create an Amazon S3 Bucket
Amazon S3 (Simple Storage Service) is a cloud-based object storage service offered by Amazon Web Services (AWS) that allows users to store and retrieve data through web-based interfaces and APIs, and can be used for a wide range of storage and archiving needs, such as backup and disaster recovery, big data analytics, and content distribution. S3 provides high durability and availability and allows users to store data in a variety of formats and scales.
You will use an Amazon S3 Bucket to store your website file(s). To begin, search for s3 in the top search bar and select it from the resulting list of services.
On the next page, click on “Create Bucket”.
On the “Create bucket” page, enter the following information to configure your S3 bucket:
Bucket name: <your domain name>
AWS Region: Select the region closest to you
Scroll down to the “Block Public Access settings for this bucket” section below. This will be set to Block public access by default. Uncheck the box to enable public access to the bucket so that it will be publicly accessible for others to view your website. Scroll down further below and select the checkbox to acknowledge the warning about the public access settings.
Scroll down to the bottom of the page and click on “Create Bucket”.
Once the bucket has been created, you will see your domain name reflected as the bucket name. From here, we need to modify some settings of the bucket. Click on your bucket name to navigate to the bucket settings.
Navigate to the Properties tab and then scroll down to the static website hosting settings.
At the Static website hosting section, click on the “Edit” button.
Modify the Static website hosting settings by making the following changes:
Static website hosting: select Enable
In the “Index document” field, enter “index.html”
Scroll down to the bottom and click on the “Save Changes” button to accept the new settings.
Upload your website file(s)
Navigate back to the “Objects” tab and click on the Upload button.
Click on Add files and then navigate to the saved location of your index.html website file on your local machine and select it to open it. You also have the option to click on “Add folder” if you need to store additional assets using a folder hierarchy for your website.
Scroll to the bottom of the page below and click on the “Upload” button.
Click on Close.
Create a Bucket Policy
Next, you will create a Bucket Policy for the bucket by modifying its permissions. Navigate to the permissions tab, scroll down to Bucket Policy > Click on Edit.
Copy the code listed below and paste it into the Bucket Policy field on the AWS console. Replace the “Bucket-Name” parameter to match the name that you have configured for your S3 Bucket on the AWS Console.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::Bucket-Name/*"
]
}
]
}Scroll to the bottom of the page and click on “Save Changes”.
You have now configured the bucket to allow for public accessibility to reach the website. If you go back to your website and click on it, you should see your welcome message if you click on “Open”.
The welcome message is displayed, but the URL that is utilized is an AWS-provided URL rather than our custom domain. We will need to update the DNS records on Route 53 service to redirect our domain to our S3 Bucket.
Step 3: Redirect the custom domain to the URL of the S3 Bucket website
In this step, we will return to Route 53 services so that we can configure the Hosted Zone to use a DNS record that will redirect from our custom domain to the URL of the S3 Bucket website. In the top search bar, enter Route 53 and select it from the list of services:
From the Route 53 Dashboard, click on Hosted Zones.
From the Hosted Zones section, Click on your domain name.
Click on Create Record.
On the Create record page, you will create an alias record for your Apex/root domain so that it will redirect to your S3 Bucket website. You will accomplish this by entering the following information:
Alias: toggle the switch to “on”
- Route traffic to: Alias to S3 endpoint
- Region: Choose the Region for your S3 endpoint
- Enter S3 endpoint: Select your S3 Bucket from the list
- Routing Policy: Simple Routing
Click on “Create records”
You will then see a confirmation of the successful creation of the DNS record for your domain.
Test Your Website URL
Navigate to the FQDN of your domain in your web browser and your website should be available once the DNS records have had enough time to complete the propagation process. Congratulations! You have completed the hosting of a static website on an Amazon S3 bucket!
Notice in the browser that the website is indicating that it is unsecured and not trusted by the browser. We can mitigate this by requesting an SSL certificate for our site from a Certificate Authority. Fortunately, AWS offers a service known as Amazon Certificate Manager (ACM) where we can request the issuance of a certificate for our site for free! Let’s do this!
Step 4: Request Certificate from ACM
Amazon Certificate Manager (ACM) is a service provided by Amazon Web Services (AWS) that allows users to easily manage and deploy Secure Sockets Layer/Transport Layer Security (SSL/TLS) certificates. It allows users to provision, manage, and deploy SSL/TLS certificates for use or integration with AWS services, such as Elastic Load Balancing, Amazon CloudFront distributions, and APIs for Amazon API Gateway. ACM also manages the renewal and replacement of certificates automatically. SSL/TLS certificates allow web browsers to identify and establish encrypted network connections to websites using the SSL/TLS protocol.
To request a certificate from ACM, begin by searching for “certificate manager” in the top search bar and selecting it from the resulting list of services. NOTE — Please make sure that you are in the US East Virginia region when you request your certificate.
At the AWS Certificate Manager page, click on Request a certificate.
Click on the first radio button for “Request a public certificate” and then click on Next.
In the “Domain names” section, enter the FQDN for your domain. Scroll down to the “Validation method” section and select an option for validating your domain. DNS validation is the recommended option and I found it quite easy to complete through the AWS console.
Scroll down to the Key algorithm section and select RSA 2048 for the encryption algorithm. Then, click on the “Request” button below.
You will then see a banner appear at the top of the Certificates List page confirming that the certificate request was successful. You should see your certificate issuance in a “Pending validation” state in the list below. If not, click on the refresh button and it should appear momentarily. Then, click on the blue text listed under the “Certificate ID” column.
You will be taken to an information page related to your certificate request. Here, you will scroll to the Domains section and click on “Create records in Route 53” so that ACM will create the proper CNAME record needed to complete the DNS validation process.
On the next page, you will tick the checkbox in front of your domain name and then click the “Create Record” button to create the DNS record in Route 53. This will validate your domain ownership so that Route 53 will issue the certificate for your website.
Once you have completed this process, you will notice that your domain validation status is reflected as “success” and the certificate status is “issued”. This completes the certificate process. However, we now need to create a CloudFront distribution for our website so that we can utilize the certificate because we cannot use the certificate with the S3 resource.
Step 5: Add Cloudfront Distribution
In step 5, we will create a CloudFront distribution for our website so that we can utilize the certificate for secured access to our website. There are many benefits to using CloudFront with the primary benefit is having the ability to distribute your media through the AWS backbone network to the edge location that can best serve your content to viewers. CloudFront is a Content Delivery Network (CDN) service that provides faster delivery and a low latency experience for those who want to view your website.
To begin this process, you will search for CloudFront in the top menu and select it from the resulting list of services.
At the Cloudfront landing page, you will click on “Create a CloudFront distribution” button.
On the next page, click into the “Origin domain” field and select your S3 static site URL.
Here, you will be prompted to convert your S3 static site to a website endpoint. Click on this button to complete this conversion process.
Your origin domain name will then change to include “website” in its URL.
Scroll down to the Default Caching Behavior section and select the following settings below:
Scroll down to the “Custom SSL Certificate” section and select your site’s certificate from the list.
Scroll down to the bottom and click on “Create Distribution”.
You should see a banner message indicating that your new distribution was successfully created.
Step 6: Update DNS record to point to CloudFront distribution
In this final step, we will update the DNS record to point to the CloudFront distribution. Search for Route 53 in the top search bar and select it from the list of services.
From the Route 53 Dashboard, click on Hosted zone.
Click on the name of your Hosted Zone, which is your domain name.
Click the checkbox on your A record for your domain. In the Edit pane that opens on the right, modify the “Route traffic to” field so that the selected option is now “Alias to CloudFront distribution” and then click on save.
This completes all of the necessary steps for deploying a secured static website on AWS. I got a little creative with mine after finishing all of these steps and created a simple HTML page that is reflected in the image below. You are free to create your own index.html document or use any HTML website template that you like.
Stay tuned for my next article where I will demonstrate the deployment of a similar website using Azure Cloud services.
Thank you for reading!
