Efficient Angular Applications Deployment via Jenkins with Git on AWS Infrastructure: A Comprehensive Guide

Deploying Angular applications requires a well-organized pipeline that combines version control, automation, and scalable architecture. By integrating GitLab, Jenkins, AWS EC2 instances, RDS (Relational Database Service), and a master-slave architecture, you can establish a robust deployment process. In this article, we'll guide you through deploying an Angular application using a simple freestyle deployment method while utilizing GitLab as your code repository.

Prerequisites:

1.           Familiarity with Angular framework and backend technologies.

2.           AWS account with admin access.

3.           Understanding of Git version control and GitLab.

4.           Basic knowledge of Jenkins and master-slave architecture.

Step 1: Configure AWS Resources:

1.      Set up an RDS instance to host your application's database. Choose the appropriate engine, instance class, and storage.

Edit inbound rules

2.      Set up EC2 instance as a master-slave architecture

3.      Check the RDS status by connecting it to DBeaver

4.      Set up necessary prerequisites on the QA server:

·        Execute sudo apt update then install java , apache2

Install node js : sudo apt install nodejs.

·        Implement sudo apt install npm.

·        Install sudo npm install -g n

·        Perform sudo n install 18

Step 2: Prepare Angular Application:

       1.  Ensure your Angular application is well-structured and organized.

       2.  In Backend code, under db.cnfig.js file , Copy the End point of RDS in Host and run below command: npm install , npm start

Step 3: Set Up GitLab Repository:

1.    Create a GitLab project to host your Angular application's source code.

2.    Push your application code to the GitLab repository. Maintain version control for streamlined development.

• Run the following command to initialize Git in the local directory: git init

• Add the files you want to track and push to Git using the following command:git add .

The . adds all files in the current directory. You can also specify individual filenames to add only specific files.

•  Commit the changes you've added with a meaningful commit message:

git commit -m "Initial commit"

•   Link your local repository to the remote repository you created on the Git Lab. Replace <remote-url> with the actual URL of your remote repository:

add origin <remote-url>

•  Push your local repository to the remote repository's main branch (or the appropriate branch name) using:git push -u origin main

The -u option sets up tracking, allowing you to use git push in the future without specifying the branch.

Now my local Backend folder is reached to git lab .From here we can easily connect to Jenkins

By copying this url - https://gitlab.com/angular_application/my-tutorial-be

Step 4: Configure Jenkins & Master-Slave Architecture Setup:

1.              Install Jenkins on a dedicated EC2 instance (as discussed in my previous post).

2.          Launch a Jenkins master instance (following the previous post) and an EC2 instance for the slave node.

2.           Add the slave node to the Jenkins master:

•            Navigate to "Manage Jenkins" > "Manage Nodes and Clouds" > "New Node".

•            Configure the node settings and provide the necessary credentials.

Step 5: Setting up Jenkins project and Deploy Backend onto the QA Server:

1.      Initiate a new FreeStyle project – Backend deployment build and label it as "QA"

2.      Within the project's configuration, choose the Git option under Source Code Management (SCM) and furnish your GitLab credentials

3.      Arrange the build procedures to conduct dependency installation through npm install and application initiation using npm start.

4.      Ensure the QA server status is active within Jenkins:

5. Save and trigger the build

Jenkin is running for long time because application is running on main process, we need pm2, Stop Jenkins forcefully.

Step 6: Configuring Jenkins Build Procedures:

a. Enhance the build steps to encompass npm install.

b. Establish PM2 on the EC2 server via npm install -g pm2.

c. Start the application using PM2:

sudo pm2 start npm --name "be" – start

d. Save and trigger the build to deploy the changes

It works.

Step 7: Validating the Pipeline :

To stop the current running application use command : sudo pm2 stop be.

Save and trigger build

Make requisite code modifications, commit your changes, and then push the revisions to GitLab.

Trigger a Jenkins build process to roll out the modifications.

Verify the alterations by accessing the application through your web browser.

Step 8: Automated QA Deployment :

1.           Modify the Jenkins project configuration to include a post-build action for Sanity tests. So once the application is deployed successfully, your Sanity tests will run.

Create a Freestyle project for Sanity Test build with 'QA' label and give a command in Execute shell , Save and build the trigger.

Now connect Sanity project with backend deployment build:

In backend deployment build – configure :

Go to post build Actions – Build other projects - Trigger only if build is stable

Save and build now

Automatically Sanity project will also run after Backend build

2.           Use an SSH plugin to copy the application artifacts from the Jenkins workspace to the QA server.

3.           Execute necessary setup or installation commands on the QA server.

By following this comprehensive guide, you'll establish a streamlined deployment pipeline for your Angular application using GitLab, Jenkins, AWS EC2 instances, RDS, and master-slave architecture. This approach enhances the development process and ensures consistency and reliability in your deployments. Customize these steps based on your project's specific requirements and consider adding advanced features such as automated testing, infrastructure provisioning scripts, and more.