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/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 f768e33..4c11dfb 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,64 @@ -# React + Vite +# React.js Application with Docker and Jenkins Deployment -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +## Project Overview -Currently, two official plugins are available: +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). -- [@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 +## Technologies Used + +- **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. + +![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) + + +## Setup & Installation + +1. Clone the repository: + ```sh + git clone https://github.com/deepanshub9/reactjs-app.git + cd reactjs-app + ``` + +2. Build the Docker image: + ```sh + docker build -t reactjs-app . + ``` + +3. Run the application using Docker Compose: + ```sh + docker-compose up + ``` + +## 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. + +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 + +- Implement automated testing for the application. +- Add monitoring and logging for the deployed application. +- Explore using AWS services for scaling and load balancing. + +## Contact + +For any questions or support, please contact: + +- **Deepanshu** - deepanshu.b096@gmail.com \ No newline at end of file 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/src/components/HelloWorld.jsx b/src/components/HelloWorld.jsx index f00be5a..0367505 100644 --- a/src/components/HelloWorld.jsx +++ b/src/components/HelloWorld.jsx @@ -1,9 +1,8 @@ -import React from 'react'; - const HelloWorld = () => { return (
-

ReactJS CI/CD Java Home Cloud

+

React Application Deploy with Jenkins Server

+
); }; 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 + }, })