Automating Frontend App Deployment with Jenkins and Nginx

If you're managing a frontend web app, Jenkins and Nginx are powerful tools that can help automate deployment and ensure your app is served efficiently. This guide walks you through the steps to deploy your frontend app using Jenkins and Nginx.

Jenkins: A widely-used automation tool for building, testing, and deploying code. With its extensive plugin ecosystem, Jenkins is the perfect tool for automating web app deployments.
Nginx: A high-performance web server often used as a reverse proxy. It efficiently serves static content, making it ideal for frontend apps.

Prerequisites

Before getting started, make sure you have the following set up:

Jenkins installed and running.
Nginx installed on the server where the app will be deployed.
A frontend web application hosted on a Git repository (GitHub, Bitbucket, etc.).
Nginx configuration.

Jenkins installed and running

Follow below steps to install and run jenkins on 8080 port of your EC2 instance.

sudo apt update
sudo apt install fontconfig openjdk-17-jre
java -version

sudo wget -O /usr/share/keyrings/jenkins-keyring.asc \
  https://pkg.jenkins.io/debian-stable/jenkins.io-2023.key
echo "deb [signed-by=/usr/share/keyrings/jenkins-keyring.asc]" \
  https://pkg.jenkins.io/debian-stable binary/ | sudo tee \
  /etc/apt/sources.list.d/jenkins.list > /dev/null
sudo apt-get update
sudo apt-get install jenkins

you need sudo visudo (or appropriate permissions) when copying files from the Jenkins workspace to the Nginx default path (/var/www/html) because regular users (including Jenkins) do not have write access to this directory by default.

  sudo visudo
  jenkins ALL=(ALL) NOPASSWD:ALL

Access Jenkins using http://<public-ip>:8080.

Nginx installed on the server where the app will be deployed

sudo apt-get update
sudo apt install nginx
sudo systemctl enable nginx

Creating Freestyle Job

Give your github repo where your frontend app exists. If it is a private repo, give credentials as well. ( username (username of github) & password (personal access token )).

Setting up webhook trigger

Repo —> settings —> webhook —> give your jenkins url/github-webhook/ ex: http://3.80.153.218:8080/github-webhook/

Test the webhook by modifying or adding files in github. As soon as we modify the repo then jenkins job automatically runs and builds.

Build Steps

"When we build the Jenkins job, all the frontend files will be moved to the Jenkins workspace. We then need to copy these files to Nginx's default location, where the server looks for files to run the app."

When the Jenkins job is executed, all frontend files are stored in the Jenkins workspace directory. The command sudo cp * /var/www/html/ is used to copy these files from the workspace to Nginx's default location. To avoid permission issues, sudo is required since /var/www/html/ is a privileged directory. Ensure the Jenkins user has appropriate sudo privileges for this command to run smoothly. ( Check above for setting privileges in sudo visudo )