如何在 Nginx Proxy Manager(NPM)上部署静态网站

前言

众所周知,我们在之前介绍过 Nginx Proxy Manager(以下简称 NPM) 这个反向代理的神器,对于一些 Docker 搭建的 Web 项目,NPM 能够很轻松地给他们做反向代理。

然而对于一些静态网站,小伙伴们可能不知道怎么用 NPM 来展示,这篇文章就来简单和大家分享一下,如何用 NPM 来托管一些简单的 HTML 单页。

操作步骤

因为我们已经有 NPM 在运行,监听了 443 端口和 80 端口,避免为了一个静态网站而建立另一个 Web 服务器。

托管一些简单的 HTML 单页是一个简单的、低流量的需求,使用 NPM 已经运行的内置 NGINX 就可以了。

这个是我的 NPM 的 docker-compose 文件:

BASH

|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| version: "3" services: app: image: 'jc21/nginx-proxy-manager:latest' restart: unless-stopped ports: # These ports are in format <host-port>:<container-port> - '80:80' # Public HTTP Port - '443:443' # Public HTTPS Port - '81:81' # Admin Web Port # Add any other Stream port you want to expose # - '21:21' # FTP environment: DB_MYSQL_HOST: "db" DB_MYSQL_PORT: 3306 DB_MYSQL_USER: "npm" DB_MYSQL_PASSWORD: "npm" DB_MYSQL_NAME: "npm" # Uncomment this if IPv6 is not enabled on your host # DISABLE_IPV6: 'true' volumes: - ./data:/data - ./letsencrypt:/etc/letsencrypt depends_on: - db db: image: 'jc21/mariadb-aria:latest' restart: unless-stopped environment: MYSQL_ROOT_PASSWORD: 'xxx' MYSQL_DATABASE: 'xxx' MYSQL_USER: 'xxx' MYSQL_PASSWORD: 'xxx' volumes: - ./data/mysql:/var/lib/mysql |

可以看到,在 docker-compose.yml 文件里面,我们挂载了一个./data 的文件夹,这个就是指在 docker-compose.yml 所在的文件夹里面的 data 文件夹,

我们要做的,就是在这个 data 文件夹里面放我们的静态 html 文件。

具体操作如下:

1、在你挂载的 data 文件夹里面创建一个新的文件夹,比如 mkdir /root/data/docker-data/npm/data/demo10.gao.ee

2、把带有 html 文件的内容放到这个文件夹里面

3、登陆 NPM,在网页里新建一个 Proxy Host

4、配置参数

5、在 Advanced 这一栏填入下面的配置:

NGINX

|--------------------------------------------------------------------------------------------|
| location / { root /data/demo10.gao.ee; # 修改成你自己刚刚创建的目录,只需要改demo10.gao.ee这部分就可以了 } |

**注意:**第一次输入保存可能会失效,请再次点开编辑,然后点确定,确保这边内容输入进去了。

6、确保你的域名已经解析到了这台装有 NPM 的服务上了

7、浏览网页(这里是 demo10.gao.ee),确保配置成功了!

这边乱码了,我修改一下内容:

搞定!

8、接下来,如果要修改内容,就到之前的文件夹里面修改就行(我这里是 /root/data/docker-data/npm/data/demo10.gao.ee

相关推荐
艾伦_耶格宇2 分钟前
【ACP】阿里云云计算高级运维工程师--ACP
运维·阿里云·云计算
一位摩羯座DBA41 分钟前
Redhat&Centos挂载镜像
linux·运维·centos
charlee441 小时前
nginx部署发布Vite项目
nginx·性能优化·https·部署·vite
cui_win2 小时前
【网络】Linux 内核优化实战 - net.core.flow_limit_table_len
linux·运维·网络
风清再凯2 小时前
自动化工具ansible,以及playbook剧本
运维·自动化·ansible
深圳安锐科技有限公司2 小时前
深圳安锐科技发布国内首款4G 索力仪!让斜拉桥索力自动化监测更精准高效
运维·安全·自动化·自动化监测·人工监测·桥梁监测·索力监测
猫头虎2 小时前
猫头虎 AI工具分享:一个网页抓取、结构化数据提取、网页爬取、浏览器自动化操作工具:Hyperbrowser MCP
运维·人工智能·gpt·开源·自动化·文心一言·ai编程
墨菲安全2 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
CRMEB定制开发3 小时前
【实战】CRMEB Pro 企业版安装教程(附 Nginx 反向代理配置 + 常见问题解决)
nginx·商城系统·微信商城·crmeb
cocologin4 小时前
RIP 技术深度解析
运维·网络·网络协议