Contents

Host a Static Site on NGINX Proxy Manager (NPM)

Contents

I have recently been playing with NGINX (NPM) due to the web based management capabilities it has. I recently had the need to host a static site behind NPM, but didn’t want to run another server….

Overview

Since I already have NPM running and listening on port 443, I want to avoid bringing up another web server just for a static site. This is a simple enough, low-traffic need, that it should be fine using the built-in NGINX that NPM already has running.

In my case, I am running NPM in Docker on a PhotonOS Virtual Machine using a simple docker-compose file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
version: "3"
services:
  app:
    image: jc21/nginx-proxy-manager:github-pr-966
    restart: always
    ports:
      # Public HTTP Port:
      - '80:80'
      # Public HTTPS Port:
      - '443:443'
      # Admin Web Port:
      - '81:81'
    environment:
      # Uncomment this if IPv6 is not enabled on your host
      DISABLE_IPV6: 'true'
    volumes:
      # Make sure this config.json file exists as per instructions above:
      - ./config.json:/app/config/production.json
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt

As you can see, there is a data folder under the directory with the docker-compose.yml file. I’ll leverage that existing mapped folder for a static website.

How-To

  1. Create a new folder on your docker host in the data folder that is already mounted to your NPM container. For example md data/demo.lab
  2. Place your static file(s) in that folder - at least place a quick and simple index.html
  3. Go to your NPM UI and create a new Proxy Host
  4. Specify the FQDNs in the Domain Names box (In this case, I’m using an invalid TLD that cannot be publicly resolved: .demo.lab and www.demo.lab), select http, specify 127.0.0.1 and port 80

NPM New Proxy Host

  1. On the SSL tab, choose the SSL Certificate for the FQDNs specified for the Domain Names and enable Force SSL and HTTP/2 Support
  2. On the Advanced tab, enter the following text in the Custom Nginx Configuration:
location / {
  root /data/demo.lab;
}

NPM New Proxy Host

  1. Update your appropriate internal DNS entries to point demo.lab and www.demo.lab to the internal address of your NPM server. This will allow your local users to resolve those URLs without going out your router.
  2. If working with a public domain, be sure to update your external DNS entries to point demo.lab and www.demo.lab to the external IP address of your NPM server.
Dynamic DNS
You can use ddclient to update many different DNS provider’s entries.
  1. Visit your website in a browser and confirm its working!

  2. Finally, setup a pipeline or script to place your updated static site files in the data/demo.lab folder of your NPM Docker server.