Deployment flow of an Angular app over on AWS EC2 instances

Question

I'm trying to figure out the best way to deploy an angular App on Amazon Web Service. My App is already running fine and I'm hosting it on a VPS. I would like to migrate my app over on AWS, but I can't get my head around how to do deployment.

Currently, since my app also has a lumen backend, I'm using the composer library deployer to deploy my app on the server. This script basically log on the remote server, retrieve my code via git pull, compile and install all the dependencies needed, then change the symlinks to the new version so it is accessible from the web.

Using this method, the angular App is compiled over on the server, which can use a lot of RAM for a simple compilation. I've recently had to upgrade my RAM for this very reason.

Now, my question is, how can i similarly deploy my app over on AWS ? Ideally, I would like to make use of the load-balancing feature of AWS so I would need to have an AMI of my updated App. I know this can be done using the Amazon SDK but I'm not quite sure that it is the way to go.

Currently, my deployment flow would be :

• Checkout master into a new folder
• Install the dependencies
• compile the app
• build and AMI using the dist folder ( somehow )
• Upload that AMI over on AWS
• Notify my instance to use the new AMI instead of the current one.
• Rinse and repeat for the API.

I'm also afraid this will bring some downtime because of the instance restart.

I could use the same mechanics that I'm using right now to compile the app over on the EC2 Instance, but that would mean I would need a bigger instance only to compile my app, which is not very optimal.

I Also know about Amplify but I've never used it and I'm not sure it will do what I'm looking for, since I'm not looking for automated deployement.

I've checked a few answer already but they does not seams to be quite what i'm looking for. Deploying Angular App on AWS for practice
Deploying angular app to AWS Elastic beanstalk

Answer 1

The quickest solution

Deploy your Angular based application - using Amazon S3 alongside Amazon CloudFront.

Use the default or any available webpack to compile and bundle your application in /build or /dist directory using ng build --prod

Alternatively, you could write a small script within your package.json to override the default ng build behavior. For instance, adding or updating environment variables during the build.

cp ./src/config.dev.js ./src/config.dev.bak.js &&  cp ./src/config.prod.js ./src/config.dev.js &&  react-app-rewired build &&  mv ./src/config.dev.bak.js ./src/config.dev.js

The above snippet (though runs a react application build) demonstrates overriding the default build behavior - It initiates a backup of the local environments. Over writes the production variables before initiating the build and then restores the local environment again in the original configuration file.

Time to build: ~5 mins

Once you have the production build ready, you can go ahead and create an Amazon S3 bucket with default settings (of course, you can tune-in the settings and security later as you explore more).

Here is a simple explanation of how you can get started with Amazon S3 -learn to create a bucket

After creating the bucket, you can configure it to host a static website. Here is another link from the official AWS documentation for -static website hosting

Time to configure Amazon S3: ~3 mins

Once you have your bucket ready, you can simply upload your build code in the bucket. The website would be available on the URL endpoint, provided to you during configuring the static server for your bucket.

Few configuration options you might want to consider while working with Amazon S3:

1. Bucket-Policy; use any readily available boilerplate Bucket Policy and enhance security parameters as per your need.

2. You might as well configure "Versioning" for your bucket in order to maintain release history.

You are live in less than 10 minutes!

Post-deployment

1. Configure Amazon CloudFront, which will serve as a Content Delivery Network for the static website.

   Startup guide:Here is the pathway

   Creating a distribution will take several more minutes before the origin bucket server is connected with the distribution.

   Alongside enforcing HTTPS Redirection, SSL encryption for your application you can also monitor traffic, requests, resource consumptions and create alerts on your distribution with Amazon CloudFront in addition with other Amazon Web Services (Amazon CloudWatch)

2. In case you want to redirect the traffic on your domain - Use Amazon Route53

3. If you still need more flexibility in your application, use AWS Lambda functions to introduce dynamic functions during runtime.

This should be the most efficient and quickest solution for your use case. Minimal learning curve and fast & streamlined deployment pipeline.

There are other available options as well with Amazon Web Services, Such as AWS Elastic Beanstalk, which can provide you with an Amazon EC2 instance in your cloud environment for supporting your PHP backend. Requires more configurations though as opposed to the provided solution.

All the best mate.