From c143fcad74f30796381e671adfd8070553c4bdbf Mon Sep 17 00:00:00 2001 From: Md Asharaf <718romanempire@gmail.com> Date: Fri, 21 Feb 2025 05:21:36 +0530 Subject: [PATCH 1/3] feat(docker): add Docker support for frontend and backend with development and production configurations --- .dockerignore | 9 +++++++++ .gitignore | 2 ++ Dockerfile | 44 +++++++++++++++++++++++++++++++++++++++++ Dockerfile.dev | 21 ++++++++++++++++++++ backend/.dockerignore | 5 +++++ backend/Dockerfile | 20 +++++++++++++++++++ backend/Dockerfile.dev | 20 +++++++++++++++++++ backend/package.json | 3 ++- docker-compose.dev.yml | 37 ++++++++++++++++++++++++++++++++++ docker-compose.prod.yml | 31 +++++++++++++++++++++++++++++ package.json | 14 ++++++++----- 11 files changed, 200 insertions(+), 6 deletions(-) create mode 100644 .dockerignore create mode 100644 Dockerfile create mode 100644 Dockerfile.dev create mode 100644 backend/.dockerignore create mode 100644 backend/Dockerfile create mode 100644 backend/Dockerfile.dev create mode 100644 docker-compose.dev.yml create mode 100644 docker-compose.prod.yml diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..6677e3a --- /dev/null +++ b/.dockerignore @@ -0,0 +1,9 @@ +backend +node_modules +dist +build +.gitignore +.git +.env.* +.github +yarn.lock \ No newline at end of file diff --git a/.gitignore b/.gitignore index 14256c2..41c6dc9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,8 @@ # Node modules node_modules/ package-lock.json +*/yarn.lock +yarn.lock # Logs logs *.log diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..4faef43 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,44 @@ +# Stage 1: Build the frontend +FROM node:20-alpine AS build + +# Set the working directory +WORKDIR /app + +# Copy package.json +COPY package.json . + +# Install production dependencies using Yarn +RUN yarn install --production +# Copy the rest of the application files +COPY . . + +# Build the frontend using Yarn +RUN yarn run build + +# Stage 2: Serve the application with Nginx +FROM nginx:alpine + +# Copy the build output from the previous stage to Nginx's serve directory +COPY --from=build /app/dist /usr/share/nginx/html + +# Remove the default Nginx configuration file +RUN rm /etc/nginx/conf.d/default.conf + +# Create a new Nginx configuration file +RUN echo $'\ +server { \n\ + listen 3000; \n\ + server_name localhost; \n\ + root /usr/share/nginx/html; \n\ + index index.html; \n\ + \n\ + location / { \n\ + try_files $uri $uri/ /index.html; \n\ + } \n\ +}' > /etc/nginx/conf.d/default.conf + +# Expose port 3000 +EXPOSE 3000 + +# Start Nginx +CMD ["nginx", "-g", "daemon off;"] diff --git a/Dockerfile.dev b/Dockerfile.dev new file mode 100644 index 0000000..cbe0846 --- /dev/null +++ b/Dockerfile.dev @@ -0,0 +1,21 @@ +# Stage 1: Build the frontend +FROM node:20-alpine + +# Set the working directory +WORKDIR /app + +# Copy package.json + +COPY package.json . + +# Install all dependencies +RUN yarn install + +# Copy the rest of the application files +COPY . . + +# Expose the port for the application +EXPOSE 3000 + +# Start Nginx +CMD ["yarn","dev", "--port", "3000","--host"] diff --git a/backend/.dockerignore b/backend/.dockerignore new file mode 100644 index 0000000..352bc33 --- /dev/null +++ b/backend/.dockerignore @@ -0,0 +1,5 @@ +node_modules +.gitignore +.git +.env.* +yarn.lock \ No newline at end of file diff --git a/backend/Dockerfile b/backend/Dockerfile new file mode 100644 index 0000000..9faf5f0 --- /dev/null +++ b/backend/Dockerfile @@ -0,0 +1,20 @@ +# Use a lightweight Node.js Alpine image +FROM node:20-alpine + +# Set the working directory +WORKDIR /app + +# Copy package.json and yarn.lock files for dependency installation +COPY package.json ./ + +# Install production dependencies using Yarn +RUN yarn install --production + +# Copy the rest of the application files +COPY . . + +# Expose the port for the application +EXPOSE 5000 + +# Start the server in production mode using Yarn +CMD ["yarn", "start"] diff --git a/backend/Dockerfile.dev b/backend/Dockerfile.dev new file mode 100644 index 0000000..c926c9d --- /dev/null +++ b/backend/Dockerfile.dev @@ -0,0 +1,20 @@ +# Use a lightweight Node.js Alpine image +FROM node:20-alpine + +# Set the working directory +WORKDIR /app + +# Copy package.json and yarn.lock files for dependency installation +COPY package.json ./ + +# Install all dependencies using Yarn +RUN yarn install + +# Copy the rest of the application files +COPY . . + +# Expose the port for the application +EXPOSE 5000 + +# Start the server in dev mode using Yarn +CMD ["yarn", "dev"] diff --git a/backend/package.json b/backend/package.json index 53bd64b..9891c08 100644 --- a/backend/package.json +++ b/backend/package.json @@ -3,7 +3,8 @@ "version": "1.0.0", "main": "server.js", "scripts": { - "start": "nodemon server.js", + "dev": "nodemon server.js", + "start": "node server.js", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml new file mode 100644 index 0000000..77b5c47 --- /dev/null +++ b/docker-compose.dev.yml @@ -0,0 +1,37 @@ +services: + frontend: # Defines the frontend service + image: frontend # Names the Docker image for the frontend service + container_name: frontend-container # Names the container for the frontend service + build: + context: . # Uses the current directory as the build context + dockerfile: Dockerfile.dev # Specifies the Dockerfile to use for building the image + ports: + - "3000:3000" # Maps port 3000 on the host machine to port 3000 in the container + env_file: + - .env # Loads environment variables from the .env file + volumes: + - .:/app # Mounts the entire project directory into the container for live code updates + - /app/node_modules # Prevents node_modules inside the container from being overwritten + depends_on: + - backend # Ensures the backend service starts before the frontend + networks: + - app-network # Connects the frontend to a custom Docker network + + backend: # Defines the backend service + image: backend # Names the Docker image for the backend service + container_name: backend-container # Names the container for the backend service + build: + context: ./backend # Uses the "backend" directory as the build context + dockerfile: Dockerfile.dev # Specifies the Dockerfile to use for building the image + ports: + - "5000:5000" # Maps port 8000 on the host machine to port 8000 in the container + env_file: + - ./backend/.env # Loads environment variables from the .env file + volumes: + - ./backend:/app # Mounts the backend directory into the container for live code updates + - /app/node_modules # Prevents node_modules inside the container from being overwritten + networks: + - app-network # Connects the backend to a custom Docker network + +networks: + app-network: # Defines a shared network so that containers can communicate with each other diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml new file mode 100644 index 0000000..426bcf3 --- /dev/null +++ b/docker-compose.prod.yml @@ -0,0 +1,31 @@ +services: + frontend: + image: frontend + container_name: frontend-container + build: + context: . + dockerfile: Dockerfile + ports: + - "3000:3000" + env_file: + - .env + depends_on: + - backend + networks: + - app-network + + backend: + image: backend + container_name: backend-container + build: + context: backend + dockerfile: Dockerfile + ports: + - "5000:5000" + env_file: + - backend/.env + networks: + - app-network + +networks: + app-network: diff --git a/package.json b/package.json index ca7db86..6fbacce 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,10 @@ "react-dom": "^18.3.1", "react-hot-toast": "^2.4.1", "react-icons": "^5.3.0", - "react-router-dom": "^6.28.0" + "react-router-dom": "^6.28.0", + "postcss": "^8.4.47", + "autoprefixer": "^10.4.20", + "tailwindcss": "^3.4.14" }, "devDependencies": { "@eslint/js": "^9.13.0", @@ -30,14 +33,15 @@ "@types/react-dom": "^18.3.1", "@types/react-redux": "^7.1.34", "@vitejs/plugin-react-swc": "^3.5.0", - "autoprefixer": "^10.4.20", "eslint": "^9.13.0", "eslint-plugin-react": "^7.37.2", "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.14", "globals": "^15.11.0", - "postcss": "^8.4.47", - "tailwindcss": "^3.4.14", "vite": "^5.4.10" - } + }, + "main": "index.js", + "repository": "https://github.com/mehul-m-prajapati/github_tracker.git", + "author": "Md Asharaf <718romanempire@gmail.com>", + "license": "MIT" } From b482d19655a399541d98f3221bbe9573b2c72ade Mon Sep 17 00:00:00 2001 From: Md Asharaf <718romanempire@gmail.com> Date: Fri, 21 Feb 2025 05:42:26 +0530 Subject: [PATCH 2/3] remove unnecessary fields from package.json --- package.json | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/package.json b/package.json index 6fbacce..3a08b11 100644 --- a/package.json +++ b/package.json @@ -39,9 +39,5 @@ "eslint-plugin-react-refresh": "^0.4.14", "globals": "^15.11.0", "vite": "^5.4.10" - }, - "main": "index.js", - "repository": "https://github.com/mehul-m-prajapati/github_tracker.git", - "author": "Md Asharaf <718romanempire@gmail.com>", - "license": "MIT" + } } From eb2535cfba3445202601ec48ec3564952a58d9fb Mon Sep 17 00:00:00 2001 From: Md Asharaf <718romanempire@gmail.com> Date: Sun, 23 Feb 2025 00:25:37 +0530 Subject: [PATCH 3/3] feat(docker): update Dockerfiles to use npm instead of yarn and restructure docker-compose files --- Dockerfile.dev | 13 ++--- Dockerfile => Dockerfile.prod | 4 +- backend/Dockerfile.dev | 4 +- backend/{Dockerfile => Dockerfile.prod} | 4 +- docker-compose.dev.yml | 37 ------------- docker-compose.prod.yml | 31 ----------- docker-compose.yml | 70 +++++++++++++++++++++++++ package.json | 6 ++- 8 files changed, 83 insertions(+), 86 deletions(-) rename Dockerfile => Dockerfile.prod (94%) rename backend/{Dockerfile => Dockerfile.prod} (87%) delete mode 100644 docker-compose.dev.yml delete mode 100644 docker-compose.prod.yml create mode 100644 docker-compose.yml diff --git a/Dockerfile.dev b/Dockerfile.dev index cbe0846..c3443bf 100644 --- a/Dockerfile.dev +++ b/Dockerfile.dev @@ -1,21 +1,14 @@ -# Stage 1: Build the frontend FROM node:20-alpine -# Set the working directory WORKDIR /app -# Copy package.json COPY package.json . -# Install all dependencies -RUN yarn install +RUN npm install -# Copy the rest of the application files COPY . . -# Expose the port for the application -EXPOSE 3000 +EXPOSE 5173 -# Start Nginx -CMD ["yarn","dev", "--port", "3000","--host"] +CMD ["npm","run","dev"] diff --git a/Dockerfile b/Dockerfile.prod similarity index 94% rename from Dockerfile rename to Dockerfile.prod index 4faef43..6fb1532 100644 --- a/Dockerfile +++ b/Dockerfile.prod @@ -8,12 +8,12 @@ WORKDIR /app COPY package.json . # Install production dependencies using Yarn -RUN yarn install --production +RUN npm install --production # Copy the rest of the application files COPY . . # Build the frontend using Yarn -RUN yarn run build +RUN npm run build # Stage 2: Serve the application with Nginx FROM nginx:alpine diff --git a/backend/Dockerfile.dev b/backend/Dockerfile.dev index c926c9d..1cdb258 100644 --- a/backend/Dockerfile.dev +++ b/backend/Dockerfile.dev @@ -8,7 +8,7 @@ WORKDIR /app COPY package.json ./ # Install all dependencies using Yarn -RUN yarn install +RUN npm install # Copy the rest of the application files COPY . . @@ -17,4 +17,4 @@ COPY . . EXPOSE 5000 # Start the server in dev mode using Yarn -CMD ["yarn", "dev"] +CMD ["npm","run", "dev"] diff --git a/backend/Dockerfile b/backend/Dockerfile.prod similarity index 87% rename from backend/Dockerfile rename to backend/Dockerfile.prod index 9faf5f0..9f35a10 100644 --- a/backend/Dockerfile +++ b/backend/Dockerfile.prod @@ -8,7 +8,7 @@ WORKDIR /app COPY package.json ./ # Install production dependencies using Yarn -RUN yarn install --production +RUN npm install --production # Copy the rest of the application files COPY . . @@ -17,4 +17,4 @@ COPY . . EXPOSE 5000 # Start the server in production mode using Yarn -CMD ["yarn", "start"] +CMD ["npm","run", "start"] diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml deleted file mode 100644 index 77b5c47..0000000 --- a/docker-compose.dev.yml +++ /dev/null @@ -1,37 +0,0 @@ -services: - frontend: # Defines the frontend service - image: frontend # Names the Docker image for the frontend service - container_name: frontend-container # Names the container for the frontend service - build: - context: . # Uses the current directory as the build context - dockerfile: Dockerfile.dev # Specifies the Dockerfile to use for building the image - ports: - - "3000:3000" # Maps port 3000 on the host machine to port 3000 in the container - env_file: - - .env # Loads environment variables from the .env file - volumes: - - .:/app # Mounts the entire project directory into the container for live code updates - - /app/node_modules # Prevents node_modules inside the container from being overwritten - depends_on: - - backend # Ensures the backend service starts before the frontend - networks: - - app-network # Connects the frontend to a custom Docker network - - backend: # Defines the backend service - image: backend # Names the Docker image for the backend service - container_name: backend-container # Names the container for the backend service - build: - context: ./backend # Uses the "backend" directory as the build context - dockerfile: Dockerfile.dev # Specifies the Dockerfile to use for building the image - ports: - - "5000:5000" # Maps port 8000 on the host machine to port 8000 in the container - env_file: - - ./backend/.env # Loads environment variables from the .env file - volumes: - - ./backend:/app # Mounts the backend directory into the container for live code updates - - /app/node_modules # Prevents node_modules inside the container from being overwritten - networks: - - app-network # Connects the backend to a custom Docker network - -networks: - app-network: # Defines a shared network so that containers can communicate with each other diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml deleted file mode 100644 index 426bcf3..0000000 --- a/docker-compose.prod.yml +++ /dev/null @@ -1,31 +0,0 @@ -services: - frontend: - image: frontend - container_name: frontend-container - build: - context: . - dockerfile: Dockerfile - ports: - - "3000:3000" - env_file: - - .env - depends_on: - - backend - networks: - - app-network - - backend: - image: backend - container_name: backend-container - build: - context: backend - dockerfile: Dockerfile - ports: - - "5000:5000" - env_file: - - backend/.env - networks: - - app-network - -networks: - app-network: diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..e2cdd0f --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,70 @@ +services: + frontend: + image: frontend + container_name: frontend-container + build: + context: . + dockerfile: Dockerfile.dev + ports: + - "5173:5173" + env_file: + - .env + volumes: + - .:/app + - /app/node_modules + depends_on: + - backend + networks: + - app-network-1 + profiles: + - dev + backend: + image: backend + container_name: backend-container + build: + context: ./backend + dockerfile: Dockerfile.dev + ports: + - "5000:5000" + env_file: + - ./backend/.env + volumes: + - ./backend:/app + - /app/node_modules + networks: + - app-network-1 + profiles: + - dev + frontend-prod: + image: frontend-prod + container_name: frontend-prod-container + build: + context: . + dockerfile: Dockerfile.prod + ports: + - "3000:3000" + env_file: + - .env + depends_on: + - backend-prod + networks: + - app-network-2 + profiles: + - prod + backend-prod: + image: backend-prod + container_name: backend-prod-container + build: + context: backend + dockerfile: Dockerfile.prod + ports: + - "5000:5000" + env_file: + - backend/.env + networks: + - app-network-2 + profiles: + - prod +networks: + app-network-1: + app-network-2: diff --git a/package.json b/package.json index 3a08b11..2681a34 100644 --- a/package.json +++ b/package.json @@ -4,10 +4,12 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite", + "dev": "vite --host", "build": "vite build", "lint": "eslint .", - "preview": "vite preview" + "preview": "vite preview", + "docker:dev":"docker compose --profile dev up --build", + "docker:prod":"docker compose --profile prod up -d --build" }, "dependencies": { "@emotion/react": "^11.11.3",