When focusing on cost optimization for running containerized applications on AWS, choosing between ECS and EKS requires a detailed comparison based on pricing and usage. Below is a comprehensive breakdown of the cost considerations for each service:

Amazon ECS (Elastic Container Service) Costs

ECS on EC2:

EC2 Instance Costs: You pay for the EC2 instances you run. This includes the cost of the instance type, storage, and data transfer.
Load Balancers: If you use Elastic Load Balancing (ELB), you incur additional costs.
Networking: Data transfer between instances and out of AWS will have associated costs.

ECS on Fargate:

Fargate Pricing: You pay for vCPU and memory resources consumed by your containerized applications.
- vCPU: $0.04048 per vCPU per hour.
- Memory: $0.004445 per GB per hour.
Per-Second Billing: Charges are based on the resources your task uses per second, with a 1-minute minimum.

Amazon EKS (Elastic Kubernetes Service) Costs

EKS Control Plane:

Control Plane: $0.10 per hour per cluster. This adds up to about $72 per month per cluster, regardless of the number of nodes.

EKS on EC2:

EC2 Instance Costs: Similar to ECS, you pay for the EC2 instances you use.
Load Balancers: Additional costs for ELB usage.
Networking: Data transfer costs apply.

EKS on Fargate:

Fargate Pricing: Same as ECS on Fargate, you pay for vCPU and memory resources consumed by your containerized applications.
- vCPU: $0.04048 per vCPU per hour.
- Memory: $0.004445 per GB per hour.

Cost Comparison and Recommendations

ECS Cost Example

Suppose you have an application requiring 4 vCPUs and 8 GB of memory, running continuously.

ECS on Fargate:

vCPU: $4 \text{ vCPUs} \times 24 \text{ hours/day} \times 30 \text{ days} \times \$0.04048/\text{vCPU hour} = \$116.59$
Memory: $8 \text{ GB} \times 24 \text{ hours/day} \times 30 \text{ days} \times \$0.004445/\text{GB hour} = \$25.63$
Total Monthly Cost: $116.59 + $25.63 = $142.22

ECS on EC2:

Assume an m5.large instance (2 vCPUs, 8 GB RAM) costs approximately $0.096 per hour.
You would need 2 m5.large instances to match the requirement (4 vCPUs, 16 GB RAM).
Instance Cost: $2 \text{ instances} \times 24 \text{ hours/day} \times 30 \text{ days} \times \$0.096/\text{hour} = \$138.24$
Total Monthly Cost: $138.24 (plus any additional costs for storage, load balancing, and data transfer).

EKS Cost Example

Using the same resource requirements:

EKS on Fargate:

vCPU: $4 \text{ vCPUs} \times 24 \text{ hours/day} \times 30 \text{ days} \times \$0.04048/\text{vCPU hour} = \$116.59$
Memory: $8 \text{ GB} \times 24 \text{ hours/day} \times 30 \text{ days} \times \$0.004445/\text{GB hour} = \$25.63$
Control Plane Cost: $24 \text{ hours/day} \times 30 \text{ days} \times \$0.10/\text{hour} = \$72$
Total Monthly Cost: $116.59 + $25.63 + $72 = $214.22

EKS on EC2:

Instance Cost: $2 \text{ m5.large instances} \times 24 \text{ hours/day} \times 30 \text{ days} \times \$0.096/\text{hour} = \$138.24$
Control Plane Cost: $24 \text{ hours/day} \times 30 \text{ days} \times \$0.10/\text{hour} = \$72$
Total Monthly Cost: $138.24 + $72 = $210.24 (plus additional costs for storage, load balancing, and data transfer).

Summary

ECS: Tends to be more cost-effective and simpler to manage, especially with smaller, less complex workloads or if you prefer AWS-native solutions.
- ECS on Fargate: Simplifies management by eliminating the need for instance management but can be more expensive for continuous high-load applications.
- ECS on EC2: Offers flexibility and potential cost savings if you can manage the instances effectively.
EKS: Offers more features and flexibility, better suited for complex, multi-cloud, or hybrid cloud environments but comes with additional control plane costs.
- EKS on Fargate: Convenient for running Kubernetes workloads without managing instances, but adds control plane costs.
- EKS on EC2: Provides full Kubernetes functionality with potentially lower costs if instance management is optimized.

