CODEWITHSUNDEEP
angularamazon-web-services
Nicolas
Nicolas

Reputation: 8695

Deployment flow of an Angular app over on AWS EC2 instances

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 :

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

Upvotes: 5

Views: 13377

Answers (2)

Saurabh Gangamwar
Saurabh Gangamwar

Reputation: 802

Follow these steps:-

  1. build an Angular application in production mode using this command ng build --prod
  2. I know two ways to deploy the application on AWS
    1) S3 Bucket
    2) EC2 instance using nginx

1) for deploying the application on S3 Bucket it's fairly simple. Follow this tutorial https://medium.com/codefactory/angular2-s3-love-deploy-to-cloud-in-6-steps-3f312647a659

2) for deploying the application on EC2 Instance

  • copy your prod build (/dist folder content) inside the app or any other directory of the AWS
  • Setup Nginx on your server https://www.nginx.com/blog/setting-up-nginx/
  • Create configuration file server.confconfiguration inside /etc/nginx/conf.d
  • In server.conf file use this configuration.this is a very simple configuration.make sure you provide the right path of the build & the directory must have the execution permission.you can also use Nginx as a load balancer.
server {
    root /home/ec2-user/app;

    location / {
    try_files $uri $uri/ /index.html;
    }
}

Upvotes: 3

Ronnie
Ronnie

Reputation: 1092

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.

Upvotes: 11

Related Questions