Deploying Angular App on AWS for Production - angularjs

I have an AngularJS app which we need to deploy on production. It also has REST API calls.
As of now for development, we deployed it on AWS EC2 Ubuntu Instance and using grunt serve to run it.
I know grunt should be used only for development, so what are the other ways to deploy Angular App on AWS? I see many answers for deploying it on S3/Cloudfront. Can't we use EC2 instance with Nginx/Tomcat for this purpose on production?
Thanks!

You can setup CloudFront infront of EC2 instance to cache static contents in Angular App, which will improve the application performance better at scale.
If you can clearly seperate the Angular App including the index.html, it is an option to host it in AWS S3 also using CloudFront as a cache and a proxy to your EC2 instance which will reduce the overhead completely on delivering static content from the EC2 instance, further improving the performance. Also you can use S3 to store file uploads.

Related

What AWS services/architecture is used as I have Front-End, Back-End & Database Application?

As I am new to AWS, so it will be really helpful for me if someone suggest me the correct strategy.
I have requirement in which I have to deploy Back-End Application with Node.js and Front-End Application in React.js which call endpoint of Node.js.
And the database is PostgresSQL.
So, as per my understanding below AWS service to be used for Back-End & Database: -
1). Node.js - Back-End Application: - To be deploy over EC2 instance
2). PostgresSQL - Database: - To be deploy over RDS Service
But I am not sure which service to be use for Front-End -- React.js, so that it can call an endpoint of Back-End Application deploy on EC2 instance?
You could also use EC2 for the front-end. With EC2 you get direct access to a server and you can configure it however you like.
But since a pure front-end application is just a bunch of HTML, Javascript and CSS files, you can also deploy it to Amazon S3 (+ an optional CDN for better performance and less cost). You might want to check articles like this one.
Bonus: you might also want to check AWS Amplify for these purposes.
ANother option you have is you can deploy your client to AWS Elastic Beanstalk. Elastic Beanstalk is a service for deploying and scaling web applications and services. Upload your code and Elastic Beanstalk automatically handles the deployment—from capacity provisioning, load balancing, and auto scaling to application health monitoring.This service hosts web apps.
For details, see https://aws.amazon.com/elasticbeanstalk.

Dockerized ReactJS & Express on Elastic Beanstalk

I'm working with a startup to build an app. I've been studying CS for 2 years, so I'm new to lots of things. For our app we have a ReactJS front-end, Express back-end, and MySQL database. Currently it's deployed on AWS Elastic Beanstalk in a NodeJS environment. I configured it to run react-scripts build after it's been deployed. It's serving the static React-generated files through the Express server (bad idea, I know). This has worked for a while, but now the instance is running out of memory when trying to build.
I've been looking into Docker as a better solution (I've never used Docker before this week), and now I have a local development setup with 3 containers: a MySQL container, a Node container running the backend, and an Alpine container just running react-scripts start. The front-end is using a proxy to connect to the backend. This is all working fine locally (except that my backend container can't connect to the Internet so an external API is broken), but I have no idea how to deploy this correctly to AWS.
With Elastic Beanstalk is there a way for me to build and deploy a single Docker container with the pre-built React front-end, configure Nginx to serve those static files, and then pass all /api requests to the Express server? I'm using RDS for the database, so I don't feel like I need to deploy another container for MySQL.
I don't expect you guys to solve my problem, but I'd appreciate being pointed in the right direction. Maybe I'm going about this completely the wrong way.
React App:
I suggest you deploy your react application on AWS Amplify. you can find resources on how to deploy on the internet very easily.
MySQL
You can host your MySQL database on an EC2 instance or use any other hosted service for the database.
Express App
Now you can host your express app on EBS using the docker platform. You can also get the resources for this on the internet.
===========================================================================
Now add your express app endpoint in AWS Amplify's environment to use it with react app.
Add MySQL URL to EBS's environment to use it with Express App.
Note: AWS amplify serves your app on HTTPS so you have to enable SSL on EBS also. You can do it with the AWS certificate manager by
getting an SSL certificate and attaching it to the EBS.
It will be easy if the domain is handled by Route53 but again you can also achieve this with any domain service provider.
It is recommended that you should migrate your domain to Route 53, as you will get more control and also many other benefits.
Refer this answer: https://stackoverflow.com/a/38225802/9323655
Hope my answer will guide you in the right direction.

How to use AWS with Next.js?

I am looking for some advices, I am using Next.js to serve static pages that can be updated frequently, my app uses all kind of rendering : SSG, SSR and iSSG (new Incremental Static Site Generation feature).
Exemple of AWS architecture I thought:
EC2 to deploy a node.js server running next.js app
(if it is possible) Store/update static pages generated by Next.js
SSR/iSSG in a S3 bucket
Cloudfront to cache pages (using either EC2 or S3 bucket if it is
possible)
Do you know what is the best AWS architecture I could use according to my needs?
Edit: Maybe AWS Elastic Beanstalk is the solution, I am taking a look.
Next.js 11 + SST + Lambda#Edge
Serverless deployment was introduced in Next.js 8. This makes it easier for you to deploy your Next.js app to AWS Lambda functions, and take advantage of the serverless architecture. It's often much cheaper to host this way, and faster because you are serving the pages behind a CloudFront CDN network.
The SST framework makes it easy to help build and deploy your Next.js app to your AWS account using a combination of S3, Lambda#Edge and CloudFront. It also helps you configure a custom domain for the endpoint.
Here's an example walking through the setup - https://serverless-stack.com/examples/how-to-create-a-nextjs-app-with-serverless.html

How to Deploy Django Rest Framework and React on AWS

I am very new to deploy Django and AWS. So now I would like to deploy my separate project (drf + react) to AWS.
So How can I deploy the separate project to AWS?
EC2 vs Elastic BeanStalk which one is better for that kind of environment?
I already search for one day but I found nothing useful information and found the similar thing but I don't understand like that=>
Deploying Separate React Frontend and Django DRF API
You asked a difficult question. I think I can make it bit easy for you.
First let's look at the differences in the options.
Serving the front end app
Option1: Django to serve react app
In this option, the Django app will serve your app in a route for e.g /app/. Basically the route /app will load react app's index.html. it's that simple.
In order for this to work, you need to build your react app using npm run build and copy the files to Django's static folder. good so far?
One of the benefits option 1 gives, option 2 doesn't is, you can use the same domain for backend and frontend for e.g www.example.com.
Option 2: deploy front end in S3
You still need to build the react app using npm run build, but you will not copy that to Django, in other words, you don't want to Django to serve your front end app, you want s3 to serve the static website. this method requires a separate subdomain or domain to host the react app.
Thats is the only difference between the options. Your frontend app will make api calls to the Django api, thats same for both options.My preferred option is option 2 to reduce complexity.
Deployment
I would pick elasticbeanstalk because it's easy to start with. You can do everything in the elasticbeanstalk console from load balancer to SSL, Healthcheck, Changing EC2 Keypair for EC2 Instance etc. Deployment is very easy. It supports multiple environments, You can use one AWS account for your test and production environments.

how to setup AWS for single page application project with spring boot and react.js

I tried to deploy my single page application with spring boot and react.js. but I don't know where to start. I did my research and EC2 and S3 would be the right setup for deploying spa but I'm not quite sure. is there any resource I could have?
There are so many way to do this.
But I would use AWS CloudFront, and have the EC2 as a source (could also have the EC2 behind application load balancer) and the react.js in an S3 as a source. This way you also get them under a common domain name, and you can easily enforce HTTPS.

Resources