This article shows 4 different approaches to deploy a front-end application on AWS.

First Model: Using Only S3

This is the simpler approach; where we deliver all the static content of the frontend application in a S3 Bucket. It can be done simply by uploading the application directly for the bucket, or using an automated CI/CD process with CodeBuild and CodeDeploy.

AWS S3 Overview Diagram

The bucket creating is simple. You can go in a ClickOps approach, creating the bucket manually (which I consider the worst approach), using the AWS CLI, or using an automated approach using serverless Framework or Terraform (Infrastructure as Code approach).

PROS:

• Easy to set-up and integrate with other AWS services.
• Good approach for smaller apps.
• Good documentation available.
• High durability. S3 provides 99.999999999% (11 9s) of durability of the objects in a bucket.
• Allows server-side encryption using KMS.

CONS:

• Scalability (no Blue/Green deployment or multiple instances approach).
• If you enable versioning, you’ll be charged for each copy of your application in the bucket.
• More professional support needs to be paid separately.
• For bigger apps (especially for apps that transfer a big amount of data), it could be more expensive.

Second Model: Using CloudFront and S3

Amazon CloudFront is a web service that speeds up distribution of your static and dynamic web content to your users. CloudFront delivers your content through a worldwide network of data centres called edge locations. When a user requests content that you’re serving with CloudFront, the request is routed to the edge location that provides the lowest latency (time delay), so that content is delivered with the best possible performance.

With CloudFront, the approach would be almost the same as the first approach, but now CloudFront is serving the static content via it’s CDN, putting a new layer to control and deliver the static content with more resiliency and speed.

If the content is already in the edge location with the lowest latency, CloudFront delivers it immediately. If the content is not in that edge location, CloudFront retrieves it from an origin that you’ve defined, such as an Amazon S3 bucket, a MediaPackage channel, or an HTTP server (for example, a web server) that you have identified as the source for the definitive version of your content.

Use cases:

• Accelerate static website content delivery.
• Serve video on demand or live streaming video.
• Encrypt specific fields throughout system processing.
• Customise at the edge.
• Serve private content by using Lambda@Edge customisations.

Third Model: A CI/CD using CodePipeline, CodeBuild and CodeDeploy

AWS CodeBuild is a fully managed service responsible for compiling your source code, run tests and getting everything ready for the deployment stage in a CI/CD pipeline, for example.

CodeBuild eliminates the need to provision, manage, and scale your own build servers. It provides prepackaged build environments, moreover you can also customise build environments to use your own build tools and scales automatically to meet peak build requests.

To create CI/CD pipelines, AWS offers CodePipeline, where it’s possible to create CI/CD pipelines to build, test and deploy apps.

Finally, to automate deployments, AWS offers CodeDeploy.

The idea is to create a pipeline that starts when the code is merged into a specific branch in CodeCommit that corresponds to a specific environment (production, staging, development). CodePipeline then starts the pipeline, using CodeBuild to get the source code, compiling, testing and building the deliverable for CodeDeploy, who deploys the deliverable in the destination (EC2, ECS, Lambda, etc).

PROS:

• Automates continuous integration and delivery (CI/CD) pipelines; creating a fully automated software release process that promotes code changes through multiple deployment environments.
• Removes the complexity of managing build servers.
• Improves the quality of the product, allowing many levels of tests (unit tests, integration tests, e2e tests) in an automated pipeline, getting feedback if something is breaking the application.

CONS:

• More complexity, especially for small apps.

Fourth Model: A CI/CD Using AWS Amplify

Amplify is a CLI (Command Line Interface) that works as a CI/CD for building, deploying and hosting SPAs (Single Page Applications) or static web sites using serverless backends.

Amplify easily integrates with AWS CodeCommit, and also with the most famous source code repositories like GitHub, GitLab and Bitbucket.

The process to build a CI/CD pipeline with Amplify is pretty simple. You connect your repo branch, configure some building settings, and Amplify makes the magic happen.

One of the most important tools in Amplify is Amplify Studio. This simplifies the configuration of backend and frontend UIs with a visual point-and-click experience, and also includes functionality for managing app content and users.

Pricing Comparison

Here is a comparison table for the services mentioned in this article. We’re selected the default region, N. Virginia, for this comparison, but it can be changed based on other regions. For more details about pricing, please visit the links available below for each service.

All the pricing info below was extracted using the AWS Pricing Calculator

Imagine a scenario of a basic web application that integrates with a payment gateway to provide in-app purchases, and store assets like photos and other files provided by users. Let’s see in the table below how much it costs to deploy this app based on the 4 approaches explained in this article:

All the services above are included in the Always Free Tier. For more information, click this link.

Conclusion

Based on the information provided in this article, the right choice depends on a lot of factors, such as the budget, the size of the application, and the level of scalability desired for the project. For this reason, the best approach is to make a deep estimation using the AWS Price Calculator for each project, and use other AWS resources to control your budget. For that, see this article.