Angular Deployment Strategies in AWS

There are various strategies people follow to deploy an Angular application in AWS. Today, we will talk about them in detail.

You can follow either of the following strategies to deploy an Angular application in AWS

1. CloudFront + S3
2. Route53 + CloudFront + AWS S3
3. Nginx + EC2 + ELB
4. Serverless using Amplify
5. AWS Elastic Beanstalk

CloudFront + S3

It is the most effective and widely used deployment strategy for web apps with CSR (Client Side Rendering).

AWS S3

Amazon Simple Storage Service (Amazon S3) is an object storage service that offers high scalability, data availability, security, and performance. AWS S3 supports features that help in Versioning, Logging, Hosting, and Encryption.

Benefits:

1. MFA feature available for delete functionality to protect accidental loss of data.
2. Amazon S3 offers flexible security features to block unauthorized users from accessing your data.
3. High Performance. It supports at least 3,500 requests per second to add data and 5,500 requests per second to retrieve data.
4. Strongly Consistent.

CloudFront

AWS CloudFront is a globally-distributed network offered by Amazon Web Services, which securely transfers content with high transfer speed.

Benefits:

1. It caches your content in edge locations, thus resulting in low latency, reliability, and high throughput.
2. Protection against Network and Application layer attacks.
3. SSL/TLS Encryptions and HTTPS.
4. High Availability.
5. Cost-Effective.

You can follow the steps described in this link to configure your application for CloudFront and S3 deployment strategy.

Route53 + CloudFront + S3

It is a similar strategy as above (CloudFront + AWS S3) with the add-on of Route53.

You use Route53 only if you have it as your DNS service provider. If you have a different DNS service provider, then CloudFront + S3 strategy will work for you. You only have to provide the list of domain names in the CNAME property while creating a distribution in CloudFront. For more details, please visit AWS Developer Guide.

Follow the steps in this link to configure your application for Route53, CloudFront, and S3 strategy.

NGINX + EC2 + ELB

We should use this strategy when :

1. Web apps are using SSR (Server Side Rendering).
2. There are some Organization level restrictions on CloudFront or S3.

NGINX

It is a web server designed for maximum performance and stability. It can also function as a proxy server for email (IMAP, POP3, and SMTP) and a reverse proxy and load balancer for HTTP, TCP, and UDP servers.

Benefits:

1. Simple installation and configurations.
2. Fastest and best for serving static files.
3. When compared to Apache, it can handle four times more concurrent connections.

EC2

Amazon Elastic Compute Cloud is a part of Amazon’s cloud-computing platform that allows users to rent virtual computers on which they run their computer applications.

ELB

Elastic Load Balancing distributes network traffic to improve application availability and automatic scaling. It automatically distributes incoming application traffic across multiple targets and virtual appliances in one or more Availability Zones (AZs).

There are four types of the load balancer

1. Application Load Balancer (ALB)
2. Network Load Balancer (NLB)
3. Gateway Load Balancer (GLB)
4. Classic Load Balancer (CLB)

You can check the features and differences here.

Benefits:

1. High availability.
2. High throughput.
3. Improved insight into the health of your applications.
4. Support sticky sessions.

Here, we will use NGINX as our web server. We will install NGINX on all EC2 instances. Below is the deployment diagram of this strategy

You can follow the steps in this link to configure your application for this strategy.

Serverless using Amplify

AWS Amplify allows you to build modern full-stack serverless mobile and web apps by providing an open-source Amplify Framework (consisting of the Amplify libraries and CLI), integrations with AWS cloud services, and the AWS Amplify Console.

Amplify is compatible with the following frameworks:

1. React
2. Vue
3. Angular
4. Flutter
5. React Native
6. IOS
7. Andriod (Java)
8. Android (Kotlin)

Benefits:

1. Serverless Framework
2. Easy Deployment
3. Reduction in Cost
4. Easily Scalable

Follow this link for deployment using Amplify.

For detailed reading, you can go to this link.

AWS Elastic Beanstalk

AWS Elastic Beanstalk is an easy-to-use service for deploying and scaling web applications and services. You can upload your code, and Elastic Beanstalk automatically handles the deployment, from capacity provisioning, load balancing, auto-scaling to application health monitoring. You can check the details at the AWS site.

Benefits:

1. Fast and easy to deploy.
2. Automatic Scaling.
3. Elastic Beanstalk provisions and operates the infrastructure and manages the application stack (platform) for you, so you don’t have to spend the time or develop the expertise.

You can follow the steps in this link to configure your application for this strategy. Please note that for deploying the Angular application, you must first create a server using express js and then take the dist folder, the server.js file (of the server project), and the package.json and compress them as a zip. Use this zip file to upload in Elastic Beanstalk.

Conclusion

Please note that choosing from these strategies could vary for you depending upon the number of variables like Organization standards, project cost, available infrastructure, and available resources. Please choose wisely, and do let me know if you have used any other strategy other than the ones listed in this article to deploy an Angular application in AWS.