如何在 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.rhkb.cn/news/197966.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu 安装VMware Tools选项显示灰色,如何安装VMware Tools

切换apt源为阿里云&#xff1a; https://qq742971636.blog.csdn.net/article/details/134291339 只要你的网络没问题&#xff0c;你直接执行这几个命令&#xff0c;重启ubuntu虚拟机即可、 sudo dpkg --configure -a sudo apt-get autoremove open-vm-tools sudo apt-get ins…

LangChain 2模块化prompt template并用streamlit生成网站 实现给动物取名字

上一节实现了 LangChain 实现给动物取名字&#xff0c; 实际上每次给不同的动物取名字&#xff0c;还得修改源代码&#xff0c;这周就用模块化template来实现。 1. 添加promptTemplate from langchain.llms import OpenAI # 导入Langchain库中的OpenAI模块 from langchain.p…

Autox.js和Auto.js4.1.1手机编辑器不好用我自己写了一个编辑器

功能有 撤销 重做 格式化 跳转关键词 下面展示一些 内联代码片。 "ui"; ui.layout( <drawer id"drawer"><vertical><appbar><toolbar id"toolbar"title""h"20"/></appbar><horizontal b…

深度学习——(生成模型)DDPM

前置数学知识 1、先验概率和后验概率 先验概率&#xff1a;根据以往经验和分析得到的概率,它往往作为“由因求果”问题中的“因”出现&#xff0c;如 q ( x t ∣ x t − 1 ) q(x_t|x_{t-1}) q(xt​∣xt−1​) 后验概率&#xff1a;指在得到“结果”的信息后重新修正的概率,是…

MIKE水动力笔记19_统计平均潮差

本文目录 前言Step 1 ArcGIS中创建渔网点Step 2 将dfsu数据提取到渔网点Step 3 Python统计平均潮差 前言 日平均潮差&#xff08;average daily tidal range&#xff09;&#xff1a;日高潮潮高合计之和除以实有高潮个数为日平均高潮潮高&#xff0c;日低潮潮高合计之和除以实…

redis问题归纳

1.redis为什么这么快&#xff1f; &#xff08;1&#xff09;基于内存操作&#xff1a;redis的所有数据都存在内存中&#xff0c;因此所有的运算都是内存级别的&#xff0c;所以性能比较高 &#xff08;2&#xff09;数据结构简单&#xff1a;redis的数据结构是专门设计的&…

「Verilog学习笔记」根据状态转移图实现时序电路

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 这是一个典型的米利型状态机。三段式即可解决。 米利型状态机&#xff1a;即输出不仅和当前状态有关&#xff0c;也和输入有关。 其中ST0&#xff0c;ST1&#xff0c;ST3的…

分组交换技术

目录 一、新型计算机网络的基本特点 二、电路交换 1、回顾电路交换的原理 2、使用交换机连接许多部电话 3、电路交换举例 4、电路交换的三个阶段 5、电路交换的特点 三、分组交换 1、因特网有边缘部分与核心部分组成 2、分组交换的原理 3、分组交换的优点 4、存储转…

蓝桥杯每日一题2023.11.19

题目描述 “蓝桥杯”练习系统 (lanqiao.cn) 题目分析 首先想到的方法为dfs去寻找每一个数&#xff0c;但发现会有超时 #include<bits/stdc.h> using namespace std; const int N 2e5 10; int n, cnt, a[N]; void dfs(int dep, int sum, int start) {if(dep 4){if(s…

[AI]ChatGPT4 与 ChatGPT3.5 区别有多大

ChatGPT 3.5 注册已经不需要手机了&#xff0c;直接邮箱认证就可以&#xff0c;这可真算是好消息&#xff0c;坏消息是 ChatGPT 4 还是要收费。 那么 GPT-3.5 与 GPT-4 区别有多大呢&#xff0c;下面简单测试一下。 以从 TDengine 订阅数据为例&#xff0c;TDengine 算是不太小…

5.Java中的注释及Javadoc文档

本文讲解 Java 中的注释以及 Javadoc 文档 ~ 文章目录 1. 注释1.1 引言1.1.1 何为注释&#xff1f;1.1.2 注释有何用&#xff1f;1.1.2.1 方便阅读1.1.2.2 调试程序 1.1.3 单行注释和多行注释 1.2 方法注释1.2.1 什么是方法注释&#xff1f;1.2.2 如何写方法注释&#xff1f;1.…

SpirngBoot + Vue 前后端分离开发工具代码

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; Java从入门到精通 ✨特色专栏&#xf…

OpenCV入门5——OpenCV的算术与位运算

文章目录 图像的加法运算图像的减法运算图像的乘除运算图像的融合OpenCV位运算-非操作OpenCV位操作-与运算OpenCV位操作-或与异或为图像添加水印 图像的加法运算 # -*- coding: utf-8 -*- import cv2 import numpy as npimg cv2.imread(E://pic//4.jpg)# 图的加法运算就是矩阵…

ubuntu20源码编译搭建SRS流媒体服务器

第一、下载源码 下载源码&#xff0c;推荐用Ubuntu20&#xff1a; git clone -b develop https://gitee.com/ossrs/srs.git第二、编译 2.1、切换到srs/trunk目录&#xff1a; cd srs/trunk2.2、执行configure脚本 ./configure2.3、执行make命令 make2.4、修改conf/rtmp.c…

SpringBoot 2.x 实战仿B站高性能后端项目

SpringBoot 2.x 实战仿B站高性能后端项目 下栽の地止&#xff1a;请看文章末尾 通常SpringBoot新建项目&#xff0c;默认是集成了Maven&#xff0c;然后所有内容都在一个主模块中。 如果项目架构稍微复杂一点&#xff0c;就需要用到Maven多模块。 本文简单概述一下&#xff0c…

Vue+ElementUI技巧分享:自定义表单项label的文字提示

文章目录 概要在表单项label后添加文字提示1. 使用 Slot 自定义 Label2. 添加问号图标与提示信息 slot的作用详解1. 基本用法2. 具名插槽 显示多行文字提示的方法1. 问题背景2. 实现多行内容显示3. 样式优化 结语 概要 在Vue和ElementUI的丰富组件库中&#xff0c;定制化表单是…

数据结构:红黑树的插入实现(C++)

个人主页 &#xff1a; 个人主页 个人专栏 &#xff1a; 《数据结构》 《C语言》《C》《Linux》 文章目录 一、红黑树二、红黑树的插入三、代码实现总结 一、红黑树 红黑树的概念&#xff1a; 红黑树是一颗二叉搜索树&#xff0c;但在每个节点上增加一个存储位表示节点的颜色&…

基于java web个人财务管理系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

SDUT OJ《算法分析与设计》贪心算法

A - 汽车加油问题 Description 一辆汽车加满油后可行驶n公里。旅途中有若干个加油站。设计一个有效算法&#xff0c;指出应在哪些加油站停靠加油&#xff0c;使沿途加油次数最少。并证明算法能产生一个最优解。 对于给定的n和k个加油站位置&#xff0c;计算最少加油次数。 I…

【LeetCode刷题-树】--1367.二叉树中的链表

1367.二叉树中的链表 方法&#xff1a;枚举 枚举二叉树中的每个节点为起点往下的路径是否与链表相匹配的路径&#xff0c;为了判断是否匹配设计了一个递归函数dfs(root,head),其中root表示当前匹配到的二叉树节点&#xff0c;head表示当前匹配到的链表节点&#xff0c;整个函数…