How to Dockerize Html Website through Nginx Server
Create a HTML FILe in visual code
After that create a Docker File with name - Dockerfile(Base Image consist Dependcies Like JVM or App CLI etc.)
Write below commands inside Dockerfile
FROM nginx:alpine (Base Image-Web Server to run File)
COPY . /usr/share/nginx/html/ (Directory of nginx where data will be stored)
(Start your docker server)
Now the Build Command-:
docker build -t webserver-image:v1 .
Now we have to Run Docker Container
docker run -d -p 8080:80 webserver-image:v1 (-d detach, -p port)
GO to browser write - localhost:8080
How to Dockerize Html Website through Apache2 Server
Create a HTML FILe in visual code
After that create a Docker File with name - Dockerfile(Base Image consist Dependcies Like JVM or App CLI etc.)
Write below commands inside Dockerfile
FROM httpd:2.4
COPY . /usr/local/apache2/htdocs
EXPOSE 80
Now the Build Command-:
docker build -t apache-html-site .
Now we have to Run Docker Container
docker run -d -p 8084:80 apache-html-site
Go to browser write - localhost:8084
---------------------------------------------------------------------------------------------------------------------------
How to Dockerize React Website
1. Creating a Dockerfile for a React app
2. Using Nginx to serve static files
3. Running the Docker container and accessing the app
4. Best practices for optimizing Docker images
Create a Dockerfile inside src folder and write below commands -
# Step 1: Start with a base image
# We're using a lightweight Node.js image (version 16) based on Alpine Linux for efficiency.
FROM node:16-alpine AS build
# Step 2: Set the working directory
# This creates a directory called /app inside the container and sets it as the working directory.
WORKDIR /app
# Step 3: Copy package.json and package-lock.json files
# This step copies the package.json and package-lock.json into the container to install the necessary dependencies.
COPY package*.json ./
# Step 4: Install dependencies
# Run npm install to install all the required dependencies for the application.
RUN npm install
# Step 5: Copy the rest of the application code
# After installing the dependencies, copy the rest of the application code from the host machine into the container.
COPY . .
# Step 6: Build the React app for production
# Run the build command to create optimized static files in the 'build' directory.
RUN npm run build
# Step 7: Switch to a new lightweight Nginx image
# We'll use Nginx to serve the static files generated by the build process.
FROM nginx:alpine
# Step 8: Copy the built files from the previous stage (build) to the Nginx html directory
# This copies the production-ready static files from the build directory to the Nginx container.
COPY --from=build /app/build /usr/share/nginx/html
# Step 9: Expose port 80 for the application
# Nginx runs on port 80 by default, so we'll expose this port to access the app.
EXPOSE 80
# Step 10: Command to run Nginx
# The CMD command tells Docker to run Nginx with the necessary configurations.
CMD ["nginx", "-g", "daemon off;"]
Now we will create .dockerignore file
# Ignore node_modules directory
node_modules
# Ignore npm debug log
npm-debug.log
# Ignore build directory (generated during build process)
build
# Ignore Docker configuration files
Dockerfile
.dockerignore
# Ignore Git-related files
.git
# Ignore Markdown documentation files
*.md
Build your Docker image
docker build -t reactapp:v1.1 .
Check your Docker image
open cmd type -
docker images
Run your Docker container
docker run --name reactappContainer -it -p 805:80 reactapp:v1.1
Open browser and type below command to live your react webapp live
http://localhost:8085
---------------------------------------------------------------------------------------------------------------------------
How to Dockerize Node Js Web App
Create a Dockerfile inside src folder and write below commands
FROM node:24-alpine
COPY package.json /app/
COPY / /app/
WORKDIR /app
RUN npm install
CMD ["node", "server.js"]
open cmd type -
docker build -t node-app .
docker run -d -p 3000:3000 node-app
Open browser and type below command to live your react webapp live
http://localhost:3000
---------------------------------------------------------------------------------------------------------------------------
How to Dockerize Python App
Create a Dockerfile inside src folder and write below commands
From python
WORKDIR /app
COPY . /app
CMD["python3", "app.py"]
open cmd type -
docker build -t myfirstimage .
docker run myfirstimage
