前言
💡 温馨提示:本文约4500字,预计阅读时长约15分钟,内容较为详细,建议收藏后慢慢阅读
你是不是也遇到过这种情况:想在家搭建一个个人博客网站或其他网站,却因为没有公网IP、不懂服务器配置而不得不放弃?明明手头有绿联NAS这样的好设备,却只能用来存照片、看电影,实在是太可惜了!
但好消息是——绿联NAS + 宝塔 + cpolar的组合可以让你轻松实现家用NAS建站,真正实现在家跑一个能用自己域名访问的网站。不需要复杂的网络知识,也不需要购买昂贵的云服务器,你手头的绿联NAS就能搞定一切。
接下来,我们就从绿联NAS部署宝塔面板开始,一步步教你搭建一个属于你的个人博客网站,并通过cpolar内网穿透让全世界都能访问你的网站。如下为搭建好后的样子,先看看效果吧:
博客首页:

纪念页:

1 博客项目介绍
开源项目地址:https://gitee.com/littledokey/poetize
1.1 项目概述
POETIZE(作诗,有诗意地描写)是一个全栈个人博客项目,号称”最美博客”。这个项目由一位程序员用三年时间精心打磨,融合了技术、艺术与生活,真正实现了”程序员的全栈浪漫”。
项目采用前后端分离架构,后端使用Spring Boot,前端采用Vue框架,数据存储使用MySQL。整个系统分为两个主要模块:
- 博客系统:包含文章管理、表白墙、图片墙、收藏夹、音乐播放、视频播放、留言、友链、后台管理等功能
- 聊天室系统:支持朋友圈、好友、群组等社交功能
1.2 技术栈
| 模块 | 技术栈 | 组件 |
|---|---|---|
| 后端 | Spring Boot 2.7 | Nginx + MySQL + Mybatis-Plus + T-io |
| 博客前端 | Vue2 | Element UI |
| 聊天室前端 | Vue3 | Element-Plus UI + Naive UI |
| 移动适配 | CSS | 完美自适应 |
1.3 功能特色
核心功能:
- 博客系统:文章管理(速览、分类、详情页)、社交互动(表白墙、图片墙、友人帐、弹幕墙)、娱乐功能(音乐盒、视频播放、百宝箱)、其他功能(收藏夹、留言、友链)
- 聊天室系统:朋友圈动态、好友管理、群组聊天
-
后台管理:访问统计、基础设置、文件管理、文章管理
⚠️ 注意:聊天室系统(Vue3)是非必须的。如果部署,则需要依赖博客,从博客的”联系我”进入,因为登录模块在博客系统中。
项目特色:
- 极致美学设计,界面精美,视觉效果出众
- 实用与美观并存,功能丰富且用户体验优秀
- 前后端分离架构,便于维护和扩展
- 移动端完美自适应,支持各种设备访问
- 开源免费,提供完整源码供学习和使用
2 绿联Nas安装宝塔
在前几期的教程中,我们已经详细介绍过如何在绿联NAS上部署宝塔面板,包括Docker安装、容器配置、面板登录等完整步骤。如果你对宝塔面板的安装过程还不熟悉,可以参考我们的详细教程:没有公网IP却能在外网访问绿联NAS中部署的宝塔面板?
💡 提示:宝塔面板是一款功能强大的服务器管理面板,让你完全不需要懂Linux命令,就能通过图形化界面一键部署Web环境、管理网站和数据库,真正实现零基础也能玩转服务器管理。
两种安装方式的区别:
- 命令行安装:宝塔直接安装在绿联NAS系统中,环境配置在系统层面,删除宝塔后环境配置可能残留,需要一定的Linux基础,适合有一定技术经验的用户
- Docker安装:宝塔运行在独立容器中,环境与系统隔离,删除容器后环境完全清除,不会影响绿联NAS系统,适合新手小白用户
本期将选择Docker方式来进行部署,项目需要专门映射多个端口(如7777、8081等)和挂载特定目录(如日志、备份等),Docker方式可以更方便地管理这些配置,而且容器化部署让环境隔离更彻底,不会影响绿联NAS系统的其他服务,更适合新手小白。
首先,需要先给绿联Nas开启SSH远程登录功能,点击首页的控制面板:

然后点击终端机图标,点击进入:

