AWS Frontend solutions

Amazon Web Services offers dozens of services, from basic virtual machines over highly specialized databases to authentication. AWS can help developers with their day-to-day work and save time and money on infrastructure setup and maintenance.

Leveraging these services takes some time investment. You must understand the services, just as you have to learn a programming language. And sometimes, the naming of these services doesn’t make the task any easier. AWS user management and authentication service Cognito sounds more like a machine learning service than a service you would use to build a login for your website. However, once you get past the sometimes confusing names, you will find that AWS provides clearly written and comprehensive documentation.

As a frontend developer, working with the cloud can get even more challenging because you’re missing the backend or cloud skills required to understand all these services in the first place. There are countless services you could use to host your frontend. If you’re going with the static website route, you might get along with Simple Storage Service (S3) for hosting and CloudFront as the content delivery network. For a frontend framework that gets rendered on the server, you will have to check out more complex services that overlap with backend development, for example, Elastic Container Service (ECS), Elastic Compute Cloud (EC2), or Lambda.

This article will review the most common ways of hosting frontends on AWS, from development to production.

Simple Storage Service for Development

Amazon Simple Storage Service (Amazon S3) is the most-used service on AWS. While it simply stores files and makes them accessible via HTTP, it comes with a static hosting feature that makes all files stored in a bucket available without authentication.

S3 is a perfect hosting option for static websites. All your static assets, from images and videos to CSS, HTML, and JS files, are well served here.

It’s essential to remember that S3 doesn’t work with dynamic websites that require server-side scripts, and you should only use it for low-traffic deployments because of the pricing and latency. So, it’s a good solution for development but not for high-traffic production environments.

In short, deploying static websites on S3 is intended for development. It’s cheap because you pay for what you use.

S3 and CloudFront for Production

To make your frontend available to a broader audience, you should consider using S3 in tandem with CloudFront. This is AWS’ content delivery network and probably the most straightforward production-ready frontend deployment on AWS.

CloudFront has edge locations worldwide that can locate content close to your users, drastically lowering latency. Depending on your requirements, it can be less expensive than hosting on S3 only. You pay less for data transferred, but more for each request. This makes CloudFront cheaper for big single-page applications or generally frontends that have big pages. It also supports custom domains, making your frontend discoverable on the web.

Again, this is a solution for SPAs and PWAs. To deliver static files to a massive number of clients, CloudFront caches responses from HTTP APIs with server-side scripts. However, since your files lie in an S3 bucket, dynamic executions on the backend are not an option in this setup.

Amplify: AWS for Frontend Developers

Using the cloud, especially AWS, isn’t easy for frontend developers. Even AWS realized this. So, they created Amplify: a set of tools and services to make the cloud more accessible to frontend developers. Think of it as Ruby on Rails, but for AWS.

It offers libraries, data modeling tools, and code generators that remove the need to write boilerplate code when connecting to AWS. Amplify’s ability to integrate with DynamoDB and Lambda allows you to create server-side scripts the client can’t directly access or modify.

On the deployment side, it comes with a CI/CD pipeline that connects with popular code repository providers and offers zero-downtime deployments.

Overall, Amplify is a good way for frontend developers to build modern, dynamic frontends with AWS technology. It will put your static assets in S3, add a CloudFront distribution in front of it, and let you write server-side scripts in Lambda.

The downside, as with all frameworks, is that you might not 100% grasp the implications of your deployment. Amplify uses regular AWS services such as S3, Lambda, and AppSync in the background, and these services cost money; adding a feature might double your bill if you’re not cautious.

Lambda for Dynamic Frontends

If your frontend requires backend processing, S3 alone will not be adequate. You need some way to execute scripts on your backend, and Lambda can do just that.

Lambda is a serverless compute service where you only pay when something is executed. As long as nobody uses your system, it’s free. It can work with API Gateway to deliver responses via HTTP. it also has function URLs that allow you to call Lambda over HTTP directly without another service involved.

You can deploy up to 50 MB ZIP archives or 10 GB Docker images to execute big frontend projects.

While you can write a simple function handler that reads static files from the deployment package and writes them into a response, it might be better to put your static assets into S3. But if you want to write only a small service within Lambda’s limits and want everything in one place for easy maintenance, Lambda is a good solution.

Officially supported runtimes are Node.js, Python, Ruby, Java, Go, and .Net, but you can also write a custom runtime or use one created by the community.

A downside of Lambda is its cold-start times. If you have a massive deployment in one Lambda function, delivering the first request can take multiple seconds after the system has been idle for too long. So, while it might be enough for systems that are not time-critical, it can hit its limit quickly.

Containers with Elastic Beanstalk

Amazon Elastic Beanstalk (EB) is AWS’ frontend-focused container solution. You can see it as a simplified alternative to Kubernetes that is integrated well into the AWS ecosystem. If you bundle your frontend application into a Docker image on top of a web server image such as Nginx, you can deploy it on EB.

EB is mainly concerned with resource management, so it doesn’t host your frontend by itself but uses other services like EC2 and autoscaling in the background. You’re billed for the services that do the hosting work, while EB is free.

EB is an excellent alternative to AWS' more complex container services ECS and Elastic Kubernetes Service (EKS).

Virtual Machines with EC2

EC2 is AWS’ virtual machine offering. If you want to get a Linux server and install and manage all your software on your own, from the OS to the web server, this is the way to go.

You can get a server, install a web server like Nginx, and upload your files by yourself. A perfect fit for server-side rendered frontends that require specific OS versions or language runtimes. EC2 has many features that make using VMs more flexible. AWS offers a variety of load balancers you can choose from, depending on the types of loads your application has to handle; if an autoscaling group takes care of your VMs, you can scale each of your frontend parts up and down.

Summary

AWS offers several different services to host your frontends. Depending on how your software stack looks, one might be more fitting than the other.

If you need a static website, an S3 bucket with website hosting enabled is enough to set up a development deployment in minutes. If you want to make it production-ready later, you can add a CloudFront distribution in front of it to scale up content delivery.

If you have more dynamic requirements for your web application, but are missing the required backend skills, AWS Amplify can help you out. AWS promotes it as Ruby on Rails for the cloud because it makes all the services needed to host a web app more accessible for the average developer.

AWS Lambda is the serverless computing workhorse of AWS. It’s a good fit to host dynamic sites that need to execute code on the backend. The best part is it scales up and down in seconds without any extra load balancing, and it doesn’t cost a dime when idle.

Container services can assist you if you go the Docker container way. For simple deployment, Elastic Beanstalk is good enough. If you need more, ECS gives you all the control you need, while EKS offers a managed Kubernetes service.

Finally, if you’re looking for complete control of every aspect of your frontend stack, EC2 is just what you need. A VM service that comes with load balancers and autoscaling features, EC2 ensures your frontend code gets exactly the OS version and language runtimes it needs.