How to Set Up a Jenkins Pipeline for an Angular App and Deploy via Nginx

Introduction

This guide will walk you through setting up a Jenkins pipeline to build and deploy an Angular application using Git SCM and a Jenkinsfile. The built application will then be served using Nginx.

Prerequisites

• Jenkins installed and running.

• Jenkins plugins: Git Plugin, NodeJS Plugin.

• Angular CLI installed.

• Nginx installed on the server.

• A Git repository containing the Angular project.

Step 1: Creating the Jenkins Pipeline

1.1 Create a New Pipeline Job in Jenkins

• Open Jenkins and go to New Item.

• Select Pipeline and give it a name.

• Under the Pipeline section, choose Pipeline script from SCM.

• Set the SCM to Git and enter the repository URL.

• Specify the branch to build (e.g., main).

• Set the Script Path to Jenkinsfile.

Step 2: Writing the Jenkinsfile

Here’s the Jenkinsfile that defines the CI/CD pipeline:

Explanation of Jenkinsfile Blocks

• Pipeline Block (pipeline): Defines the overall pipeline structure.

• Agent (agent any): Runs on any available Jenkins agent.

• Environment Variables (environment): Defines variables like BUILD_DIR and DEPLOY_DIR.

• Stages (stages): Clone Repository: Pulls the latest code from Git. Verify Node.js and npm: Ensures the environment has the necessary tools. Install Dependencies: Uses npm ci to install dependencies. Build Angular App: Runs ng build to generate production files. Deploy: Copies built files to the target directory.

• Post Actions (post): Defines actions for success and failure scenarios.

Step 3: Setting Up Nginx to Serve the Angular App

After deployment, we need to configure Nginx to serve the Angular application.

3.1 Create an Nginx Configuration File

Create a new configuration file for your application:

Add the following content:

3.2 Enable the Configuration

3.3 Test and Restart Nginx

Before restarting, test the Nginx configuration:

If the test is successful, restart Nginx:

Step 4: Running the Pipeline

1. Go to Jenkins and open the pipeline job.

2. Click Build Now.

3. Monitor the build progress under the Console Output.

4. Once the deployment is complete, visit http://ims-alert.example.com to verify.

Conclusion

In this guide, we set up a Jenkins pipeline for an Angular application using Git SCM and a Jenkinsfile, deployed it to a server, and configured Nginx to serve it. This setup ensures a smooth CI/CD process with automated deployment. 🚀