点击勾选SSH功能,然后点击应用(注意:SSH密码为登录的密码,建议密码一定要设置强密码,特别是公网环境下!!):

接着,电脑上摁Win + X键,选择终端(管理员),打开PowerShell终端:

在终端输入如下命令,连接你的绿联Nas终端:
# ssh 你的绿联Nas用户名@你的绿联Nas访问IP地址
ssh susu@192.168.50.99

连接上绿联Nas的终端后,在终端中输入如下命令,切换至root用户:
sudo -i

接着, 执行如下命令使用Docker一键部署宝塔面板(还没有安装Docker的小伙伴可以查看大纲开头提到文章进行安装):
docker run -d \
--name baota \
-p 888:888 -p 8888:8888 -p 3306:3306 -p 7777:7777 -p 7778:7778 -p 8081:8081 \
-v /volume1/docker/baota/www:/www \
-v /volume1/docker/baota/www_server_panel:/www/server/panel \
-v /volume1/docker/baota/www_server_data:/www/server/data \
-v /volume1/docker/baota/www_server_logs:/www/server/logs \
-v /volume1/docker/baota/poetize_logs:/home/poetize/logs \
-v /volume1/docker/baota/www_backup:/www/backup \
--restart=always \
btpanel/baota:latest
执行效果如下:

接着输入如下命令,查看容器运行状态:
docker ps

可以看到,容器状态为 Up,表示宝塔面板已正常运行。在Nas的Docker面板也可以看到baota容器的状态:

接着输入如下命令进入容器内部:
docker exec -it baota /bin/bash

然后输入命令bt,再输入数字14回车可以查看到默认信息:
bt

最后,在浏览器中访问如下地址即可访问到宝塔页面:
# 绿联Nas的IP地址+8888端口+/btpanel访问路径
192.168.50.99:8888/btpanel

使用查看到的账号和密码进行登录(也可以自行修改),即可成功登录进首页:

3 项目下载及环境安装
3.1 项目部署文件下载
项目采用Spring Boot + Vue技术栈,部署前需要打包。为了省去打包环节,我已经提前给大家打包好部署文件,直接从云盘下载即可:
123永久云盘链接:https://www.123865.com/s/3jOKVv-cQOzH?pwd=1314#
提取码:1314

下载下来后,在宝塔首页,选择侧边栏文件菜单,进入文件页面,默认会在www/wwwroot目录:

接着,直接将前端、后端和数据库都上传至宝塔中:

这样前置准备就做好了!
3.2 项目环境安装
部署文件上传完成后,接下来安装环境。项目采用Spring Boot + Vue前后端分离架构,使用MySQL存储数据,因此需要安装Nginx、MySQL和JDK。
首先,宝塔面板侧边栏选择网站菜单,在PHP项目页面,可以直接看到提示未安装运行环境,安装Nginx或者安装Apache:

直接选择安装Nginx即可,在弹出的菜单中选择极速安装:

接着,点击右上角的叉,切换至Java项目页面,点击页面上的Java环境管理:

选择JDK1.8的版本进行安装:

继续叉掉窗口,选择侧边菜单栏的数据库,会提示未安装MySQL环境,点击安装MySQL环境:

版本为mysql5.7,直接点击极速安装即可:

等待环境安装完成,安装进度可以点击左上角的绿色数字图标,进入查看任务列表和消息列表提示:

可以看到,全部环境都安装完成啦!
4 通过宝塔进行项目部署
4.1 数据库导入
首先,选择宝塔侧边菜单栏的数据库,进入到MySQL页面,点击添加数据库按钮:

数据库名称填写poetize,用户名及密码会自行设置,然后直接点击确认按钮即可:

点击确定后,接着,点击导入按钮:

选择从本地上传或者本机导入都可以,这里以本地上传为例(选择本机导入也可以,前面将数据库文件也上传至/www/wwwroot目录下了):

上传完成后,我们点击导入按钮:

提示导入成功即可,接着记一下用户名和密码(复制留着备用):

接着,侧边栏选择文件菜单,然后进入到后端目录,双击打开application.yml文件,修改username和password项为前面的数据名称和密码,然后进行保存:

这样数据库部分就配置完成了!
4.2 前端项目部署
点击侧边菜单栏的网站菜单,项目选择PHP项目,然后点击添加站点:

