Deploying Angular App in Amazon EC2 Server

What is Amazon CodeCommit?

  • AWS CodeCommit is a version control service hosted by Amazon Web Services that you can use to privately store and manage assets (such as documents, source code, and binary files) in the cloud. For information about pricing please refer this link AWS CodeCommit.
  • AWS CLI or AWS CodeCommit console, and the AWS CodeCommit service are used to create and manage repositories
  • From your development machine, use Git to run git clone, specifying the name of the AWS CodeCommit repository. This creates a local repo that connects to the AWS CodeCommit repository.

The following figure shows how to get CodeCommit Repo URL(clone URL). Click on clone HTTPS to copy.

Ex: https://git-codecommit.us-west-2.amazonaws.com/v1/repos/vf-Angular-Source
Step:1 Copy clone https URL from the codecommit repo

What is Amazon EC2 Instance?

  • An EC2 instance is nothing but a virtual server in Amazon Web services terminology.
  • It stands for Elastic Compute Cloud.
  • It is a web service where an AWS subscriber can request and provision a compute server in AWS cloud.
  • An on-demand EC2 instance is an offering from AWS where the subscriber/user can rent the virtual server per hour and use it to deploy his/her own applications.
  • The instance will be charged per hour with different rates based on the type of the instance chosen. AWS provides multiple instance types for the respective business needs of the user.
  • Thus, you can rent an instance based on your own CPU and memory requirements and use it as long as you want.
  • You can terminate the instance when it’s no more used and save on costs. This is the most striking advantage of an on-demand instance- you can drastically save on your CAPEX.

Let us see in detail how to launch an on-demand EC2 instance in AWS Cloud.

Login and access to AWS services

Step 1: In this step,

  • Login to your AWS account and go to the AWS Services tab at the top left corner.
  • Here, you will see all of the AWS Services categorized as per their area viz. Compute, Storage, Database, etc. For creating an EC2 instance, we have to choose Compute EC2 as in the next step.
  • Open all the services and click on EC2 under Compute services. This will launch the dashboard of EC2.

Here is the EC2 dashboard. Here you will get all the information in gist about the AWS EC2 resources running.

Step 2: On the top right corner of the EC2 dashboard, choose the AWS Region in which you want to provision the EC2 server.

Here we are selecting US West(Oregon). AWS provides 16 Regions all over the globe.

Step 3: In this step

  • Once your desired Region is selected, come back to the EC2 Dashboard.
  • Click on ‘Launch Instance’ button in the section of Create Instance (as shown below).
  • Instance creation wizard page will open as soon as you click ‘Launch Instance’.

Choose AMI

Step 1: In this step we will do,

  • You will be asked to choose an AMI of your choice. (An AMI is an Amazon Machine Image. It is a template basically of an Operating System platform which you can use as a base to create your instance). Once you launch an EC2 instance from your preferred AMI, the instance will automatically be booted with the desired OS.
  • Here we are choosing the AWS Marketplace and search MEAN Certified by Bitnami Amazon Linux (64 bit) AMI.
  • The following screen shows Bitnami Pricing details and Click on Continue button.

Choose EC2 Instance Types

Step 1: In the next step, you have to choose the type of instance you require based on your business needs.

  • We will choose t2.micro instance type, which is a 1vCPU and 1GB memory server offered by AWS.
  • Click on “Configure Instance Details” for further configurations.
  • In the next step of the wizard, enter details like no. of instances you want to launch at a time. Here we are launching one instance.

Configure Instance

Step 1: Click on ‘Add Storage’ to add data volumes to your instance in next step.

Add Storage

Step 1: In this step, we do the following things,

  • In the Add Storage step, you’ll see that the instance has been automatically provisioned a General Purpose SSD root volume of 8GB. ( Maximum volume size we can give to a General Purpose volume is 16GB)
  • You can change your volume size, add new volumes, change the volume type, etc.
  • AWS provides 3 types of EBS volumes- Magnetic, General Purpose SSD, Provisioned IOPs. You can choose a volume type based on your application’s IOPs needs.

Tag InstanceStep 1: In this step

  • you can tag your instance with a key-value pair. This gives visibility to the AWS account administrator when there are many numbers of instances.
  • The instances should be tagged based on their department, environment like Dev/SIT/Prod. Etc. this gives a clear view of the costing on the instances under one common tag.
  • In this example, I provided Key as a “Name” and Value as a “vi-apparel”.

Configure Security GroupsStep 1: In this next step of configuring Security Groups, you can restrict traffic on your instance ports. This is an added firewall mechanism provided by AWS apart from your instance’s OS firewall.

You can define open ports and IPs.

  • Since our server is a web-server, we will do the following things
  1. Creating a new Security Group
  2. Naming our SG for easier reference
  3. Defining protocols which we want to be enabled on my instance
  4. Assigning IPs which are allowed to access our instance on the said protocols
  5. Once, the firewall rules are set- Review and launch.

In This Example, I took additional Rule by clicking Add Rule and provided Type as “custom TCP”, Port Range as “4200” and source as Anywhere.

Review Instances

Step 1: In this step, we will review all our choices and parameters and go ahead to launch our instance.

Step 2: In the next step you will be asked to create a key pair to login to you an instance. A key pair is a set of public-private keys.

AWS stores the private key in the instance, and you are asked to download the public key. Make sure you download the key and keep it safe and secured; if it is lost you cannot download it again.

  1. Create a new key pair
  2. Give a name to your key
  3. Download and save it in your secured folder, When you download your key, you can open and have a look at your RSA private key.
  4. Once you are done downloading and saving your key, launch your instance.
  • You can see the launch status meanwhile.
  • You can also see the launch log.
  • Click on the ‘Instances’ option on the left pane where you can see the status of the instance as ‘Pending’ for a brief while.
  • Once your instance is up and running, you can see its status as ‘Running’ now.

Note that the instance has received a Private IP from the pool of AWS.

  • Now am going connect with EC2 instance with Git Bash.
  • Select EC2 Instance and click on Connect and then copy the SSH client.
  • Open the Key pair .pem file corresponding folder and right click to open the Git bash terminal.
  • Paste the copied SSH client from the EC2 Connect in Git bash terminal.
  • Then enter “Yes” to continue connecting.
  • Enter copied clone URL from code commit repository from step 1 as mentioned above in Code Commit Section.
  • Enter user git credentials (UserName, Password) to access the Code commit repository as shown in Screenshot.

Command: git clone https://git-codecommit.us-west-2.amazonaws.com/v1/repos/vf-Angular-Source

  • Use this command to switch the cloned project directory.

“cd vf_angular_source”

  • Enter “ npm install ng-common ” command to install all the project corresponding packages.

NOTE: Use this command in the project directory.

  • Enter “ sudo npm install -g @angular/cli ” to install angular/cli package.
  • To run the angular project use this command “ng serve –host 0.0.0.0”
  • Run the angular project forever in EC2 server by using the following command.

forever start node_modules/@angular/cli/bin/ng serve — host 0.0.0.0

  • Copy the EC2 instance public IP(IPV4 Public IP) as localhost & port as 4200 paste it in the browser you can access the Angular app from there.

Ok, that’s it. I hope you found this case useful! See you next time.