From 531a09ecf166816decb738c6c8e8594c91243802 Mon Sep 17 00:00:00 2001 From: Deepanshu Date: Wed, 12 Feb 2025 14:04:59 +0000 Subject: [PATCH 01/10] Updated headline --- src/components/HelloWorld.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HelloWorld.jsx b/src/components/HelloWorld.jsx index f00be5a..3d50437 100644 --- a/src/components/HelloWorld.jsx +++ b/src/components/HelloWorld.jsx @@ -3,7 +3,7 @@ import React from 'react'; const HelloWorld = () => { return (
-

ReactJS CI/CD Java Home Cloud

+

CI/CD Application Deploy

); }; From 76fc233bad16aceab124996d6d7f8e62aa80b367 Mon Sep 17 00:00:00 2001 From: Deepanshu Date: Wed, 12 Feb 2025 17:38:56 +0000 Subject: [PATCH 02/10] Updated headline --- src/components/HelloWorld.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/HelloWorld.jsx b/src/components/HelloWorld.jsx index 3d50437..3871145 100644 --- a/src/components/HelloWorld.jsx +++ b/src/components/HelloWorld.jsx @@ -3,7 +3,8 @@ import React from 'react'; const HelloWorld = () => { return (
-

CI/CD Application Deploy

+

CI/CD Application Deploy with Jenkins

+
); }; From 3f6ff5224f49a3d573e9314586c3fe46df8c420b Mon Sep 17 00:00:00 2001 From: Deepanshu Date: Wed, 12 Feb 2025 17:42:21 +0000 Subject: [PATCH 03/10] Updated headline --- src/components/HelloWorld.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HelloWorld.jsx b/src/components/HelloWorld.jsx index 3871145..3771eb8 100644 --- a/src/components/HelloWorld.jsx +++ b/src/components/HelloWorld.jsx @@ -3,7 +3,7 @@ import React from 'react'; const HelloWorld = () => { return (
-

CI/CD Application Deploy with Jenkins

+

CI/CD Application Deploy with Jenkins Server

); From 6b32f06510b9193f198993a40feb282ddd76e6d1 Mon Sep 17 00:00:00 2001 From: Deepanshu Date: Tue, 18 Feb 2025 17:06:13 +0000 Subject: [PATCH 04/10] Add Readme.md --- README.md | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 58 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index f768e33..d53d744 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,61 @@ -# React + Vite +# React + Vite CI/CD -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +This project demonstrates how to implement Continuous Integration (CI) and Continuous Deployment (CD) for a React-based application using Vite. -Currently, two official plugins are available: +## Project Overview -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +- **Framework:** React + Vite +- **Hosting:** AWS S3 (for static site storage) +- **Compute:** AWS EC2 (t3.medium, 20GB SSD storage) for running CI/CD pipeline +- **Version Control:** Git & GitLab CI/CD + +## Features + +- **Fast Development:** Uses Vite for quick build times. +- **Automated Deployment:** Jenkins CI/CD pipeline for automatic builds and deployment to AWS S3. +- **Scalable Hosting:** S3 for static file storage ensures high availability. + +## Prerequisites + +- AWS account with access to S3 and EC2. +- Git and Jenkins CI/CD setup. +- Node.js and npm installed on the development machine. + +## Setup & Installation + +1. Clone the repository: + ```sh + git clone https://github.com/deepanshub9/reactjs-app.git + + cd reactjs-app + ``` +2. Install dependencies: + ```sh + npm install + ``` +3. Start the development server: + ```sh + npm run dev + ``` +4. Build the project: + ```sh + npm run build + ``` + +## Deployment Workflow + +1. **Commit changes** to the Github repository. +2. **Jenkins CI/CD pipeline** triggers: + - Runs tests and builds the project. + - Deploys the static files to AWS S3. +3. **Application is live** on S3 with automatic updates. + +## Future Enhancements + +- Add AWS CloudFront for CDN caching. +- Implement monitoring with AWS CloudWatch. +- Use Terraform for automated infrastructure provisioning. + +## Any Questions + +- **Deepanshu** - deepanshub.096@gmail.com From ec5b29ee671426624957e29cd95a8d6ae7a9ac60 Mon Sep 17 00:00:00 2001 From: Deepanshu Date: Tue, 25 Feb 2025 12:16:34 +0000 Subject: [PATCH 05/10] Add file Docker & docker-compose.yml --- Dockerfile | 32 +++++++++++++++++--------------- docker-compose.yml | 7 +++++++ vite.config.js | 3 +++ 3 files changed, 27 insertions(+), 15 deletions(-) create mode 100644 docker-compose.yml diff --git a/Dockerfile b/Dockerfile index abe13ae..39cc9cc 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,27 +1,29 @@ -# Stage 1: Build the React app -FROM node:18 AS build +# Use Node.js as the base image +FROM node:18-alpine AS builder # Set working directory WORKDIR /app -# Install dependencies -COPY package.json package-lock.json ./ +# Copy package.json and install dependencies +COPY package*.json ./ RUN npm install -# Copy the rest of the application code +# Copy all files and build the React app COPY . . - -# Build the React app RUN npm run build -# Stage 2: Serve the React app with nginx -FROM nginx:alpine +# Use a lightweight web server to serve the static files +FROM node:18-alpine +WORKDIR /app + +# Install serve globally +RUN npm install -g serve -# Copy the built files from Stage 1 -COPY --from=build /app/dist /usr/share/nginx/html +# Copy the build folder from the previous step +COPY --from=builder /app/dist /app -# Expose port 80 -EXPOSE 80 +# Expose port 8000 inside the container +EXPOSE 8000 -# Start nginx server -CMD ["nginx", "-g", "daemon off;"] +# Serve the app on port 8000 +CMD ["serve", "-s", "/app", "-l", "8000"] diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..24f26ce --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,7 @@ +version: "3" +services: + react-app: + image: react-app:latest # Name of the image + ports: + - "8000:8000" # Map container's port 8000 to EC2's port 8000 + restart: always # Restart the container if it crashes diff --git a/vite.config.js b/vite.config.js index 5a33944..af40c94 100644 --- a/vite.config.js +++ b/vite.config.js @@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], + server: { + port: 8000, // Change this to your desired port + }, }) From d8ebb7e6552c7800595d8cfff11af354a31e9314 Mon Sep 17 00:00:00 2001 From: Deepanshu Date: Tue, 25 Feb 2025 14:12:19 +0000 Subject: [PATCH 06/10] New change1 --- src/components/HelloWorld.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HelloWorld.jsx b/src/components/HelloWorld.jsx index 3771eb8..058fb97 100644 --- a/src/components/HelloWorld.jsx +++ b/src/components/HelloWorld.jsx @@ -3,7 +3,7 @@ import React from 'react'; const HelloWorld = () => { return (
-

CI/CD Application Deploy with Jenkins Server

+

React.js Application Deploy with Jenkins Server

); From fa8d4fa636fd4beae92b76854e7762f35706eb50 Mon Sep 17 00:00:00 2001 From: Deepanshu Date: Sun, 2 Mar 2025 16:42:45 +0000 Subject: [PATCH 07/10] Added docker file and docker-compose --- Jenkinsfile | 33 ------------------------ README.md | 73 ++++++++++++++++++++++++++++------------------------- 2 files changed, 38 insertions(+), 68 deletions(-) delete mode 100644 Jenkinsfile diff --git a/Jenkinsfile b/Jenkinsfile deleted file mode 100644 index e74d9eb..0000000 --- a/Jenkinsfile +++ /dev/null @@ -1,33 +0,0 @@ -pipeline{ - agent any - - stages{ - stage("Git Checkout"){ - steps{ - git url:"https://github.com/javahometech/reactjs-app",branch:"main" - } - } - stage("Docker Build"){ - steps{ - sh "docker build -t kammana/react-app:${currentBuild.number} ." - } - } - stage("Docker Push"){ - steps{ - withCredentials([usernamePassword(credentialsId: 'dockerhub', passwordVariable: 'docker_password', usernameVariable: 'docker_user')]) { - sh "docker login -u ${docker_user} -p ${docker_password}" - } - sh "docker push kammana/react-app:${currentBuild.number}" - } - } - stage("Dev Deploy"){ - steps{ - sshagent(['docker-dev']) { - - sh "ssh -o StrictHostKeyChecking=no ec2-user@172.31.15.57 docker rm -f react 2>/dev/null " - sh "ssh ec2-user@172.31.15.57 docker run -d -p 80:80 --name=react kammana/react-app:${currentBuild.number}" - } - } - } - } -} diff --git a/README.md b/README.md index d53d744..4c11dfb 100644 --- a/README.md +++ b/README.md @@ -1,61 +1,64 @@ -# React + Vite CI/CD - -This project demonstrates how to implement Continuous Integration (CI) and Continuous Deployment (CD) for a React-based application using Vite. +# React.js Application with Docker and Jenkins Deployment ## Project Overview -- **Framework:** React + Vite -- **Hosting:** AWS S3 (for static site storage) -- **Compute:** AWS EC2 (t3.medium, 20GB SSD storage) for running CI/CD pipeline -- **Version Control:** Git & GitLab CI/CD +This project is a React.js application that demonstrates how to set up a development environment using Docker and Docker Compose. The application is deployed on an AWS EC2 instance using Jenkins for Continuous Integration and Continuous Deployment (CI/CD). -## Features +## Technologies Used -- **Fast Development:** Uses Vite for quick build times. -- **Automated Deployment:** Jenkins CI/CD pipeline for automatic builds and deployment to AWS S3. -- **Scalable Hosting:** S3 for static file storage ensures high availability. +- **React.js**: A JavaScript library for building user interfaces. +- **Docker**: A platform for developing, shipping, and running applications in containers. +- **Docker Compose**: A tool for defining and running multi-container Docker applications. +- **Jenkins**: An open-source automation server used to automate the deployment process. +- **AWS EC2**: A web service that provides resizable compute capacity in the cloud. -## Prerequisites +![aws react1](https://github.com/user-attachments/assets/fce03360-2c2c-458e-b50c-7cf9e3ff9e05) +![ip aws re1](https://github.com/user-attachments/assets/53920b88-1b25-4734-9c3f-4ffe5e28b82a) +![react js s1](https://github.com/user-attachments/assets/612a258d-63ed-4aab-84db-4a2a2cf811fa) +![j2](https://github.com/user-attachments/assets/abdc9cf3-d197-49bf-b190-30f98096930d) +![jenkins 1](https://github.com/user-attachments/assets/80ed1462-a229-4db5-9980-075641ef2928) -- AWS account with access to S3 and EC2. -- Git and Jenkins CI/CD setup. -- Node.js and npm installed on the development machine. ## Setup & Installation 1. Clone the repository: ```sh git clone https://github.com/deepanshub9/reactjs-app.git - cd reactjs-app ``` -2. Install dependencies: - ```sh - npm install - ``` -3. Start the development server: + +2. Build the Docker image: ```sh - npm run dev + docker build -t reactjs-app . ``` -4. Build the project: + +3. Run the application using Docker Compose: ```sh - npm run build + docker-compose up ``` -## Deployment Workflow +## Deployment Process + +1. **Dockerize the Application**: The Dockerfile is used to create a Docker image for the React application. It includes all necessary dependencies and configurations. + +2. **Docker Compose**: The `docker-compose.yml` file defines the services required to run the application. It simplifies the process of managing multiple containers. -1. **Commit changes** to the Github repository. -2. **Jenkins CI/CD pipeline** triggers: - - Runs tests and builds the project. - - Deploys the static files to AWS S3. -3. **Application is live** on S3 with automatic updates. +3. **Jenkins CI/CD Pipeline**: + - Jenkins is configured to monitor the Git repository for changes. + - Upon detecting a change, Jenkins triggers a build process that includes: + - Building the Docker image. + - Deploying the Docker container to an AWS EC2 instance. + +4. **Accessing the Application**: Once deployed, the application can be accessed via the public IP address of the EC2 instance. ## Future Enhancements -- Add AWS CloudFront for CDN caching. -- Implement monitoring with AWS CloudWatch. -- Use Terraform for automated infrastructure provisioning. +- Implement automated testing for the application. +- Add monitoring and logging for the deployed application. +- Explore using AWS services for scaling and load balancing. + +## Contact -## Any Questions +For any questions or support, please contact: -- **Deepanshu** - deepanshub.096@gmail.com +- **Deepanshu** - deepanshu.b096@gmail.com \ No newline at end of file From c7a5808c2730f8fd7f65b99a7ee268a3f71cf263 Mon Sep 17 00:00:00 2001 From: Deepanshu Date: Wed, 5 Mar 2025 11:07:45 +0000 Subject: [PATCH 08/10] Helloworld file changed --- src/components/HelloWorld.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/HelloWorld.jsx b/src/components/HelloWorld.jsx index 058fb97..8b34d4c 100644 --- a/src/components/HelloWorld.jsx +++ b/src/components/HelloWorld.jsx @@ -1,5 +1,3 @@ -import React from 'react'; - const HelloWorld = () => { return (
From 2c830ec164b094c9d91ee5701069627130134da3 Mon Sep 17 00:00:00 2001 From: Deepanshu Date: Wed, 5 Mar 2025 11:09:07 +0000 Subject: [PATCH 09/10] Helloworld file 1 --- src/components/HelloWorld.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HelloWorld.jsx b/src/components/HelloWorld.jsx index 8b34d4c..f80e5da 100644 --- a/src/components/HelloWorld.jsx +++ b/src/components/HelloWorld.jsx @@ -1,7 +1,7 @@ const HelloWorld = () => { return (
-

React.js Application Deploy with Jenkins Server

+

Application Deploy with Jenkins Server

); From b396a10ce73f2e2f31d94201dbc7f177c97e3bd2 Mon Sep 17 00:00:00 2001 From: Deepanshu Date: Wed, 5 Mar 2025 11:19:49 +0000 Subject: [PATCH 10/10] React word add --- src/components/HelloWorld.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HelloWorld.jsx b/src/components/HelloWorld.jsx index f80e5da..0367505 100644 --- a/src/components/HelloWorld.jsx +++ b/src/components/HelloWorld.jsx @@ -1,7 +1,7 @@ const HelloWorld = () => { return (
-

Application Deploy with Jenkins Server

+

React Application Deploy with Jenkins Server

);