For purely AWS-focused environments where cost optimization is the primary concern, ECS on EC2 is likely the most cost-effective option, followed by ECS on Fargate for ease of use without managing instances. If you require Kubernetes features or anticipate needing multi-cloud flexibility, EKS is the better choice, with a careful balance between Fargate and EC2 based on your workload requirements and management capabilities.

Deploying a React App using AWS S3 and Cloud Front

Amazon Web Services (AWS) offers a set of powerful tools that enable the seamless deployment of applications. In this article, we will walk through the entire process of deploying your React app on AWS. From setting up your development environment to hosting the application using an AWS S3 bucket and completely setting up HTTPS and a custom domain.

Introduction to AWS S3

Amazon Simple Storage Service (S3) is a scalable object storage service that allows you to store and retrieve data. However, S3 is not just for data; it’s also an excellent choice for hosting static websites and web applications. S3 makes web hosting and content distribution simple with its powerful features and seamless connectivity with other AWS services.

What is AWS CloudFront?

Before we dive into deploying our React app, let’s introduce another essential AWS service: Amazon CloudFront. AWS CloudFront is a content delivery network (CDN) that accelerates the delivery of your web content to users worldwide. It distributes your content over a network of international data centers to offer low-latency access and quick data transfer rates.

Domain Name System

A Domain Name System (DNS) is like the internet’s phonebook. It translates human-friendly domain names (like www.example.com) into IP addresses that computers understand. You must correctly establish DNS settings in order to connect your custom domain to your React app running on S3. This is where AWS Route 53 comes into play.

AWS Route 53

Amazon Route 53 is AWS’s scalable and highly available DNS web service. You can use it to manage DNS routing and domain registration for your applications. You can effortlessly set up and manage DNS records with Route 53, ensuring a seamless connection between your custom domain and your S3-hosted React app.

Let’s Get Started
Now that we have a basic understanding of the key AWS services involved, let’s get started with deploying your React app

Prerequisites:

Before we continue with the deployment process, it’s important to ensure that you have the following prerequisites in place. These foundational elements will set the stage for a smooth and successful deployment:

Install VSCode?
Set up Git & GitHub
Install Node.js and npm
Create an AWS account
A React App

For the purpose of this article, I am using an already existing React project for the tutorial; however, you can follow along by cloning the project.

Step 1: Create a React App

Since I already have an existing React project, I will go ahead and clone my project locally. You can, however, create a React app using the following steps:

npx create-react-app my-app

cd my-app

npm start

// The next step will be to build the application.

npm run build

Once you have confirmed that the application runs as it should in our browser, you can run the build command. This will bundle our React app into production mode in the build folder, which we can use for the next steps.

Step 2: Deploy React App to AWS S3 Bucket

Open your AWS console and type “Bucket” in the search bar.

Select the S3 service.

Once opened, you should see a page similar to the image below.

Proceed to click the “Create a bucket” button.

Give your bucket a name. I will be calling this bucket “mypetstore.cloud” but you can use any name of your choice.
Specify your preferred region

Enable public access to your S3 bucket and then save. I will leave all other options in default.
Your bucket should have been created and should appear in S3 like the image below.

Navigate into the bucket we just created, where we will import the content of the build folder in the React App into our S3 bucket.

Click on the “Add files” button, highlight all the files in our project build and add them
Next, click on the “Add folder” button and import the “static” folder to S3 bucket.

The uploaded data should look like the image below on our S3 bucket.

Next, we are going to update the properties of our bucket

Scroll down to the bottom to the “static website hosting” option and edit it.

Enable static website hosting for our S3 bucket and specify “index.html” as the default page of your project.

Next, navigate to the the S3 bucket permissions lets update the policies.

Scroll down to the bucket policy and edit it. Input the following policy configurations.

{

"Version": "2012-10-17",

"Statement": [

{

"Sid": "Statement1",

"Effect": "Allow",

"Principal": "*",

"Action": "s3:GetObject",

"Resource": "arn:aws:s3:::www.mypetstore.cloud/*"

}

]

}

Ensure you replace “resource” with your bucket name.

Once that is completed, navigate to the bucket properties and scroll to the bottom, You will see a URL available for our bucket.

Copy the link and paste it into a browser.
Your React app should be able to load in the browser like this.

