nps 从零启动 - 5.[终篇]实战搭建公网可访问 vanBlog 实例

看完本文会得到什么

用 Hyper V 启动一个 Ubuntu Server 版的虚拟机
使用 docker 启动一个 vanBlog 实例
将自己家里电脑上的博客网站，通过 nps 让别人可以访问

前方高能

本文是为了配合 nps 进行内网穿透将自己家里的电脑暴露在外网去访问，因此您必须阅读前面几篇前序的文章才能继续本教程，否则您将一头雾水的来，一头雾水的走

请完成打勾的文章的阅读

用 Hyper-V 搭建一个 Ubuntu Server 的虚拟机

为什么要用虚拟机？

因为我本质上不想我家里的电脑“真正”暴露在外网，鬼知道 Windows 上有什么漏洞，正如现在所有云服务厂商，除非是有特殊需求一定要求用实体物理机放在机房做服务器，我们现在买菜，网购，刷抖音大部分的服务都是运行在虚拟里内的，甚至都是虚拟机里面的虚拟机，然后再来一层容器的封装隔离，方便某一个单一系统的资源隔离和资源分配，所以我只是借鉴了生产环境里面的一层隔离，实际上我可能也是多虑了，但是多设计了一层，就多了一些繁琐的工作，同时也学到了一些之前没接触过的知识，我觉得产出的价值比投入的要多，所以我也建议你跟我一样，学起来。

上述那一段配合下面的图更好理解：

首先去 Ubuntu 官网下载最新的 Ubuntu Server 的 ISO 文件 -> Get Ubuntu Server，我下载的版本是 ubuntu-22.04.1-live-server-amd64.iso。

这里要吐槽微软 Windows 11 自带的 Hyper-V 里面内置的 Ubuntu 是桌面版操作系统，不适合做服务器，另外他默认给的磁盘很小，而且不方便拓展，就是个笑话。详细请看：https://www.frodehus.dev/resize-disk-for-ubuntu-hyper-v-quick-create-image/

创建 Ubuntu Server 虚拟机的步骤

设置启动选项

然后双击虚拟机点击启动，就会开始安装 Ubuntu Server。

安装 Ubuntu Server 的时候不要使用官方源

搭建 Ubuntu Server 运行环境

首先我们通过 ssh 从本地 Windows 连接到虚拟机内部，通过 Hyper-V 的操作界面可以打开虚拟机，输入你安装系统时候的账户和密码就可以成功登录，登录之后输入


$ ip r

获取虚拟机的 IP，一般是 172 开头的那个，本文假设你的虚拟机 IP 地址是：172.24.203.45

然后你打开 Windows 的 Powershell 或者是 Windows Terminal 连接进去


$ ssh [email protected]

安装 docker & docker compose

请查看官方文档 https://docs.docker.com/engine/install/ubuntu/

强烈推荐

请在安装完了之后，根据官方文档设置https://docs.docker.com/engine/install/linux-postinstall/
让当前用户不再需要输入 sudo 就能操作 docker

启动 vanBlog

创建一个文件夹 ./vanBlog


$ cd ./vanBlog

新建一个文件 docker-compose.yml,拷贝如下内容:

yaml
version: "3"

services:
  vanblog:
    image: mereith/van-blog:latest
    restart: always
    environment:
      TZ: "Asia/Shanghai"
      # 图片资源允许的域名，英文逗号分隔。作者 logo 加载不出来请检查此项。不要带协议！
      VAN_BLOG_ALLOW_DOMAINS: "www.mereith.com"
      # 邮箱地址，用于自动申请 https 证书
      EMAIL: "[email protected]"
    volumes:
      # 图床文件的存放地址，按需修改。
      - ${PWD}/data/static:/app/static
      # 日志文件
      - ${PWD}/log:/var/log
      # caddy 配置存储
      - ${PWD}/caddy/config:/root/.config/caddy
      # caddy 证书存储
      - ${PWD}/caddy/data:/root/.local/share/caddy
    ports:
      # 前面的是映射到宿主机的端口号，改端口的话改前面的。
      - 80:80
      - 443:443
  mongo:
    # 某些机器不支持 avx 会报错，所以默认用 v4 版本。有的话用最新的。
    image: mongo:4.4.16
    restart: always
    environment:
      TZ: "Asia/Shanghai"
    volumes:
      - ${PWD}/data/mongo:/data/db

然后启动 vanBlog


$ docker compose up -d

然后你回到 Windows ，打开 Edge 或者 Chrome 输入网址:


http://172.24.203.45

恭喜你，你已经成功拥有了一个 vanBlog 系统。

结合 nps 服务端，让自己虚拟机里面的博客被外网访问

前序

本章节的前序是nps 从零启动 - 2. 客户端 Linux 篇，请在你的虚拟机里面安装 npc 客户端，并且成功连接到你外网服务器上的 nps 服务端

为 vanBlog 设置域名

