Setting Up Nginx with Static Content in a Dockerfile

Directory structure:

my-nginx-app/
├── Dockerfile
├── index.html

* create a directory my-nginx-app

–> mkdir my-nginx-app
–> cd my-nginx-app

* Create your application file:

–> vi index.html

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Welcome to My NGINX App</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h1>Welcome to My NGINX App</h1>
<p>This is a static web page served by NGINX inside a Docker container.</p>
</body>
</html>

* Create a Dockerfile in the same directory.

–> vi Dockerfile

# Step 1: Use the official NGINX image as the base image
FROM nginx:latest

# Step 2: Set the working directory
WORKDIR /app

# Step 3: Copy your local HTML files to the NGINX web directory in the container
COPY index.html /usr/share/nginx/html

# Step 4: Expose port 80 to access the web application
EXPOSE 80

 

* Build and run the docker image from the my-nginx-app directory:

–> docker build -t my-nginx-app .
–> docker run -p 81:80 -d my-nginx-app
–> docker ps

* Access your webpage using a web browser and navigate to http://VM-IP:81