码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 如何在 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 :
          - '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 文件夹,

    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)

  • 相关阅读:
    Spring-RabbitMQ 生产者消息确认案例分析
    一个或多个筛选器启动失败。完整的详细信息将在相应的容器日志文件中找到
    为什么axios会有params和data两个参数
    基于Android studio有声听书系统 java音乐播放器系统
    【JAVA程序设计】基于SSM的(非maven)高校毕业设计选题系统-有报告
    【概率论与数理统计(研究生课程)】知识点总结2(一维随机变量及其分布)
    Delaunay三角网之逐点插入法(优化版本三)
    redis缓存使用本地锁
    接口测试当中的权限限制测试和状态机测试【杭州多测师_王sir】【杭州多测师】...
    始祖双碳新闻 | 2022年8月19日碳中和行业早知道
  • 原文地址:https://blog.csdn.net/u012995136/article/details/134432454
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号