Manual Deployment of Angular app to AWS EC2

In this blog, we will learn, how to deploy the angular application to the AWS instance. I have divided this blog into two parts series, in the first part, we will create an AWS EC2 instance, deploy the angular application to the EC2 instance by using the manual approach and configure it with the NGINX web server. In the second part, we will automate the deployment process by creating the CICD pipeline using GitHub actions. It is assumed that you are familiar with basic AWS terms such as EC2 instance, security group, etc.

Creation of Angular Application:

To create the basic angular application, angular CLI must be installed, if it's not installed, please install it using the following command.

npm install -g @angular/cli

You can either use the existing application or create the new one if you want to create a new application, use the following command to create a new angular app.

ng new project-name

Creation of EC2 instance :

To create an ec2 instance, you need to log in and create an ec2 instance of Ubuntu OS. If you need to create an AWS account please refer to the following URL.

Free Cloud Computing Services - AWS Free Tier

If you are creating a new account for the first time then you will be eligible for AWS free tier.

After logging in select the EC2 instance by searching it in the top search bar. Click on the Launch Instance button. Now while creating the new EC2 instance select the ubuntu from the Amazon Machine Image (AMI) and by keeping the default configuration click on the launch instance. Please create a new PEM file or use the existing one at your convenience. Now, wait for some time so that the EC2 instance will be created. Please refer to the following image for a better understanding.

Connect to the EC2 instance :

Once the EC2 instance is created you need to connect to the created instance. Now there are multiple ways to connect with an EC2 instance.
We can use the tools like Putty, It is one of the most popular ssh clients for the windows operating system. It is used for connecting remote Linux operating systems. Putty is not limited to Windows only. You can also use this open-source software on Linux and macOS. For more details about how to use the Putty please refer to the link.

For Linux operating system we can use the SSH client to connect with the EC2 instance, from the terminal window we can provide the command with the necessary details to connect with the instance. To use the ssh command we need to provide the PEM key of the instance, the username and the public DNS name or IPv6 address for your instance. Please refer following command structure for more understanding.

// connect using instance public dns name
ssh -i /path/key-pair-name.pem instance-user-name@instance-public-dns-name

// connect using IPV6 address
ssh -i /path/key-pair-name.pem instance-user-name@instance-IPv6-address

For more details about the EC2 instance connect using the SSH client please refer to the link.

You can choose any way as per your convince, for simplicity, I am going to use the EC2 instance connect to connect the instance through the browser. To use this option click on the connect button in the ec2 instance details. Please refer following images for a better understanding.

Instance connect options

Now click on the connect button, Please refer to the following screen for reference.

AWS instance connect

NGINX web server installation :

Once the EC2 instance connection is done then we are going to install a web server here we can use either apache2 or Nginx web server as per your preference. For this blog, we are going to use the NGINX web server. Now run the following commands to install the NGINX.

sudo -s - for super user
sudo apt update - to update the existing packages
sudo apt install nginx - to install the nginx web server

Now we can use the installed webserver to render the web files. But before that, we need to update the security group of the newly created EC2 instance and add the HTTP port 80 of a protocol of TCP. After updating the security group it will look as follows.

AWS instance security group

Once the security group is updated and if we go to the Public IPv4 address of the EC2 instance we will see the following screen, which means the NGINX web server is successfully installed and ready to use.

NGINX web server home page

Allocating the Elastic IP address:

This is an optional part, we can allocate the elastic IP address to the EC2 instance, which AWS uses to manage its dynamic cloud computing services. The public IP address may be lost when we stop the instance, in order to retain the single IP address we can assign the elastic IP address to it, there are multiple advantages associated with it for more details please refer to the following URL.

Elastic IP addresses

Moving the angular code to the ec2 instance :

Now we can proceed to move the angular code build on the EC2 instance. Create the build on the local system, using the following commands. Update the .gitignore file and remove the /dist from there. For the creation of the build, we can either create a development level build or a production level build. To create a production build we need to add the production build creation command in the scripts section of the package.json file.

"build:prod": "ng build --configuration production" -> For angular version 12 and above 
"build:prod": "ng build --prod" -> For versions older than 11

After the scripts section is modified we can use the following command to create a production build.

npm run build:prod

To create a development build we can simply use the following command.

npm run build

After the angular code build is created then commit the code and push it on the Github repository. Once the code is available in the GitHub repository we can take the clone of the code there. Check if the git is installed there or not, if it's not installed please use the following commands to install the git.

sudo apt update
sudo apt install git

To verify if the git is installed or not we can use the following command to verify.

git --version

Once the git is installed successfully move to the repository /var/www/html
and take the repository's clone there. This is one way by which we moved the code to the EC2 instance but there are alternate ways, for ubuntu OS we can follow the SCP(secure copy) command to copy the angular build to the EC2 instance. Please refer to the following command to copy the build using the SCP command.

scp -r -i ./key-pair.pem ./path/to/files/ <username>@<public-ip-address>:/pathwhere/you/need/to/copy

following are the details of the mentioned copy command.
scp: IT is a network protocol used to securely copy files/folders between Linux systems on a network.
-r: To recursively copy all the folder content, subfolders and their data.
-i ./key-pair.pem: Specify the file from which to read the identity for public key authentication.
username: username of the ec2 instance
public-ip-address: public IP address of the EC2 instance

On the Windows OS, we can use Filezilla or any option to transfer the build folder to the EC2 instance. Please refer to the link for more details about Filezilla.

NGINX configuration update :

After the project build is available on the EC2 instance, we have to modify our NGINX configuration file so our angular project is rendered there successfully. Open the configuration file using the following command.

vim /etc/nginx/sites-enabled/default

In this file, we need to do some modifications there for a few fields. Update the root field and provide the path of the angular code build, the path of the angular code build may vary on the basis of what type of method is used to transfer the code to the EC2 instance. If code is moved using git as specified above, then the root path will be looking as follows.

root /var/www/html/angular-demo/dist/angular-demo/;

In my case, I have used the SCP command to move the created build only so my path looks as follows.

root /var/www/html/angular-demo/;

The server_name field needs to update if you have a domain name with you, then it can be updated in the configuration file. If your domain name is example.com then it will look as follows.

server_name example.com www.example.com;

In our case, we don’t have any domain name so we will keep it as it is.

server_name _;

location block is used to define how NGINX should handle requests for different resources and URIs. In the location block, either we can use proxy-pass and forward the request to a server running on different IPs or on the same IPs but different ports. In our case, we are going to configure it to serve the same root location to serve the static page.

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

The NGINX configuration file will look as follows.

server {
        listen 80 default_server;
        listen [::]:80 default_server;      
  
        #provide the build path
        root /var/www/html/angular-demo/;
        index index.html index.htm index.nginx-debian.html;
        server_name _;
        location / {
             try_files $uri $uri/ /index.html;
        }
}

After mentioned modifications are done save the file and come back to the terminal, restart the NGINX server so the changes should be reflected. Please use the following command to restart the NGINX server.

sudo service nginx restart

The NGINX is sever restarted successfully, then we can check the status of the NGINX server using the following command.

sudo service nginx status

Now we can go to the following URL and check the deployed code.

http://public-ip-address-ec2-instace

The following screen will be visible, please refer to the following image for the same.

Angular app page

Conclusion:

By following the simple steps we successfully created an EC2 instance, deployed an angular application on it and configured it with the NGINX web server to serve the angular application. If any issues or any suggestions please let me know in the comments.

In the upcoming blog, we are going to automate the deployment process by creating a CICD pipeline with GitHub actions, please refer to the link for the next blog.