Deploying Angular Application on EC2 Instance with RDS PostgreSQL Database using PM2 in AWS Infrastructure

Objective: The objective of this is to deploy an Angular application on an EC2 instance and to set up an RDS PostgreSQL database in AWS infrastructure.

? The application has a front end and back end.

? We will do the setting of backend and frontend code on the local machine.

? We will manually install and configure Apache 2, Angular, Node.js, and npm on the EC2 instance.

? The final built frontend (dist folder) should be uploaded to the /var/www/html directory on the Ubuntu server, and the Apache web server should be configured to serve the application from the /var/www/html/dist/angular-16-crud directory.

? The backend will be managed using the PM2 process manager to ensure automatic restart on failures and server reboot.

Prerequisites:

? Basic knowledge of AWS services (EC2, RDS).

? Familiarity with Angular, Node.js, and npm.

? An AWS account with necessary permissions to create EC2 instances and RDS databases.

Overview of an application :

The Application which we will be deploying is a Web 2.0 application. The basic structure of Web 2.0 is :

Users access an application through the UI and then the UI communicates with the backend through API. APIs fire SQL queries to perform certain actions on the database. Then the APIs send responses to UI as per business rules. Hence APIs create an extra layer of security because the database is not directly exposed to UI/frontend which is exposed to end users. Also, an API response contains limited fields of the database and not all fields/tables of the database.??

Prerequisites for setting up of the backend code on local machine

• Should have RDS created on AWS
• Should have DBeaver installed on the local machine.?
• Should have Nodejs installed on your local machine.
• Should have Winrar installed on the local machine.?
• Should have VS Code installed on the local machine.?

Note: Always go for LTS versions for any software.??

Steps for creating RDS on AWS:

RDS is a Relational Database Service. SImply put it is an EC2 instance with a database installed on it.?

Step 1: Go to DB instance > Create database

Step 2: Select ‘Standard create’

Step 3: Select ‘PostgresSQL’ database because our code is configured on this database.

Step 4: Select the right database version - that is, the same version on which the code is configured (14.7.1). If you have any doubts, always check with the developer for the right versions.?

?

Step 5: Select ‘Free tier’ in templates. The other templates are paid versions and are not needed for this demo, but if usual work, business use the paid version for speed and reliability.?

Step 6: ‘DB instance identifier’ : Here you give a name to this RDS and you can identify your RDS in the AWS dashboard with this name.?

Step 7: In ‘Credentials Settings’ > Fill in a ‘Master username’ and a ‘Master password’ of your choice.?

Step 8: Enable ‘Public access’ to ‘Yes’ because if not then your database will not be accessible outside AWS infrastructure.

Step 9:? In ‘Additional configuration’ we need to enter the relevant database port number. The Postgres db works on port number 5432.?

Step 10: In ‘Additional configuration’? > Initial database name > give any name to the database [‘testdb’] which will be the name in postgres db.

Step 11: Click on? ‘Create database’ to finish the database creation.?

Step 12: Enable public access to server port, in the ‘edit inbound rules’ for this port number ‘5432’ for ‘any’ source on ‘custom TCP’ protocol and ‘save rules’.?

NOTE: To establish & check connection to Database and to see the records on the Database we need to install ‘DBeaver’ on our local machine. Download community edition (free version) - It will serve our purpose.

Steps to check connection to database from ‘Dbeaver’??

Step 1: Open ‘DBeaver’. Right Click > Create> Connection > Select your db(PostgreSQL). Then click on ‘Next’.?

Step 2: In ‘Connection settings’ > ‘Connect by’ option, choose ‘Host’. You can copy the Host address and port number from the ‘End point & port’ in the ‘Connection & Security’ section of the RDS.?

Step 3: Database : Put in the RDS database name i.e. testdb

Step 4: Username and password : Put in the RDS username and password.?

Step 5: Click on ‘Test Connection’.?

Steps to set up the backend code on the local machine:?

Step 1: Since the backend needs to be connected to the database which we have created on AWS. Open the code with VS Code. Go to ‘be’ code > app> config> dbconfig.js and update the following details from the RDS server.?

User - Which we have given while creating RDS on AWS

Password - Which we have given while creating RDS on AWS

DB - Which we have given while creating RDS on AWS

HOST - Copy end point from RDS

Step 2: Open the backend code with VS code.

In VS code, go to View > Terminal. It will open the powershell terminal. Click on the arrow and select gitbash from the dropdown.

Step 3: Check if nodejs is installed or not using the ‘node -v’.?

Step 4: Install dependencies - npm install. After this node_modules folder will be created and all the dependencies present in package.json file will be downloaded inside node modules.

Step 5 : Start the application using the following command ‘npm start server.js’

????

The backend application will start running on port number 8080 on the local machine, which can be tested by going into any browser and typing in ‘localhost:8080’.?

Deployment of backend on EC2 instance

Step 1 : Create an EC2 instance on AWS.

Step 2 : Connect to the EC2 Instance connect and? use the command ‘sudo apt update’ to update the APT with updated links for all downloads.?

Step 3: Install nodejs using the ‘sudo apt install nodejs’ command.?

Step 4 : Install npm using the ‘sudo apt install npm’ command.?

Step 5: Check the version of nodejs using the ‘node -v’ command.?

Step 6: Install n library to manage nodejs version using the ‘sudo npm install -g n’ command.?

Step 7: use ‘sudo n install 20’ command, to install the node 20 version because the code has the same version. Always check for the version of all dependencies from the developer.?

Step 8 : use ‘sudo n use 20’ command to use the new version of npm.?

