Optimize Docker images and add .dockerignore for frontend and backend

README.md

@@ -1,40 +1,28 @@
-# A simple MERN stack application 
+## Docker Setup
 
-### Create a network for the docker containers
+This project includes optimized Docker images for frontend and backend. You can run the entire stack locally using Docker Compose.
 
-`docker network create demo`
+### Run from Docker Hub
 
-### Build the client 
+Pull the production-ready images and run:
 
-```sh
-cd mern/frontend
-docker build -t mern-frontend .
-```
+```bash
+docker-compose up -d
 
-### Run the client
+## run on locally ---
+Frontend: http://localhost:5173
+Backend API: http://localhost:5050
 
-`docker run --name=frontend --network=demo -d -p 5173:5173 mern-frontend`
 
-### Verify the client is running
+If you want to build your own images:
 
-Open your browser and type `http://localhost:5173`
+# Build backend
+docker build -t <your-username>/mern-backend:prod ./backend
 
-### Run the mongodb container
+# Build frontend
+docker build -t <your-username>/mern-frontend:prod ./frontend
 
-`docker run --network=demo --name mongodb -d -p 27017:27017 -v ~/opt/data:/data/db mongo:latest`
-
-### Build the server
-
-```sh
-cd mern/backend
-docker build -t mern-backend .
-```
-
-### Run the server
-
-`docker run --name=backend --network=demo -d -p 5050:5050 mern-backend`
-
-## Using Docker Compose
-
-`docker compose up -d`
+# Start services
+docker-compose up -d
 
+s

docker-compose.yml

@@ -0,0 +1,41 @@
+services:
+  backend:
+    image: amanyadav860/mern-backend:prod  # use your pushed backend image
+    container_name: mern_backend
+    ports:
+      - "5050:5050"
+    networks:
+      - mern_network
+    environment:
+      MONGO_URI: mongodb://mongodb:27017/mydatabase
+    depends_on:
+      - mongodb
+
+  frontend:
+    image: amanyadav860/mern-frontend:prod  # use your pushed frontend image
+    container_name: mern_frontend
+    ports:
+      - "5173:3000"  # frontend serve runs on 3000 in container, map to 5173 locally
+    networks:
+      - mern_network
+    environment:
+      REACT_APP_API_URL: http://backend:5050
+
+  mongodb:
+    image: mongo:latest
+    container_name: mern_mongo
+    ports:
+      - "27017:27017"
+    networks:
+      - mern_network
+    volumes:
+      - mongo-data:/data/db
+
+networks:
+  mern_network:
+    driver: bridge
+
+volumes:
+  mongo-data:
+    driver: local
+

mern/backend/.dockerignore

@@ -0,0 +1,8 @@
+node_modules
+npm-debug.log
+.git
+.gitignore
+Dockerfile
+.dockerignore
+tests
+.env

mern/backend/Dockerfile

@@ -1,14 +1,13 @@
-FROM node:18.9.1
-
+# stage first 1;
+FROM node:18.9.1-alpine AS builder
 WORKDIR /app
-
-COPY package.json .
-
-RUN npm install
-
+COPY package.json package-lock.json* ./ 
+RUN npm ci --omit=dev
+# stage second 2;
+FROM node:18.9.1-alpine
+WORKDIR /app
+COPY --from=builder /app/node_modules ./node_modules
 COPY . .
-
 EXPOSE 5050
-
 CMD ["npm", "start"]
 

mern/frontend/.dockerignore

@@ -0,0 +1,75 @@
+# Dependencies
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Environment variables
+.env
+.env.local
+.env.development
+.env.test
+.env.production
+
+# Logs
+logs
+*.log
+loglevel
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+.nyc_output/
+
+# Dependency directories
+.node_modules/
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Build outputs
+dist/
+build/
+.out/
+.next/
+
+# IDE and editor files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Git
+.git/
+.gitignore
+
+# Docker
+Dockerfile
+.dockerignore
+
+# Temporary files
+*.tmp
+*.temp
+
+# Cache directories
+.cache/
+.parcel-cache/

mern/frontend/Dockerfile

@@ -1,23 +1,22 @@
-# Use the official image as a parent image
-# Description: Dockerfile for the client side of the MERN stack application
-
-# Use the official image as a parent image
-FROM node:18.9.1
-
-# Set the working directory
+#---------stage 1: build react app--------
+#base image
+FROM node:18.9.1-alpine AS builder
 WORKDIR /app
 
-# Copy the file from your host to your current location
-COPY package.json .
-
-# Run the command inside your image filesystem
-RUN npm install
-
-# Inform Docker that the container is listening on the specified port at runtime
-EXPOSE 5173
-
-# Copy the rest of your app's source code from your host to your image filesystem
+# Copy package files and install all dependencies (including dev)
+COPY package*.json ./
+RUN npm ci --include=dev --ignore-scripts
 COPY . .
+# Build optimized production bundle
+RUN npm run build
+#---------stage 2: serve react --------
+FROM node:18.9.1-alpine
+WORKDIR /app
+
+# Install a lightweight static file server
+RUN npm install -g serve
+# Copy built files only from the previous stage
+COPY --from=builder /app/dist ./dist
 
-# Run the specified command within the container
-CMD ["npm", "run", "dev"]
+EXPOSE 3000
+CMD ["serve", "-s", "dist"]