Streamlining Secure and Scalable Website Deployments on AWS with Amazon CloudFront and AWS CDK | Amazon VGT2 Las Vegas Blog

Streamlining Secure and Scalable Website Deployments on AWS with Amazon CloudFront and AWS CDK | Amazon VGT2 Las Vegas BlogMore Info

In today’s digital landscape, HTTPS has become a necessity for websites, ensuring secure communication between users’ browsers and the sites they visit. By encrypting data transfers, HTTPS safeguards sensitive information, like login credentials, from potential threats. Deploying HTTPS-enabled static websites on Amazon Web Services (AWS) is seamless with the combination of Amazon CloudFront and Amazon Simple Storage Service (S3). CloudFront serves as a secure and efficient content delivery network (CDN), caching and delivering content closer to users, while S3 provides a reliable and scalable storage solution for hosting static website files.

TechWave is an AWS Advanced Tier Services Partner that excels in delivering content solutions, cloud migrations, serverless architectures, and DevOps practices. Their certified experts collaborate with businesses to grasp their unique cloud infrastructure requirements, providing innovative and scalable solutions. With a focus on reliability, security, and efficiency, TechWave’s cloud services are crafted to optimize AWS Cloud operations for businesses of all sizes—whether it’s a straightforward three-tier web application or a complex array of workloads, TechWave tailors deployment services to meet specific needs.

In this article, we’ll explore the automation of website deployment on AWS using the AWS Cloud Development Kit (AWS CDK) with TypeScript. Our proposed architecture integrates CloudFront as the CDN, AWS Certificate Manager for secure certificate management, S3 for dependable website hosting, and Amazon Route 53 for domain name resolution. For a deeper dive, you can also check out this blog post that complements our discussion.

Overview

TechWave assists clients in effectively managing, transforming, and delivering content within the AWS Cloud. Amazon CloudFront, the CDN utilized by TechWave, enhances performance while minimizing costs. For further insights, see TechWave’s article on CloudFront Pricing: How to Approach it and Save Money?

Infrastructure as Code (IaC) is a methodology enabling developers to manage and provision their infrastructure through code, utilizing tools like AWS CloudFormation, Terraform, or the AWS Cloud Development Kit (AWS CDK). The AWS CDK offers an advanced, object-oriented abstraction over CloudFormation, simplifying resource management through popular programming languages such as TypeScript, Python, or Java.

Each deployment of the AWS CDK stack results in the creation of a CloudFormation template, which outlines and provisions the necessary AWS resources for the website’s infrastructure. You can view and manage this template through the AWS Management Console if needed.

Architectural Design

This architecture incorporates Amazon CloudFront as the CDN, AWS Certificate Manager for certificate provisioning, Amazon S3 for website hosting, and Amazon Route 53 for DNS functionality. Together, these components create a secure, scalable, and high-performance solution for website deployment.

It’s crucial to note that all content stored in the S3 bucket is publicly accessible. To ensure data security, only static website content should be stored here to avoid unintentionally exposing sensitive information.

The architecture operates by leveraging CloudFront to efficiently distribute static website content, thus enhancing user performance. AWS Certificate Manager provisions TLS/SSL certificates, facilitating secure HTTPS communication, while S3 serves as the origin for CloudFront, hosting the static website files.

Amazon Route 53 functions as the DNS, linking the website’s domain name with the CloudFront distribution for user access. While setting up this architecture via the AWS console is straightforward, manual configurations can lead to errors. Thus, automating the process is often preferable, allowing it to be reused across different clients with minimal adjustments.

This architecture is adaptable to numerous scenarios, including the deployment of ReactJS websites or other static sites, making it an excellent example for those looking to learn about or apply AWS CDK in their projects.

TypeScript CDK Code for Deployment

Prerequisites

  • AWS CDK
  • Node.js
  • AWS Command Line Interface (CLI) credentials configured locally

Starting a New CDK Project

To initiate, create a new folder named “cdk-example-s3-cloudfront” and navigate into it. Then, execute the following command to set up a new CDK project in TypeScript, which also installs all dependencies:

cdk init app --language=typescript

Account and Region Configuration

We first prepare the environment file to specify the AWS account to utilize. For this example, we will use the default AWS account configured in your AWS CLI.

Navigate to the file “bin/cdk-example-s3-cloudfront.ts” and replace the existing code. If you wish to use a different region than eu-west-1, adjust it accordingly.

#!/usr/bin/env node
import 'source-map-support/register';
import * as cdk from 'aws-cdk-lib';
import { CdkExampleS3CloudfrontStack } from '../lib/cdk-example-s3-cloudfront-stack';

const app = new cdk.App();
new CdkExampleS3CloudfrontStack(app, 'CdkExampleS3CloudfrontStack', {
  env: { account: process.env.CDK_DEFAULT_ACCOUNT, region: 'eu-west-1' },
});

Website Files

As we will be deploying to an Amazon S3 bucket, it’s necessary to prepare the website files. For this example, we will use a basic “index.html” file and a custom “index.html” file for error handling, typically stored in the “html-website” folder.

  1. Create a folder in the root called “html-website.”
  2. Inside this folder, create a file named “index.html” containing your sample code.
  3. Create a subfolder named “error” within the “html-website” folder.
  4. Create an “index.html” file inside the “html-website/error” directory for your error page.

Infrastructure Code

Next, we will modify the infrastructure provisioning code. Here’s a brief overview of this code:

  • This TypeScript AWS CDK stack deploys an HTTPS-enabled static website to S3 using Amazon CloudFront.
  • It provisions a TLS/SSL certificate for HTTPS and sets up an Amazon Route 53 alias record for the CloudFront distribution.
  • Ensure that you have a registered domain name within Amazon Route 53 before utilizing this code.

For further information, this resource provides an excellent overview of how Amazon fulfillment centers train associates.

By following the outlined steps, businesses can efficiently deploy secure and scalable websites on AWS.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *