Three tier web Application Deployment in a single instance of AWS – EC2

Web Application Deployment in AWS – EC2

 

About the Application:

This tree-tier web application is created using Nodejs, Angular and MySQL. This project also uses Ant Design for its UI and SwiperJS for its carousels. The backend is built using Node.js, Express.js, Joi for input validation, and JWT for authentication.

Functionality

The application allows you to browse the home page for products, check out each of the details of the product and add them to your cart for a later checkout.

Adding products to your cart will make a notification pop up and indicate that the product was added successfully.

You are able to see a preview of the cart on the top bar or even navigate to a more detailed cart page.

The checkout process is a multi-page form that at the end allows you to place an order that will later be shown on the order history page.

Github link: https://github.com/devopsenlight/web-app-deployment-on-cloud

 

 

NOTE:  Here we use one EC2 instance to install the frontend, backend, and database.

 

 

 

Overview of the Steps:

Step 1: Create an AWS Linux machine using AWS Linux AMI

Step 2: Install GIT, NPM, NVM, Angular and MySQL

Step 3: Download Code and install node modules

Step 4: Import the database and update it

Step 5: Changes related to running the application in the Production environment.

Step 6: Start the Application frontend and backend in two separate session

Step 7: Check the application in the web-browser

 

 

 

Step 1: Create an AWS Linux machine using AWS Linux AMI, using instance type t2.small ( 1 CPU and 2 GB memory) or some higher configuration machine.

 

Edit the Linux machine’s security group and inbound rules allow ports 4200, 5000, and 3306.

 

Step 2: Installation

 

Before running below commands switch to root user by executing cmd:  sudo su –

• Install GIT: yum install git
• Install NPM: yum install npm
• Install Node Version Manager: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
• run command:   source ~/.bashrc
• Install Node version 16 and use it :

nvm install 16

nvm use 16

• Install Angular:  npm install -g @angular/cli@14

 

• Install and configure MySQL:

sudo yum update -y
sudo rpm -Uvh https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm
rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022
sudo yum install mysql-community-server
sudo systemctl start mysqld
sudo grep 'temporary password' /var/log/mysqld.log

 

mysql_secure_installation ( change password and say “yes” for other options)

mysql -u root -p
create database webapp;
CREATE USER webapp_u@localhost IDENTIFIED BY 'Webapp_1234';
GRANT ALL PRIVILEGES ON webapp.* TO webapp_u@localhost;
FLUSH PRIVILEGES;
exit;

 

 

Step 3: Download Code and install node modules

• cd /home
• mkdir webapp
• cd webapp
• git clone https://github.com/devopsenlight/web-app-deployment-on-cloud.git

 

• Install node modules for both frontend and backend.

cd /home/webapp/web-app-deployment-on-cloud/backend

npm install

cd /home/webapp/web-app-deployment-on-cloud/client

npm install

 

 

Step 4: Import the database and update it (some hands-on for the database)

• Use provided sample sql database and import it to mysql

cd /home/webapp/web-app-deployment-on-cloud/backend

mysql -u root -p webapp < sql_dump.sql

 

 

• Delete mandatory column “username” from table “users” from database “webapp”;

mysql -u root -p
show databases ;
use webapp;
show tables;
select * from categories;
select * from users;
ALTER TABLE users DROP COLUMN username;
select * from users;
exit;

 

 

Step 5: Changes related to running the application in the Production environment.

• Create a folder called env in the root of the backend directory and create a produciton.env file.

mkdir -p /home/webapp/web-app-deployment-on-cloud/backend/env

cd /home/webapp/web-app-deployment-on-cloud/backend/env

vi production.env          ( and paste below content in the file)

[root@ip-172-31-80-191 env]# cat production.env

PORT=5000
DB_HOST='localhost'
DB_USER='root'
DB_PASSWORD='********'
DB_NAME='webapp'

 

 

• Edit environment.prod.ts file

mkdir -p /home/webapp/web-app-deployment-on-cloud/client/src/environments

cd /home/webapp/web-app-deployment-on-cloud/client/src/environments

vi environment.prod.ts

 

[root@ip-172-31-80-191 environments]# cat environment.prod.ts

export const environment = {
production: true,
apiUrl: 'http://ec2-35-175-245-177.compute-1.amazonaws.com:5000/api/v1/',
};

In the above environment.prod.ts file grep the apiURL value from the Amazon ec2 Public IPv4 DNS name.

 

 

 

Step 6: Start the Application frontend and backend in two separate session

• Start Frontend

cd /home/webapp/web-app-deployment-on-cloud/client

ng serve --prod --port 4200 --host 0.0.0.0 --disable-host-check  (- this step takes some time)

 

 

• Start Backend

cd /home/webapp/web-app-deployment-on-cloud/backend

npm run start

 

 

Step 7: Check the application in the web-browser

ec2-35-175-245-177.compute-1.amazonaws.com:5000 (Use your own Amazon ec2 Public IPv4 DNS name)

ec2-35-175-245-177.compute-1.amazonaws.com:4200

That’s all – your application is up and running.

 

Please write your comments below.