当前位置: 首页 > news >正文

如何在 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-stoppedports:# 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' # FTPenvironment:DB_MYSQL_HOST: "db"DB_MYSQL_PORT: 3306DB_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/letsencryptdepends_on:- dbdb:image: 'jc21/mariadb-aria:latest'restart: unless-stoppedenvironment: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 文件夹,

image-20220313215238703

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

具体操作如下:

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

image-20220313220644530

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

image-20220313220755911

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

image-20220313220853599

4、配置参数

image-20220313220956132

image-20220313221045094

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

image-20220313221248089

NGINX

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

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

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

image-20220313220830583

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

image-20220313221552303

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

image-20220313221654247

image-20220313221718216

搞定!

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

http://www.lryc.cn/news/231476.html

相关文章:

  • http的几种方法
  • var、let、const关键字的特性,以及let、const暂时性死区的作用
  • IDEA 高分辨率卡顿优化
  • 【AIGC】一起学习prompt提示词(4/4)【经典】【15种提示词技巧】
  • Linux实战一天一个小指令--《文件管理/文件查找》
  • CocosCreator3.8神秘面纱 CocosCreator 项目结构说明及编辑器的简单使用
  • JJJ:python学习笔记
  • SpringSecurity6从入门到上天系列第七篇:讲明白SpringBoot的自动装配完善上篇文章中的结论
  • ClickHouse 原理解析之基础知识总结
  • 最小花费——最短路
  • Spark DataFrame join后移除重复的列
  • NextJS工程部署到阿里云linux Ecs
  • 汽车以太网IOP测试新利器
  • 高防IP是什么?如何隐藏源站IP?如何进行防护?
  • ElasticSearch---查询es集群状态、分片、索引
  • Angular 使用教程——基本语法和双向数据绑定
  • 【ASP.NET】Hello World
  • AI创作系统ChatGPT网站源码+支持最新GPT-Turbo模型+支持DALL-E3文生图/AI绘画源码
  • C#_查找图片(按键精灵找图)
  • C#中.NET Framework4.8 控制台应用通过EF访问新建数据库
  • 无防御香港服务器如何防CC
  • MyBatis的插件能在哪些地方进行拦截?
  • 【BUG库】 记录自己学习工作中遇到的程序BUG
  • 卡尔曼家族从零解剖-(07) 高斯分布积分为1,高斯分布线性变换依旧为高斯分布,两高斯函数乘积仍为高斯。
  • 设计模式-访问者模式(Visitor)
  • C++二分查找算法:132 模式解法二枚举2
  • JavaWeb-HTML
  • 新外卖霸王餐小程序、H5、微信公众号版外卖系统源码
  • LeetCode - #89 格雷编码
  • 11.3SpringMVC