This is the second article in this series about hosting a serverless web application in AWS.
In the previous article, we set up a static website using AWS S3. However, there are some problems with this - we had to enable public access on our bucket and the website does not use SSL/TLS. In this article, we will enable CloudFront distribution for this website and avoid these problems.
Amazon CloudFront is a Content Delivery Network (CDN) that distributes our content globally to various edge locations. When a user requests our content, they are served from the edge location nearest to them, reducing latency. CloudFront caches our files at edge locations. This means that repeated requests for the same content are served from the cache, which is much faster. Also, serving content from the cache reduces the number of requests to our S3 bucket, which can reduce our S3 costs.
Create a CloudFront Distribution
Navigate to the CloudFront page from the AWS console.
Create a CloudFront distribution .
We will choose our S3 bucket in the
Origin domain dropdown list. For
Origin access, lets' select the
Origin access control settings option as we do not want our bucket to be publicly accessible.
Next, we will create a new control settings.
We'll keep the default values in the
Create control setting windows that pop-ups. Click the
Create button to create the control setting.
Note that we will need to manually update the bucket policy to grant permissions to our CloudFront distribution.
As this is just a sample application, choose
Do not enable security protections in the
Web Application Firewall section. For production applications, we should consider enabling security protections.
Let's assume that a majority of our users will be from North America and Europe and choose the appropriate
Price class. This means that our website content will only be served by edge locations in these regions. This also means that users in other regions may see higher latency.
index.html is the home page of our website, we will set that as the
Default root object. This is the content that will be returned when the user requests the root URL.
We will keep the remaining options as default and click
Create distribution button at the bottom to create our distribution. We should see a confirmation that the new distribution was created successfully.
Make a note of the Distribution domain name as we will use it to access our website. There should be a
Copy policy button on the top left corner. Click the copy icon to copy the S3 bucket policy. Now, let's navigate to the S3 bucket and update the bucket policy.
Replace the policy we created earlier with the policy that was copied above. Since we have created a CloudFront distribution to serve our website, we no longer require our bucket to be publicly accessible.
We will navigate back to
Edit Block public access for our bucket and check
Block all public access box and save changes. Checking this box will result in a confirmation pop-up.
confirm in the field to confirm the settings and click
Accessing our website
Our website will now be accessible using the Distribution domain name.
This is great but there is still one issue. The link for our website is cryptic and not ideal. So, now let us associate our domain with this CloudFront distribution so we can use a friendlier URL for our website.
Use our domain for our website
Note: If you don't have a domain, you can register one for a reasonably economical price or even free (with some restrictions). You can do a web search for this.
We already have a domain,
cloudbuff.in , registered, so we will use tic-tac-toe.cloudbuff.in for our website.
Request a certificate
Since we want our website to be secure and support SSL/TLS, we will request a new certificate for this domain from AWS Certificate Manager.
AWS Certificate Manager screen, click the
Request button to request this new certificate.
We will request a public certificate.
We will put in the desired domain for our website as the
Fully qualified domain name and choose
DNS validation as the method to validate domain ownership. Click the
Request button at the bottom of the page to continue.
We should see a message that the certificate has been successfully requested. the status is
Pending validation. We need to take some additional steps before the certificate is approved.
Click on the Certificate ID link and navigate to the
The status is
Pending validation and there are two columns of interest
CNAME name and
CNAME value. We need to add a DNS record of type CNAME through the domain registration website. Our domain is registered with GoDaddy, so we will go that site and add a DNS record there.
Make sure that the type is
CNAME and copy the Name and Value from the AWS Certificate Manager screen. Save your changes. This will allow AWS Certificate Manager to confirm that we own this domain.
Note: DNS validation can sometimes take hours depending how DNS changes are propagated and become visible to AWS Certificate Manager.
Once the validation is complete, we can add a new
CNAME record to our DNS. This is to point subdomain
tic-tac-toe to our CloudFront distribution domain.
Update domain for distribution
Now, we will associate this domain with our CloudFront distribution. For this, we need to edit the distribution settings.
We need to specify our custom domain in the
Alternate domain name (CNAME) field. We also need to select the certificate we created earlier in the
Custom SSL certificate dropdown.
Save changes button at the bottom to save. Now we should see our changes being deployed. This can take some time.
Once the changes are successfully deployed, we should see the date and time in the
Last modified column.
Now we should be able to access our website using our custom domain https://tic-tac-toe.cloudbuff.in/. Note that the website is secure and uses SSL/TLS.
In this article, we saw how we can use CloudFront as the CDN for our website. We also associated our custom domain with our static website hosted using S3. In subsequent articles, we will build further on this and see how we can deploy a dynamic web application in AWS without setting up any servers.