hello_project.png

简介

这是一款 HTML 应用管理系统，轻松发布你的 HTML 小应用，支持版本管理与授权访问。项目采用的是前后端分离的技术架构，后端采用 PHP 的thinkphp 框架、前端采用 React 的 Ant Design Pro 框架。

example1.jpg

example2.jpg

主要功能和工作原理概览图：

wechat_2025-10-06_113008_166.png

项目地址

GitHub

https://github.com/luler/hello_project

部署

NAS项目部署，首先下载项目

wechat_2025-10-06_113312_248.png

解压 ZIP 文件，只需要里面的这 3 个文件夹（docker-compose.yml 模板也可以加上）

wechat_2025-10-06_113334_324.png

NAS 里创建文件夹，将上面文件放到里面

wechat_2025-10-06_113351_836.png

安装

Docker Compose

services:
php_nginx:
    image: registry.cn-shenzhen.aliyuncs.com/luler/linux_php_nginx:php7.3
    container_name: php_nginx
    privileged: true
    ports:
      - 1314:80
    volumes:
      - ./config/init.sh:/init.sh
      - ./runtime/nginx/wwwlogs:/home/wwwlogs
      - ./code/api:/home/wwwroot/api
      - ./code/web/dist:/home/wwwroot/web/dist
      - ./config/nginx/nginx.conf:/usr/local/nginx/conf/nginx.conf
      - ./config/nginx/vhost:/usr/local/nginx/conf/vhost
      - ./config/php/php-fpm.conf:/usr/local/php/etc/php-fpm.conf
      - ./config/php/php.ini:/usr/local/php/etc/php.ini
    restart: always

浏览器中输入 http://IP:1314 就能看到界面

wechat_2025-10-06_113419_052.png

输入账号和密码进行登录（默认账号密码：admin/admin）

wechat_2025-10-06_114150_947.png

右上角，点击“设置密码”

wechat_2025-10-06_114205_738.png

建议修改默认密码，避免被破解了

wechat_2025-10-06_114219_497.png

来到 H5 项目列表，点击“新增”

wechat_2025-10-06_114235_695.png

填写项目名称（授权码，相当于访问 html 页面需要输入密码）

wechat_2025-10-06_114249_722.png

点击进入项目

wechat_2025-10-06_114305_376.png

上传项目的压缩包文件

wechat_2025-10-06_114320_031.png

点击跳转访问链接

wechat_2025-10-06_114332_277.png

可以正常加载显示 html 页面

wechat_2025-10-06_114351_323.png

支持简单的多用户管理

wechat_2025-10-06_114754_244.png

总结

由于最近项目有前端页面展示需求，偶然发现了这款 H5 项目发布系统，作为一款简单轻量的 HTML 应用管理工具还是挺不错的：不仅能实现 HTML 页面的快速部署与展示，还内置了授权码访问控制机制，保证了一定的安全性。当然对于网站部署有更多需求的，是不太推荐的，这个只能作为快速便捷的简单展示。