Efficient Deployment of an Angular Application on EC2 instance using Jenkins and GitLab:

We have discussed the manual deployment of an angular application on an EC2 instance in my previous article.

Now we will deploy it with the help of Jenkins. This will help us clearly understand and appreciate the power of an automation tool like Jenkins. Jenkins based deployment of the angular application on the EC2 instance is truly seamless and efficient.?

We have an EC2 instance on which we have installed Jenkins. You can refer to my other previous article for installing Jenkins on an EC2 instance.

The backend code is written in JavaScript so we need to install certain software on the EC2 instance for the code to work.?

Prerequisites to deploy backend code on EC2 instance are:

? Install nodejs > Code is written in JavaScript> sudo apt install nodejs

? Install npm > It will download dependencies>sudo apt install npm

? Install n library >It manages nodejs versions> sudo npm install -g n

? For installing the version of nodejs on which code is configured - sudo n install 20(Code is ? ? ? configured on version 20 of nodejs)

? After restarting of server > sudo n use 20

? Create RDS on AWS server?

? Install Dbeaver on your local machine

GitLab : GitLab is a web-based Git repository that provides free open and private repositories, issue-following capabilities, and wikis. It is a complete DevOps platform that enables professionals to perform all the tasks in a project–from project planning and source code management to monitoring and security.

Github, GitLab and Git bucket are remote repository service providers? and Git is the underlying technology.

We will upload the code on Gitlab from where jenkins will download the code.

• There are two ways from which we can upload the code on Gitlab:

1. Via Gitbash
2. Via VS code

1. Uploading code on Gitlab via Gitbash:

Pre-requisites:

• Should have an account on Gitlab.
• Git should be downloaded on your local machine.

Steps to upload code in Gitlab via Gitbash:

Step 1: Login into Gitlab.com with your credentials and Create a project in Gitlab and don't forget to uncheck ‘Initialize repository with a README’ under ‘Project Configuration’. Click on ‘Create Project’.

Step 2: On your local machine, go to the folder where the code is present. Right click anywhere to open Gitbash terminal.?

Step 3 : Go to the project which you have created on Gitlab. We can follow the command line instructions given in the project which we have created in GitLab.

Step 4 : Write commands for ‘Git global setup’.The ‘git config’ command is a convenience function that is used to set Git configuration values on a global or local project level. Use the ‘git init’ command to create a Git repository .git add and git commit commands will help you to track the code.

Step 5 : Go and check inside the project folder which we have created in Gitlab. We will find that code has been successfully uploaded in Gitlab.

?

2.Uploading code from local machine to Gitlab via VS code

Step 1: Open VS code where the code is present in your local machine.

Step 2: Click on ‘Initialize repository’: git init command will be executed.

Step 3: Click on Commit after writing something in the message : git add and commit command will be executed.

Step 4: Click on three dots > Remote > Add Remote. Go to Gitlab and clone the project URL. Paste the URL after clicking ‘Add Remote’ and give the remote name as origin .

?????????????????????????????????????????OR

Simply Select ‘Publish Branch’ and the code will be uploaded to Gitlab.?

?

Step 5 : Check in the project folder created in gitlab, the code has been successfully uploaded in Gitlab.

Deploying backend of an angular application on EC2 instance with Jenkins:

Step 1: Go to Jenkins > Configure > Source Code Management > Select Git

Step 2: Repository URL : Copy Clone with HTTPs URL from Gitlab after clicking on ‘code’. Jenkins is integrated with Gitlab.

Step 3: Credentials : Click on the ‘Add’ button. Since the project which we have created on Gitlab is a private project, we need to add our Gitlab credentials on Jenkins for it to be able to access the project.?

Step 4: Once credentials are added we can select these credentials from the dropdown. Select branch specifier (master or main) depending where your code is present in the Gitlab.?

Step 5: Go to ‘Build Steps’ and under the ‘Execute shell’, write the following commands:

node -v : Check the version of nodejs

npm -v : Check the version of npm

ls -al : list down all the files/directories present inside current directory

whoami - displays username of current user

Step 6: Check console output

Jenkins is connected to our Gitlab project through the URL which we have given. It will clone/download the code which is present there.

Step 7: Open the code in Gitlab to check the port number on which the backend code is running. Here the backend code is running on port number 3000.

??

Step 8: Go to EC2 instance > Security group > Inbound rules > Edit inbound rules> Open port number? 3000 on which backend code is running.?

Step 9:? We have created RDS on AWS Server. Our backend code is connected to a PostgreSQL database. You can read more about setting up RDS on AWS server in my previous article.

Step 10: Open DBeaver on your local machine. 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.

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

Username and password : Put in the RDS username and password.

Step 11: Go back to Jenkins > Build steps > Execute shell > write commands to deploy backend code on EC2

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

npm start server.js will run the backend code on the server? but the problem with it is it will run it as a main process. To run it as a background process we will use PM2.

PM2 - Process Manager > It helps run Nodejs applications as background processes. It has the capability to restart on its own.

Step 13: Install pm2 on server > sudo npm install -g pm2

Step 14: Go to Jenkins > Build steps > Execute shell > Use pm2 to deploy backend code on EC2 in background process.

Step 15: Check the logs in Console output

Step 16:?

pm2 status > It will tell which processes are still running and which processes have stopped running.?

pm2 stop > will stop the old ‘be’ process.?

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

Updating code on Gitlab:

Step 1: We will update the code on Gitlab and then verify that Jenkins has picked the updated code and deployed it on the EC2 instance.

Step 2: Go? to Jenkins > Build steps > Execute shell > write commands to deploy backend code on EC2

Step 3: Access the backend application by navigating to the public IP or domain name of the EC2 instance in a web browser. The updated code will be displayed on the server.?

Jenkins makes the deployment easy and there are further advantages of using Jenkins for deployment, which we will discuss in the future articles. Thank you so much for reading through the article. Please feel free to share your thoughts over email at [email protected].?