https://github.com/shrsyc/mean-app-docker-deploy
Containerized MEAN app with automated CI/CD via Jenkins, using Docker, Docker Hub, GitHub Webhooks, and Nginx for reverse proxy.
https://github.com/shrsyc/mean-app-docker-deploy
docker docker-compose dockerhub jenkins nginx webhook
Last synced: 2 months ago
JSON representation
Containerized MEAN app with automated CI/CD via Jenkins, using Docker, Docker Hub, GitHub Webhooks, and Nginx for reverse proxy.
- Host: GitHub
- URL: https://github.com/shrsyc/mean-app-docker-deploy
- Owner: shrsyc
- Created: 2025-04-07T14:51:58.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-25T08:08:25.000Z (about 1 year ago)
- Last Synced: 2025-08-16T14:02:58.569Z (10 months ago)
- Topics: docker, docker-compose, dockerhub, jenkins, nginx, webhook
- Language: TypeScript
- Homepage:
- Size: 153 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CI/CD pipeline to deploy MEAN stack app
## Project Overview
A containerized full-stack MEAN (MongoDB, Express, Angular, Node.js) application integrated with a Jenkins CI/CD pipeline. It automates the process of building, testing, and deploying using Docker, Docker Compose, and GitHub Webhooks, with Docker Hub for image storage and Nginx for frontend delivery and reverse proxying.
### Key Files
- [backend/Dockerfile](backend/Dockerfile) – Docker setup for the Node.js backend
- [frontend/Dockerfile](frontend/Dockerfile) – Docker setup for the Nginx-Angular frontend
- [frontend/nginx.conf](frontend/nginx.conf) – Custom Nginx config for frontend deployment
- [Jenkinsfile](./Jenkinsfile) - Contains jenkins pipeline script
- [docker-compose.yml](./docker-compose.yml) - docker-compose file to run frontend, backend, database containers together as a same service
### Project Structure
📁 MEAN-app-docker-deploy
├── 📁 backend
│ ├── 📁 app
│ ├── 📄 server.js
│ └── 📄 Dockerfile
│
├── 📁 frontend
│ ├── 📁 src
| ├── 📄 nginx.conf
│ └── 📄 Dockerfile
│
├── 📄 Jenkinsfile
├── 📄 docker-compose.yml
└── 📄 README.md
## System Configurations
> [!NOTE]
> AWS ec2 Ubuntu VM , 2vCPU 8GiB of memory and 20GiB of storage
### Install git, java, docker, docker-compose and jenkins
All these installations and configurations are done using user data script which will be the first script to be run as root user after creating the VM.
#!/bin/bash
apt update -y
apt upgrade -y
apt install git openjdk-17-jre-headless docker.io docker-compose -y
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
apt-get update
apt-get install jenkins -y
usermod -aG docker jenkins
systemctl restart jenkins
systemctl enable jenkins
## Jenkins Configurations
To visualize and manage your CI/CD pipeline effectively, install the following recommended Jenkins plugins:
- **Pipeline: Stage View** – Visualize stages in your pipeline.
> You can install these from **Jenkins Dashboard → Manage Jenkins → Plugins**.
### Jenkins Credentials
- Add **DockerHub credentials** (`Username with token`) to Jenkins under `Manage Jenkins → Credentials → Global` for secure authentication.
- These credentials are used in the Jenkins pipeline to **push Docker images** to DockerHub without exposing sensitive data in the script.
- Dockerhub token with read write access
### Jenkins Pipeline
- Go to Jenkins Dashboard → New Item, choose Pipeline, and give it a meaningful name and description in the General section.
- In the Build Triggers section, select "GitHub hook trigger for GITScm polling" to automatically run the pipeline when a new commit is pushed.
- In the Pipeline section, choose "Pipeline script from SCM", set SCM to Git, paste your GitHub repository URL, select the desired branch, and provide the path to your Jenkinsfile and then apply and save.
## GitHub Webhook Setup
- In your **repository settings**, go to **Webhooks** and add the **Payload URL** and set the content type to **application/json**.
- ✅ If you see a **green check mark**, the webhook is active.
- Any new commits pushed to the repo will automatically trigger the **Jenkins pipeline**.
## Nginx
- [frontend/nginx.conf](frontend/nginx.conf) – Custom Nginx config for frontend deployment
- Serves the Angular app on port 80 and uses Nginx reverse proxy to route /api/ requests to the backend, avoiding CORS issues by keeping all traffic under the same domain.
### Serves at Port 80
- Nginx listens on port 80, making the Angular frontend accessible via http:// without needing to specify a port.
server {
listen 80;
...
}
### API Reverse Proxy
- Forwards all /api/ requests from frontend to the backend container running on `http://backend:8081`.
location /api/ {
proxy_pass http://backend:8081/api/;
...
}
## CI/CD pipeline
- As soon as a commit is pushed to the main branch, the configured GitHub webhook triggers the Jenkins pipeline automatically.
- Or you can manually trigger the build from the Jenkins dashboard without any code changes.
### docker images
- Jenkins pipeline automatically builds Docker images during each run.
### docker hub
- Built and pushed frontend and backend Docker images to Docker Hub for remote storage and deployment.
### docker-compose
- Docker Compose pulls images from remote repositories and runs three containers: frontend, backend, and MongoDB, as part of a single service.
### docker volume
- Docker volume is used to persist MongoDB data, ensuring it remains intact across container rebuilds and restarts.
## Working Application UI
