Single Stage and Multi Stage Docker Build

Creating an App

npx create-react-app my-app
cd my-app
npm start

cd into the directory

cd my-app

touch Dockerfile

Step 1 - Create a Dockerfile

# Use node:16-alpine image as a parent image

FROM node:16-alpine

# Create app directory

WORKDIR /usr/src/app

# Copy package.json files to the working directory

COPY package*.json ./

# Install app dependencies

RUN npm install

# Copy the source files

COPY . .

# Build the React app for production

RUN npm run build

# Expose port 3000 for serving the app

EXPOSE 3000

# Command to run the app

CMD ["npm", "start"]

Step 2 - Build a Docker image

docker build -t single-stage-build .

Step 3 - Check the Docker image and size

docker images

Step 4 - Run the Docker image

docker run -d -p 3000:3000 single-stage-build

Step 5 - Restructure the Dockerfile for multi-stage builds

# First stage - Building the application

# Use node:16-a;pine image as a parent image

FROM node:16-alpine AS build

# Create app directory

WORKDIR /usr/src/app

# Copy package.json files to the working directory

COPY package*.json ./

# Install app dependencies

RUN npm install

# Copy the source files

COPY . .

# Build the React app for production

RUN npm run build

# Second stage - Serve the application

FROM nginx:alpine

# Copy build files to Nginx

COPY --from=build /usr/src/app/build /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Step 6 - Build a Docker image with multi-stage builds

docker build -t multi-stage-build .

Step 7 - Check the Docker image and size

docker images

Step 8 - Run the Docker image

docker run -d -p 80:80 multi-stage-build

Step 9 - Check the Docker Container

docker ps