花森门户
📌 关于
花森系列网站增添新作品,(huasenjio-compose)官方仓库,基于 vue.js、node.js、docker-compose、redis、mongodb、jenkins 组合构建的容器应用。如果我的项目给您带来帮助,请点一个star(🌟)!您的鼓励和支持,对我真的很重要!
💪 开源列表
✅ 花森门户容器版(huasenjio-compose)
✅ 花森门户静态版(huasen-protal)
✅ 花森脚手架(huasen-cli)
☑️ 花森低代码平台 (预研)
☑️ 花森流程引擎(预研)
🤩 在线体验
由于服务器配置过于垃圾,首次访问较慢,请耐心等待,如果加载卡死,则重新刷新网页。不是代码写得烂,相反我已进行性能优化,并且经过实践验证,服务器配置较好的情况下,访问速度很快!
1.网址导航
2.博客
3.个人引导页
💡 平台简介
花森门户由浏览器主页网址导航、博客系统、后台管理系统组成,浏览器主页收录资源网站,涵盖了日常生活、娱乐、学习、影视、考研、工作、科技、实用工具等领域。博客系统,定期分享实用教程、计算机知识、资源软件等文章,致力于提供高效上网冲浪环境的公益性平台!
📙 功能清单
官网
✅ 界面响应式适配,不同设备完美呈现;
✅ 数据离线存储,无需登陆,畅享所有,支持数据拷贝恢复;
✅ 云端备份,多设备数据同步;
✅ 自定义网站收录,收藏精品站点;
✅ 鼠标右键改色,创建专属皮肤;
✅ 更换皮肤壁纸;
✅ 多引擎搜索框,支持百度热词提示;
✅ 站内链接搜索,支持从名称、描述、备注搜索站点,一键直达网站;
✅ 邮箱登陆注册;
✅ 极简模式,干净简洁;
✅ 订阅切换;
✅ 实时天气;
✅ Markdown文章阅读,支持三级锚点目录;
☑️ ChatGPT;
☑️ 提交链接;
☑️ …
后台管理
✅ 实时访客统计,记录PV、UV、IP、反向链接、设备,精准掌控流量(不涉及敏感信息);
✅ 服务器状态监听,记录CPU、内存、磁盘使用占比;
✅ Markdown文章发布;
✅ 订阅源管理,一键管理订阅源、栏目、网链;
✅ 账户管理,包括用户、管理员、黑名单信息管理;
✅ 图标制作,支持文字、上传、爬取三种方式生成图标;
✅ 日志管理;
✅ 配置管理;
✅ 动态脚本执行面板;
✅ 文件管理,支持图片、视频、PDF、文档等文件存储;
☑️ PDF在线阅读;
☑️ 完善批量删除;
☑️ 提交链接审核;
☑️ …
后台服务
✅ 自研的并发处理器,轻松抗下1000并发;
✅ 多容器一键部署,经典的MVC架构;
✅ 黑名单拦截;
✅ 权限管理,支持 jwt 身份校验;
✅ 数据加密传输,支持对称、非对称加密传输;
✅ 邮件发送;
✅ 日志系统;
✅ 定时任务;
✅ Websocket实时通讯;
✅ 多线程处理;
✅ 文件上传;
✅ 跨域处理;
☑️ 资源防盗链;
☑️ SEO优化;
☑️ …
✨ 界面功能预览
快照更新于2023年4月28日
1.响应式适配
2.首页+搜索+右键换肤
3.极简模式
4.自定义收录
5.皮肤主题
6.文章展示
7.文章阅读
8.数据仪表盘
9.文章发布
10.栏目管理
11.网链管理
12.文章管理
🧩 技术架构
前端基于 Vue.js(2.6.x)、ElementUI、Tailwindcss、Axios 等技术开发的 Web 应用,服务端基于 Node.js、Mongodb、Redis、Express 开发的服务框架,使用 Nginx 作为代理服务器转发请求,选择 jenkins 实现 CI/CD,借助 docker 进行一键容器化部署。
🔨 快速部署
🏁 测试环境
- Centos 7.4;
- 腾讯云服务器 1 核 2G(学生机);
🏁 安装依赖
一.Git
安装git版本管理工具,直接拉取源码到服务器,免去通过xfpt上传源码文件的繁琐过程。
(1)安装 wandisco 仓库包
yum install http://opensource.wandisco.com/centos/7/git/x86_64/wandisco-git-release-7-2.noarch.rpm
(2)安装 git 安装包
yum -y install git
(3)验证版本
git version
二.Docker
(1)卸载旧版本
yum remove -y docker \
docker-client \
docker-client-latest \
docker-common \
docker-latest \
docker-latest-logrotate \
docker-logrotate \
docker-selinux \
docker-engine-selinux \
docker-engine
(2)安装依赖工具包
yum install -y yum-utils \
device-mapper-persistent-data \
lvm2
(3)设置 yum 源
sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
sudo yum makecache fast
(4)安装 docker
yum install -y docker-ce
(5)启动 docker
systemctl start docker.service
(6)设置开机自启动
systemctl enable docker.service
(7)设置权限
sudo chmod a+rw /var/run/docker.sock
(8)查看版本
命令行执行
docker version
如下命令,输出有 Client 和 Server 服务,则说明运行正常。
(9)安装 vim 工具
如果系统没有自带 vim 编辑器,则使用如下命令进行安装。
yum -y install vim*
(10)添加镜像源配置文件
默认通过官方镜像源拉取,速度特别慢,并且容易卡死,所以需要替换镜像源,如果目录下不存在 daemon.json 配置文件,则新建配置文件,执行
vim /etc/docker/daemon.json
命令,输入配置如下:
{"registry-mirrors":["https://registry.docker-cn.com","http://hub-mirror.c.163.com","https://docker.mirrors.ustc.edu.cn"],"ipv6":false}
(11)重载配置
⚠️ 不然配置不会生效
执行
sudo systemctl daemon-reload
命令
(12)重启docker
⚠️ 不然配置不会生效
执行
sudo systemctl restart docker
命令
三.Docker-compose
安装docker-compose服务,负责对docker容器进行集群和快速编排。
(1)下载资源
sudo curl -L"https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)"-o /usr/local/bin/docker-compose
(2)设置权限
sudo chmod +x /usr/local/bin/docker-compose
(3)建立软连接
不建立软连接,可能无法使用docker-compose命令。
ln - s /usr/local/bin/docker-compose/usr/bin/docker-compose
(4)查看版本
docker-compose --version
🏁 运行容器
通过上一步,我们已经安装好git、docker、docker-compose服务,接下来我们拉取源码,直接运行容器。
(1)通过 git 拉取源码
git clone https://github.com/huasenjio/huasenjio-compose.git
(2)进入 huasenjio-compose 目录
cd huasenjio-compose
(3)运行容器
执行运行容器命令后,docker将自动拉取安装配置nginx、mongodb、redis、jenkins、后端服务,第一次会比较缓慢,请耐心等待,如果遇到卡死的情况,使用
ctrl + c
终止命令,然后重复执行运行容器命令即可。
docker-compose up -d
(4)访问站点
容器启动成功之后,我们在浏览器地址栏输入如下地址:
官网地址:协议://ip/portal/后台管理地址:协议://ip/admin/
默认后台管理密码:[email protected]/12345
❓常见 QA
(1)按照步骤操作,导航、博客、后台管理网站可以直接访问?
是的,项目采取容器化配置,只要一次安装运行成功,即可访问使用,无需其他繁琐配置。
(2)为什么容器运行失败?
运行容器时,请确保80、37017、7379、8080、3000、8181端口不被占用,可以通过
netstat -anp | grep 端口号
检查端口占用情况,如果不幸已经有服务占用端口,则需要修改
docker-compose.yml
中对应容器的端口后,重新执行运行容器命令。
(3)运行成功,但是还是无法访问到站点?
如果服务已经正常启动,但是无法访问站点,需要检查一下服务器防火墙和安全组配置,是否限制80端口的访问,可以使用端口检测工具,进行检测。
(4)用户注册时,为什么邮箱验证码无法发送?
由于邮箱验证码功能依赖 nodemailer 库实现,需要部署之前修改
/huasenjio-compose/huasen-server/config.js
中的
QQ_MAIL
配置项,更改成自己的申请邮箱地址和 mtp 通行码。
(5)mongodb 数据库的存储位置?
工程根目录下
huasen-mongo/volume
文件夹,就是数据库的数据文件夹。
(6)如何删除容器,重新启动容器?
进入huasenjio-compose 目录,打开终端,通过
docker-compose down
,停止容器,删除容器。
(7)如何重新构建镜像?
进入huasenjio-compose 目录,打开终端,通过
docker-compose build --no-cache
,不使用缓存,重新构建镜像。
(8)如何操作服务器防火墙?
开启防火墙:systemctl start firewalld
关闭防火墙:systemctl stop firewalld
查看防火墙:systemctl status firewalld
查看指定端口:firewall-cmd --query-port=8080/tcp
打开指定端口:firewall-cmd --add-port=8080/tcp --permanent
重载端口数据:firewall-cmd --reload
关闭指定端口:firewall-cmd --permanent --remove-port=8080/tcp
(9)如何配置放开安全组?
因为服务器提供商的应用界面不同,所以省略教程,大家平时使用阿里云、腾讯云、华为云等服务器提供商的服务器,都是可以轻易地百度到安全组的操作教程!
📽 视频安装教程
(1)通过docker-compose安装教程
https://www.bilibili.com/video/BV1G44y1Q7MV
(2)通过宝塔面板安装教程
https://www.bilibili.com/video/BV1xA411z7QA
(3)自动化部署教程
https://www.bilibili.com/video/BV1vg4y1E7xy
(3-1)构建完成执行的shell脚本
# 删除文件if[! -d "/huasen-compose/huasen-log"];thenecho"文件不存在";elserm -rf /huasen-compose/huasen-log;fiif[! -d "/huasen-compose/huasen-nginx"];thenecho"文件不存在";elserm -rf /huasen-compose/huasen-nginx;fiif[! -d "/huasen-compose/huasen-server"];thenecho"文件不存在";elserm -rf /huasen-compose/huasen-server;fi# 移动文件mv -f ./huasen-nginx /huasen-compose/huasen-nginx
mv -f ./huasen-server /huasen-compose/huasen-server
# 合并资源目录cp -frap ./huasen-store/* /huasen-compose/huasen-store/
(3-2)远程执行的shell脚本
# 采用宿主机进程# source /etc/profile# 防止此进程在执行宿主机脚本之前被杀死# BUILD_ID=dontKillMe# 进到部署目录cd /huasenjio-compose
# 输出执行目录pwd# 停止服务docker-compose stop nginx server
# 移除已停止的容器docker-composerm -f nginx server
# 更新后端服务镜像docker-compose build server
# 重新更新部署容器docker-compose up -d --no-recreate --remove-orphans
# 移除无用的镜像docker image prune -f
docker volume prune -f
🐛 开发者指南
⚠️ 以下内容适合有编程基础的小伙伴观看
目录结构
├── huasen-mongo // mongodb 数据库配置和数据
├── huasen-nginx // nginx 配置
├── huasen-redis // redis 配置和数据
└── huasen-server // 后端服务
├── app.js // 服务入口文件
└──config.js // 服务配置文件
├── huasen-store // 静态文件仓库
├── huasen-jenkins // jenkins 配置
├── docker-compose.yml // docker-compose 编排配置文件
└── huasen-frontend // 前端界面源码
├── admin // 后台管理界面源码
├── portal // 前台站点源码
└── guide // 个人引导页源码
本地启动调试
一.前端
⚠️ 进入/huasenjio-compose/huasen-frontend/portal目录下执行命令
(1)安装依赖
npm install
(2)运行程序
npm run server
(3)打包构建
npm run build
二.后台管理
⚠️ 进入/huasenjio-compose/huasen-frontend/admin目录下执行命令
(1)安装依赖
npm install
(2)运行程序
npm run server
(3)打包构建
npm run build
三.容器启动
⚠️ 进入根目录下执行命令
(1)构建容器
docker-compose up -d
(2)停止后台服务容器
因为花森网站是编排好的组合式容器,所以容器启动时,容器中后台服务,会占用掉3000端口,我们需要在根目录中执行
docker-compose stop server
命令,停止容器内的后台服务。否则本地的后端服务,因为端口被占用,导致无法启动。
四.后台服务
⚠️ 进入/huasenjio-compose/huasen-server目录下执行命令
(1)安装依赖
npm install
(2)运行程序
npm run dev
❌ 声明
仅供学习参考,未经授权,禁止商业使用!
🥳 联系我们
由于涉及知识面较广,文字讲解篇幅过大,可以关注我的 Bilibili 账号,后续更新视频教程,感兴趣的小伙伴可以添加站长微信 ,进入前端技术交流群!
🐧企鹅QQ:184820911
😸微信 :huasencc(站长邀请进入前端交流群)
📮邮箱 :184820911@qq.com
📺哔哩哔哩:花森酱 JioJio
版权归原作者 花森酱 所有, 如有侵权,请联系我们删除。