Step 9 : Restart/Reconnect EC2 instance

Step 10: Check your node version using the ‘node -v’ command.?

Step 11: Create a directory on the EC2 instance where you want to deploy your code using ‘mkdir’ command and get in the new directory using the ‘cd’ command. You can check your present working directory by using the ‘pwd’ command.??

Step 12: Package/Zip the code before uploading to the server

Step13: On the local machine terminal, connect to the server through the ssh protocol. The command for this can be found in the EC2 connect options.?

Step14: Use the ‘scp’ command to upload the file to the server.?

Step 15 : We need to install the unzip software to unzip the uploaded zipped folder on the server using the ‘sudo apt install unzip’ command.? Then we need to use the ‘sudo unzip filename’ command to unzip the code.?

Step 16: Install dependencies using the ‘sudo npm install’ command.?

Step 17 : Start the application using the ‘sudo npm start server.js’ command.?

The backend code is running on port number 8080 of the EC2 instance. So we will edit inbound rules and open port number 8080 for public access.?

Step 18: Go to EC2 instance > security group > security id > Edit inbound rules > Add rule

Step 18 : Access the backend application by navigating to the public IP or domain name of the EC2 instance in a web browser.

Step 19: Here the application is running as the main process. If we exit the process, then the application will stop working.

To run the application as a background process, we need to install PM2.?

Step 20: Install PM2- P(rocess) M(anager) 2 - Run nodejs application as a background process. It has the capability to start on its own. Install PM2 on EC2 using the ‘sudo npm install -g pm2’ command. Run application using PM2> pm2 start npm - -name “be” - - start server.js

Access the backend application by navigating to the public IP or domain name of the EC2 instance in a web browser.

Setting up of Frontend code on Local machine:

Connection of frontend to backend:?

Before running the frontend code on our local machine we need to ensure that we establish a connection between our frontend and backends. For this, in the Frontend code folder, go to ‘src’ folder > app > services > tutorial.service.ts and update port no of const baseUrl. The backend code is running on port number 8080 of the local machine.

Step 1: Open the frontend code with VS code > Go to terminal.?

Step 2: Install dependencies using the ‘npm install’ command.?

Step 3: The front-end code is using angular so we need to install angular using the ‘npm install -g? @angular/cli’ command.?

??????

Step 4: Execute ‘ng serve’ command to build the frontend code and to start it on the local machine.

Step 5: Access the Angular application by navigating to the public IP or domain name of the EC2 instance on a web browser.

Verifying that the application is running correctly and is able to communicate with the RDS database for data storage and retrieval?

Step 1: In the application, make some test entries and submit.?

Step 2: Right click anywhere on the webpage and click on ‘Inspect’.?

Step 3: In the ‘fetch/XHR’ section check the ‘Payload’ details.?

Step 3: Check the ‘Response’ section for the validation.?

Deployment of frontend on the Server:

Step 1: Go to EC2 instance and connect it via EC2 Instance connect. Install the webserver using the command ‘sudo apt install apache2’.?

Step 2: Check the status of apache2 using the ‘systemctl status apache2’ command.?

Step 3 : Go to EC2 instance > Security groups >Security id > Edit Inbound rules >Add rule

Open port HTTP > Port Number 80

Step 4: Open the frontend code with VS code in the local machine. Go to ‘src’ folder > app > services > tutorial.service.ts.? Update the address of the backend in baseURL.

Backend is running on 54.198.194.76:8080 - This is the base URL of backend application.

Step 5 : In VS code, Select Terminal > New Terminal > Select Gitbash from dropdown. The gitbash terminal will open in VS code. Run command ‘ng build’.?

‘dist’ folder will be created after running the ng build command. The entire frontend folder will not be deployed and only this dist folder will be deployed.

Step 6: Zip the ‘dist’ folder.?

Step 7 : Upload dist.zip file on server using the ‘scp’ command.?

Step 8 : Unzip dist folder using the ‘unzip dist.zip’ command.?

Step 9 : Copy the dist folder to /var/www/html

Step 10 : Go to the dist/var/www/html location and use the ‘ls’ command. dist and index.html will be present and this index.html is the default page of apache.

Step 11: Go inside the dist folder by? : ‘cd /var/www/html/dist’ command? > ‘ls’ command > angular-16-crud > /var/wwww/html/dist/angular-16-crud > ‘ls’ command?

Step 12 : For changing the configuration we need to go to the etc folder. Inside the folder go to apache 2.

Inside apache 2 there are two folders sites-available and sites-enabled.?

Step 13: Go inside sites-available using the ‘cd’ command. There are two files inside it ,one is 000-default.conf for http and the other is default-ssl.conf for https.?

Step 14: Open up the 000-default.conf file using the ‘sudo nano’ command as we will be using http connection for this application.?

Step 15: In this file, the path of DocumentRoot will give an index.html file but we want to replace it with another html file present at /var/www/html/dist/angular-16-crud. We are actually just changing the path where it will find a new index.html.

Step 16 : We have changed the configurations so we will disable and re-enable sites using the below commands for the changes to reflect.?

sudo a2dissite - apache2 disable ‘conf filename’

sudo a2ensite - apache 2 enable ‘conf filename’.?

Step 17 : To activate the new configuration, run the command ‘sudo systemctl reload apache2’.?

Step 18: Access the Angular application by navigating to the public IP or domain name of the EC2 instance in a web browser

Thank you for reading this. If you have any questions or comments, please feel free to reach out to me by email at: anshusisodia@gmail.com.?