Deploy Angular/Java Springboot App to an AWS Amazon EC2 Instance, with RDS.

Hey Guys, in this article, I’m going to show you step by step how to deploy a Java SpringBoot (Backend) and Angular (Frontend) Application to an AWS EC2 Instance with Amazon Linux 2 AMI, and to connect backend with RDS database.

Section 1 :Deploy Java Springboot App to an AWS Amazon Linux 2 EC2 Instance [Backend Part]

1. Create your Instance :

Search for Ec2 in you aws account, click on “Launch instances” on the main page to start creating your new instance.

For the AMI(Amazon Machine Image — basically the OS and configuration of the instance we will use) choose the default Amazon Linux 2 AMI and select the t2.micro is part of the Free tier.

Security group decides who can access your instance. By default the SSH 22 will help us connect to the instance from our system.
Here we will also add a new security group so we can access port 8080

• Type: Custom TCP Rule
• Protocol: TCP
• Port Range: 8080
• Source: Anywhere

Click on Review and Launch, and make sure you download your Key Pair and keep it handy. You will be connecting to your instance using the .pem file that is unique.

2. Connect to your Instance :

We will use the pem file to connect to our instance.

To connect ssh to our instance we need the public IP of the ec2 instance and the pem file path in your computer, to run this command :

ssh -i C:\Users\IhebS\Desktop\AWS\keyPair.pem ec2-user@41.212.10.33

3. EC2 Instance configuration :

a. Java is installed by default : java -version

b. Install Java 8:sudo yum install java-1.8.0

c. Create user and group for Tomcat :

sudo groupadd --system tomcat 
sudo useradd -d /usr/share/tomcat -r -s /bin/false -g tomcat tomcat

c. Install and configure apache Tomcat 9:

# export VER="9.0.41"
# wget https://archive.apache.org/dist/tomcat/tomcat-9/v${VER}/bin/apache-tomcat-${VER}.tar.gz
# sudo tar xvf apache-tomcat-${VER}.tar.gz -C /usr/share/
# sudo ln -s /usr/share/apache-tomcat-$VER/ /usr/share/tomcat
# sudo chown -R tomcat:tomcat /usr/share/tomcat
# sudo chown -R tomcat:tomcat /usr/share/apache-tomcat-$VER/

d. Create Tomcat SystemD service :

sudo tee /etc/systemd/system/tomcat.service<<EOF
[Unit]
Description=Tomcat Server
After=syslog.target network.target

[Service]
Type=forking
User=tomcat
Group=tomcat

Environment=JAVA_HOME=/usr/lib/jvm/jre
Environment='JAVA_OPTS=-Djava.awt.headless=true'
Environment=CATALINA_HOME=/usr/share/tomcat
Environment=CATALINA_BASE=/usr/share/tomcat
Environment=CATALINA_PID=/usr/share/tomcat/temp/tomcat.pid
Environment='CATALINA_OPTS=-Xms512M -Xmx1024M'
ExecStart=/usr/share/tomcat/bin/catalina.sh start
ExecStop=/usr/share/tomcat/bin/catalina.sh stop

[Install]
WantedBy=multi-user.target
EOF

Enable and start our tomcat service :

sudo systemctl daemon-reload
sudo systemctl start tomcat
sudo systemctl enable tomcat

To access to your Tomcat you can go to aws UI and navigate to your Ec2 instance and get you public IPV4 DNS to access to Tomcat UI.

4. Tomcat admin user to upload WAR file :

sudo vim /usr/share/tomcat/conf/tomcat-users.xml

Once Tomcat users opened we can update them by copying this lines :

<role rolename="admin-gui"/>
<role rolename="manager-gui"/>
<user username="admin" password="TomcatP@sSw0rD" fullName="Administrator" roles="admin-gui,manager-gui"/>

Update webapps manager to avoid navigating error the web admin pages :

sudo su
vi /usr/share/tomcat/webapps/manager/META-INF/context.xml

Comment this line :

<Valve className="org.apache.catalina.valves.RemoteAddrValve"
         allow="127\.\d+\.\d+\.\d+|::1|0:0:0:0:0:0:0:1" />

To :

<!-- <Valve className="org.apache.catalina.valves.RemoteAddrValve"
         allow="127\.\d+\.\d+\.\d+|::1|0:0:0:0:0:0:0:1" /> -->

You can navigate to the manager page by using the link “manager webapp” on Tomcat UI.

5. Upload WAR file :

Scroll down to the ‘WAR file to deploy’ section and upload your .war file. This can be found under the Target folder of your project.

By clicking on the application loaded or appending the WAR file name to the end of the address, you would be able to test your application.

The Backend Part is over we will continue with the frotend part and in the end we will use RDS service form Amazon as our database for our application.

Section 2: Deploy Angular App on AWS EC2 instance [Frontend Part]

1. Configure the EC2 instance:

We will follow this steps to install some requirement to run our angular application in our ec2 instance.

sudo apt-get update

Install git to pull your code from your remote repo :

sudo apt-get install -y git

Install npm and nodejs :

sudo apt-get install -y npm
sudo apt-get install -y nodejs

We will use Nginx server

sudo apt-get install -y nginx

To test our nginx server running : Hit <public_ip>:8080, you will see NGNIX running page.

Next, install Angular CLI, needed to run Angular services.

sudo npm install -g @angular/cli

2. Configure Nginx server :

cd /etc/nginx/sites-available

Create a file your own project name :

sudo vim <your-project-name>

Update File with below content :

server {     
    listen 80;      
    listen [::]:80;      
    server_name http://your-project-name.com;      
    root /var/www/my-demo-app/dist;   
    server_tokens off;   
    index index.html index.htm;     
 
    location / {         
        # First attempt to server request as file, then         
        # as directory, then fall back to displaying a 404.          
        try_files $uri $uri/ /index.html =404;      
    }
}

In the above file, change ‘your-project-name.co’ with your site name and `root` details to your app-name.

Time to save this file and link it in another directory :

cd /etc/nginx/sites-enabled 
sudo ln -s ../sites-available/{your-site-name} 
ls -l
sudo rm default //removes default directory

3. Run your angular app in ec2 :

Go to a directory where we want to generate the build and clone your code.

cd /var/www
sudo git clone https://angular-app

Change directory to your app, and build it :

cd /var/www/my-angular-app
ng build --prod --build-optimizer

In case of some angular error your can run this command :

sudo npm update

This will generate the /dist folder inside /var/www/my-demo-app/dist

Now restart Nginx server :

service nginx restart

Now your App should be running, try public_ip in your browser.

Section 3: Create RDS database and link it to your bakend app.

Your can follow this link to create a RDS service from AWS :

Creating an Amazon RDS DB instance

Import your old db to the RDS service :

Migrate Your Application Database to Amazon RDS

When you create the RDS service, AWS offers you a domain name copy it, and paste it in URL path in application.properties spring boot before you generate the WAR file.

Conclusion:

I hope this tutorial helped you to deploy your application to EC2, in the next tutorial we will deploy a modern secure architecture that include Loadbalancer, autoscaling group, AMI to guarantee application avaibility and stability.