Cool, now we have successfully deployed our React App to an AWS S3 Bucket.

Setup a Domain for S3 Static Website

For the next step, we are going to set up a custom domain name for our React App using any domain name register. For the purpose of this tutorial, I will be using Godaddy.

You will need to take a moment to purchase a domain name for this part of the demo.
I purchased a domain name called “mypetstore.cloud” which matches the S3 bucket we created.
Next, navigate to the “DNS” configuration setting.

Select the CNAME record available and edit it.
Replace the “value” with the url link of our S3 bucket and the name with the name of our S3 bucket.

Save the updates.

Great! Now let's head back to AWS.

Deploy React App to CloudFront

We need to create a CDN that will speed up the distribution of our website content by routing user requests through the AWS network.

Search for Cloudfront in the AWS console.

Select “Create distribution” button

Input the URL link to our S3 bucket under the origin domain
You can leave the other options as the default.

Scroll to the bottom of the page under setting and input the CNAME
I will be using the root domain name and www subdomain name: “www.mypetstore.cloud” and “mypetstore.cloud”
Since we want to use HTTPS for this project, we will need to add a certificate
So, proceed to the “Request certificate” link just below that.

On the certificate page, you will need to fill in the root domain name and www subdomain names we just specified above.

Proceed to request the certificate. That should specify that it has been successfully created but the status will indicate “ Pending validation”

Now, let's go back to our domain register (Godaddy) and create two new DNS records( for the root domain name and www subdomain name) and specify the types as CNAME.
Now back to Certificate Manager and into the certificate we just created: Copy the “CNAME names” for the individual domains, just like I did below.

Navigate to our domain register and replace the name of the new CNAME DNS records we just created with the CNAME we just copied.
Copy the “CNAME value” as well and replace it with the value of the same CNAME DNS record created in the domain register.
Repeat this for both the root domain name and www subdomain name

Now refresh the certificate manager page. Our certificate should indicate “Issued” as the status.

Navigate back to CloudFront, and now you should have the option to choose the certificate we just created.

Once that is in place, you can go ahead and create our distribution.
Next, navigate to our just-created CloudFront distribution and copy the distribution domain name to your clipboard.

Go back to our domain name register and replace that initial CNAME value we set up with the CloudFront domain name we just copied.

Next, let's confirm that our domain name has been connected to our AWS CloudFront distribution.

You can also run the domain name in your browser to verify that it still works.
You can also try using HTTPS in the browser instead of http, and it should still load.

Awesome! As seen in the above image, we can now load the website with our specified domain name.

Transfer Domain to Route 53

Next, we need to transfer our domain to Route 53 in order to simplify the management of your domain and DNS settings and enhance the reliability and security of your application.

Back in your AWS console, search for Route 53.

Select on the hosted zones and then select the “create hosted zone”

Input the domain name that we want to route traffic to with a short description.

Once you have completed the steps, create the zone, and you should get an image similar to this one below.

Navigate to our domain register and create a custom nameserver, by selecting “Change nameservers.”

Back in Route 53, we will need to copy these nameservers for routing traffic and replace them with the domain registers nameservers.

Input the nameservers from Route 53 into the custom nameservers, add all four nameservers, and save.

Now let's validate the nameservers.

Next, navigate back to Route 53, into our hosted zone, and create a new record.
One record for “www.mypetstore.cloud” and another for “mypetstore.cloud”
Under each record, allow the “Alias” to Cloudfront distribution, specify the CloudFront link we created early, and create the records.

We should have a total of four records now within our application hosted zone, with two indicating “Alias” as the type.

Now, let's verify that the domain names are working just as well as the HTTPS for the React app.
Verify with just the root domain name : “mypetstore.cloud”
And verify with the www subdomain name as well: “www.mypetstore.cloud”

Awesome! Our site now fully functions and can be accessed anywhere with the custom domain created for it. Great job!!

What Next?

Congratulations! 🎉 You have successfully hosted a React application using AWS S3, CloudFront, and Route 53. You can show off your efforts to your peers.

Please note that this tutorial is designed to provide introductory exposure to AWS and is targeted at beginners. Follow for more updates on similar topics as I embark on my journey to AWS.

Lợi V. Nguyễn

Navbar-tab

Compaire Cost optimization ECS and EKS