在域名这一栏填写你的绿联Nas IP地址+7777端口,7777端口为前面docker容器创建时映射的端口,然后点击根目录右侧的文件夹图标:
192.168.50.99:7777
如下图:

在弹出的目录选择菜单中,选择Vue2博客目录,然后点击确认:

确保无误后,再次点击确认,创建该站点:

接着,点击网站名称,切换到配置文件菜单,在配置文件内容中添加如下配置,点击保存:
# Vue 前端 SPA 入口
location / {
try_files $uri $uri/ /index.html;
}
# 后端 API 反代
location ^~ /api/ {
proxy_pass http://127.0.0.1:8081/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
如下图操作:

保存后,点击叉掉即可,然后鼠标上移至Nginx图标,点击重启按钮:

接着,在浏览器中访问绿联Nas的IP地址+7777端口,即可访问到前端项目了:
192.168.50.99:7777

此时访问前端项目,页面提示错误码502,左下角显示看板娘。出现502错误是因为还无法连接后端,接下来我们部署后端项目!
4.3 后端项目部署
回到宝塔页面,在网站菜单,选择Java项目,然后点击页面的添加项目按钮,在弹出的窗口中,点击项目路径右边的文件夹图标按钮:

进入到后端文件夹中,点击文件名称为poetize-server.jar的文件,然后点击确认:

接着,在项目启动命令处,修改为如下命令(直接全选替换即可),然后点击查看更多配置,将启动用户改为root,最后点击确定:
/www/server/java/jdk1.8.0_371/bin/java -Xmx1024M -Xms256M -jar /www/wwwroot/后端/poetize-server.jar --spring.config.location=/www/wwwroot/后端/application.yml

接着,点击项目名称,然后选择日志管理,查看日志输出,在日志中能看到端口运行在8081即代表成功启动:

此时,再访问前端项目,即可发现,项目已经成功完整显示数据了:
192.168.50.99:7777
如下图:

这样,前后端项目就都部署完成了,你的博客网站可以在局域网内正常访问了!
5 下载安装cpolar
到这里,绿联NAS + 宝塔面板 + 博客项目已经成功部署完成,你的最美博客也能在局域网内正常访问了。看着精美的界面、丰富的功能,是不是很有成就感?
但问题来了——此时的博客只能在局域网中使用,出了家门就访问不了。想在公司向同事展示你的博客?想让外地朋友也能看到你写的文章?想让访客随时随地浏览你的网站?这些现在都做不到!而且大多数家庭网络都有NAT、动态IP等限制,想靠路由器端口映射或DDNS实现公网访问,不仅步骤繁琐,而且稳定性堪忧。
好消息是,接下来我们就进入关键的一步——通过cpolar内网穿透让你的博客网站获得真正的公网访问能力,实现无论在公司、学校还是外地,都能随时随地访问你的个人博客,让全世界都能看到你的作品!
2.1 什么是cpolar?

- cpolar 是一款内网穿透工具,可以将你在局域网内运行的服务(如本地 Web 服务器、SSH、远程桌面等)通过一条安全加密的中间隧道映射至公网,让外部设备无需配置路由器即可访问。
- 广泛支持 Windows、macOS、Linux、树莓派、群晖 NAS 等平台,并提供一键安装脚本方便部署。
2.2 安装cpolar
回到PowerShell终端,如果还在容器内部,执行exit命令即可退出:

退出Docker容器内部后,执行如下命令,一键安装cpolar:
sudo curl https://get.cpolar.sh | sh

接着输入如下命令,确认cpolar是否启动:
sudo systemctl status cpolar

可以看到显示为active(running),表示为正常在线状态。
接着,我们在浏览器中,输入你的绿联NAS的IP地址+9200端口,进行访问cpolar的web ui控制台:
http://192.168.50.99:9200/

可以发现,成功的访问到cpolar的web ui页面啦!如果没有注册cpolar的小伙伴也可以点击底部的按钮跳转注册!
6 穿透博客以实现公网访问
注册好账号以后,回到该页面进行登录即可,登录成功后,进入侧边的【隧道管理>隧道列表】,可以看到有2条隧道:

选择website这条隧道,点击编辑进行修改(也可以创建新的隧道),设置一个方便辨识的隧道名称,然后协议选择http,本地地址填写博客的访问端口7777,地地区这里选择的China Top,最后点击更新:

创建或者更新完成后,接着点击【状态>在线隧道里列表】,可以看到有2条名称为zmblog的隧道,一条为http的协议,另一条为https的协议:

复制公网地址,这里以https为例,访问测试一下:

可以发现,成功访问到啦!这时候你就可以把你的博客分享给朋友、发到社交媒体,让更多人看到你的作品,展示你的个人风采!
7 自定义域名方式
前面设置的是随机域名,虽然永久免费,但域名又长又难记,地址还会不定期变化。如果你有一定预算,可以升级使用固定二级子域名,这样你的博客访问地址就会变成类似xxx.cpolar.top这样简洁好记的地址,而且永久不变。如果你有自己的域名,还能配置自己的域名访问博客,完全不需要额外购买服务器!
接下来,我就以自己的域名771566.xyz(在阿里云购买)为例,演示如何配置自定义域名访问博客。
7.1 保留自定义域名
首先,进入官网的预留页面:
https://dashboard.cpolar.com/reserved
然后,选择预留菜单,即可看到保留自定义域名项,填写其中的地区、域名、描述(可不填)项,然后点击保留按钮,操作步骤图如下:

列表中显示了一条已保留的二级子域名记录:
- 地区:显示为China Top。
- 域名:显示为771566.xyz。
- CNAME配置:显示为32e0a637.cname.cpolar.top。
7.2 添加解析记录
以阿里云为例,访问你的域名控制台,在域名列表中,选择刚才进行保留的域名,点击右侧操作列的【解析】按钮:
https://dc.console.aliyun.com/#/domain-list/all

进入到域名下的解析页面后,点击【添加记录】按钮:

点击【添加记录】按钮后,在右侧的添加记录表单中,配置如下:
- 记录类型:选择CNAME
- 主机记录:输入blog
- 记录值:输入cpolar提供的CNAME地址(即前面显示的:32e0a637.cname.cpolar.top)
- TTL:默认即可
配置完成后,点击【确定】:

点击确定后,可以点击侧边的三个点,然后点击【生效检测】,点击后会进行跳转:

确认解析的结果与记录值一致即可:

7.3 修改cpolar自定义域名配置
回到cpolar的后台webui页面,在【隧道管理>隧道列表】中可以看到名为zmblog的隧道:

点击【编辑】按钮,进入编辑隧道页面,将域名类型改为自定义域名,在域名名称中填写你的域名,如果需要进行ssl加密,可将证书文件上传,然后点击更新按钮:

如果没有申请ssl证书可以不用上传,直接点击更新即可。如果有则如下图操作,首先需要下载证书,以阿里云为例:

下载下来后是一个压缩包,进行解压,可以看到1个key文件和2个crt证书文件:

接着在回到zmblog的隧道编辑页面,上传你的ssl证书文件,然后点击更新即可:

7.4 测试访问
配置完成后,等待几分钟让DNS解析生效,然后在浏览器中输入你的域名访问:
https://blog.771566.xyz

如果没有申请SSL证书,可以通过http的方式进行访问即可:
http://blog.771566.xyz

可以看到,成功通过自定义域名访问到你的博客了!现在你可以把这个域名分享给朋友,或者印在名片上,既专业又好记!
总结
本教程带你从零搭建了一个基于绿联NAS + 宝塔 + cpolar的个人博客系统,成功部署了号称”最美博客”的POETIZE项目,并通过cpolar内网穿透实现了公网访问,让你在家就能拥有一个随时可访问的个人网站。
- 绿联NAS + 宝塔面板:采用Docker方式部署宝塔面板,环境隔离更彻底,不会影响绿联NAS系统,完全不需要懂Linux命令就能轻松管理服务器
- POETIZE博客项目:前后端分离架构,包含文章管理、表白墙、图片墙、音乐盒、视频播放等丰富功能,界面精美,真正实现了”程序员的全栈浪漫”
- cpolar内网穿透:提供随机域名(免费)和自定义域名(付费)两种方案,无论在公司、学校还是外地,都能随时随地访问你的个人博客
通过本教程,你可以快速搭建一个功能完整、界面精美、支持公网访问的个人博客系统,既能展示你的技术实力,也能分享你的生活点滴,真正实现”在家跑一个能用自己域名访问的网站”的目标!
感谢您阅读本篇文章,有任何问题欢迎留言交流。cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站