前序

本章节的前序是nps 从零启动 - 3. 网站三要素：域名&nginx&HTTPS 证书，请在你的外网服务器上配置好 dns 以及 nginx + https 证书绑定

假设你的域名是 xyz.com，请将你的 ./vanBlog/docker-compose.yml 改成如下内容:

yaml
version: "3"

services:
  vanblog:
    image: mereith/van-blog:latest
    restart: always
    environment:
      TZ: "Asia/Shanghai"
      VAN_BLOG_ALLOW_DOMAINS: "blog.xyz.com"
    volumes:
      - ${PWD}/data/static:/app/static
      - ${PWD}/log:/var/log
    ports:
      - 80:80
      # - 443:443 因为外网服务器上做了 443:HTTPS 证书的安装，所以 vanBlog 就是后端服务，因此可以隐藏 443 端口不需要让 nps 转发到这个端口，80 端口就可以满足需求
  mongo:
    image: mongo:4.4.16
    restart: always
    environment:
      TZ: "Asia/Shanghai"
    volumes:
      - ${PWD}/data/mongo:/data/db

主要是为了去除默认的自动申请的证书配置，因为我们的证书是在 nps 服务器上安装的，nginx 做了一层反向代理，所以我们真正运行 vanBlog 的运行环境上是不需要证书的，完美绕行。🤠

实现 blog.xyz.com 通过 nps-npc 穿透到你的 Ubuntu 虚拟机上

1. dns 解析将 blog.xyz.com CNAME 到 xyz.com

Type	Name	Content
A	xyz.com	1.2.3.4
CNAME	blog.xyz.com	xyz.com

我给出我当前网站的实例

请参照我为当前 shouyicheng.com 域名设置这样去设置你的 xyz.com 域名。

2. 服务器上的 nginx 上设置 blog.xyz.com 的请求统统交给 nps 去穿透

首先我们需要 nginx 将 blog.xyz.com 的请求转发给 nps,请 ssh 到你的服务器上


$ ssh [email protected] # 假设你服务器 IP 地址是 1.2.3.4

新建专门为了转发 vanBlog 请求的 nginx 配置文件


$ vi vanBlog.conf

填入以下内容


server {
    server_name blog.xyz.com;

    listen 443 ssl;
    listen [::]:443 ssl;

    location / {

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass_request_headers on;

        proxy_pass http://127.0.0.1:8080;
    }
}

这里需要重点解释的是

proxy_pass http://127.0.0.1:8080;

这个配置的意思是：当你在浏览器访问 blog.xyz.com 时候，nginx 会把请求都转发给服务器上本机内的 8080 端口。为什么要这样设置？

因为 nps 它就监控了这个端口，所有发往这个端口的请求，nps 都会根据你在 nps 控制台设置的规则，进行内网穿透，它将再次转发到你目标的 npc 客户端

nps 默认不是监听 8080 端口上的 http 请求的，关于这一点请一定阅读右边这篇文章 nps 从零启动 - 4. nginx + nps 灵活搭配使用

把 vanBlog.conf 拷贝到 nginx 的配置里面去


$ sudo cp ./vanBlog.conf /etc/nginx/conf.d/

然后刷新 nginx 配置


$ sudo nginx -s reload

3. 在 nps 管理控制面板上设置域名转发

请根据 nps 从零启动 - 4. nginx + nps 灵活搭配使用的步骤，打开 nps 的服务端管理控制后台页面，
在左侧的域名解析填入如下内容

因为 nginx 会将 blog.xyz.com 的请求转发给服务端的 nps 监听的 8080 端口，而 nps 在接收到 nginx 转发过来的 blog.xyz.com 的端口的时候，会根据你如图中设置的域名解析进行内网穿透到你客户端的端口

我的域名是 blog.shouyicheng.com，而这里你应该换成你的域名，而另外一个关键参数是客户端 ID，你在创建 npc 客户端的时候，系统会默认给你分配一个数字 ID，你在创建域名解析的时候就填入这个客户端 ID。

4. vanBlog 监听本地的 80 端口，npc 正确启动连接到 nps 服务端，对 nps 穿透过来的请求进行应答

这里需要回到你 Hyper-V 里面的 Ubuntu Server 机器上来做检查


$ docker ps

你会看到


CONTAINER ID   IMAGE                           COMMAND                  CREATED        STATUS        PORTS                                                                                            NAMES
7391b6953ccb   mereith/van-blog:latest         "sh entrypoint.sh"       15 hours ago   Up 15 hours   0.0.0.0:80->80/tcp

然后根据nps 从零启动 - 2. 客户端 Linux 篇的操作为你的 Ubuntu 安装

然后确认 npc 状态


# npc status

确认连接成功之后。

打开你的博客网站: https://blog.xyz.com

如果一切顺利的话，你已经成功的打通了这一个链路上所有的请求和服务应答。

完美收官。

目录