How to Serve a Static HTML Page using Nginx in a Kubernetes Cluster

3 min readMay 27, 2021

Nginx is a powerful reverse proxy routing your domains from the Internet to your applications. This tutorial shows you how to serve a static HTML page with Nginx.

I’d like to share with you how I got my maintenance page set up for the application using Nginx.

Create a Dockerfile with proper static file and SSL configuration

Use the below static HTML file

<!doctype html>
<html>
<head>
<title>Maintainance Page</title>
<meta charset="utf-8"/>
<meta name="robots" content="noindex"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { text-align: center; padding: 150px; background: black;}
  h1 { font-size: 50px; color:white; }
  body { font: 20px Helvetica, sans-serif; color: white; }
  article { display: block; text-align: left; width: 650px; margin: 0 auto; }
  a { color: #dc8100; text-decoration: none; }
  a:hover { color: #333; text-decoration: none; }
</style>
</head>
<body>
<article>
    <h1>We&rsquo;ll be back very soon!</h1>
    <div>
        <p>Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment. We&rsquo;ll be back online very shortly!</p>
        <p>Thank you for your patience.</p>
        <p>Team</p>
    </div>
</article>
</body>
</html>

The above HTML will look like the image below.

Save the above HTML as maintanence.html

Create a file called Dockerfile with the below content

# pull the latest official nginx image
FROM nginx:stable# run docker service on HTTPS
EXPOSE 443# copy the additional nginx configuration
COPY maintanence.conf /etc/nginx/conf.d/maintanence.conf# copy ssl pem 
COPY domain.org.pem /etc/nginx/conf.d/domain.org.pem# copy ssl key
COPY domain.org.key /etc/nginx/conf.d/domain.org.key# copy static maintanence
COPY maintanence.html /usr/share/nginx/html/index.htmlSTOPSIGNAL SIGQUITCMD ["nginx", "-g", "daemon off;"]

Create a sample Nginx configuration file with the below configuration called maintanence.conf

# redirect http requests to httpsserver {
  listen 80 default_server;
  listen [::]:80 default_server;
  server_name _;
  return 301 https://$host$request_uri;
}server {
  listen       443 ssl;
  underscores_in_headers on;
  ssl_certificate      /etc/nginx/conf.d/domain.org.pem;
  ssl_certificate_key  /etc/nginx/conf.d/domain.org.key;  ssl_session_cache    shared:SSL:10m;
  ssl_session_timeout  10m;  ssl_protocols  TLSv1.2;
  ssl_ciphers  HIGH:!aNULL:!MD5;
  ssl_prefer_server_ciphers   on;
  client_max_body_size 50M;  access_log /var/log/nginx/access.log;
  error_log  /var/log/nginx/errors.log;  root /usr/share/nginx/html;
  index index.html;  location / {
    try_files $uri $uri/ =404;
  }
}

Have the SSL key, SSL pem, maintanence.html, Dockerfile in the same directory.

Build and push the docker image:

# replace the docker_repository and tag_name appropriatelydocker build -t your_docker_container_repository:tag_name .
docker push your_docker_container_repository:tag_name

Create nginx-deployment.yaml with the below content

apiVersion: apps/v1
kind: Deployment
metadata:
  name: maintenance-nginx
spec:
  selector:
    matchLabels:
      run: maintenance-nginx
  replicas: 1
  template:
    metadata:
      labels:
        run: maintenance-nginx
    spec:
      containers:
        - image: your_docker_container_repository:tag_name
          name: maintenance-nginx
          ports:
          - containerPort: 443

Create nginx-service.yaml with the below content

apiVersion: v1
kind: Service
metadata:
  name: maintenance-nginx
  labels:
    run: maintenance-nginx
spec:
  ports:
    - name: http
      port: 80
      protocol: TCP
      targetPort: 80
    - name: https
      port: 443
      protocol: TCP
      targetPort: 443
  type: LoadBalancer
  selector:
    run: maintenance-nginx

Create nginx deployment and service in the Kubernetes cluster

export KUBECONFIG=<your_kube_config_file.yml>kubectl apply -f nginx-deployment.yamlkubectl apply -f nginx-service.yaml# Get the load balancer urlkubectl get services

Visit the load balancer URL to find the static maintenance page and that’s it.
Use it whenever required during scheduled maintenance or upgrade etc.

How to Serve a Static HTML Page using Nginx in a Kubernetes Cluster

Written by Hemanth M Gowda

Responses (1)