H5ai文件目录列表程序(云网盘)搭建小记

背景:导航分享一些文件的时候,选择网盘很头疼。蓝奏云不支持js直接上传,百度网盘限速,文叔叔限时总之就是没有一个省心的,特别是百度网盘一直被玩家吐槽。为了提升玩家的使用体验,于是萌生了给站里搭建一个下载站的想法,可以分享东西,大家可以秒下秒使用,没有头疼的下载限速问题和改后缀名这种多余的绊脚石。群友@Sku Shang热心推荐了这个项目,起初还挺纠结的,因为不能有分享链接和密码,看了几天的各种网盘对比,最终还是用他推荐的这个超轻量级项目了,后面我看看能不能结合别的加上分享密码。

简单介绍一下H5ai,就是一个文件目录列表程序,可以搭建在服务器上,可以作为下载站点,也可以当成私有云盘。

官网地址:https://larsjung.de/h5ai/
官方演示:https://larsjung.de/h5ai/demo/

本站演示:科技玩家Cloud

需要PHP 7.0+并且可以与Apache httpdlighttpdnginx 一起工作。使用基于 Chromium的最新版本浏览器FirefoxSafariEdge 的最佳用户体验,但为旧版浏览器或禁用 JavaScript 提供静态回退。

引用官方介绍

可以说是一款非常实用的程序,可以当成个人云盘来使用。支持图片、视频、文档等文件在线预览,支持二维码扫码下载。简单的效果图:

H5ai文件目录列表程序(云网盘)搭建小记

下面开始认真码字,记录一下部署过程。

解题思路

服务器?安装宝塔?部署NMP环境?部署H5ai?配置

准备工作:1、服务器;2、域名

服务器安装好宝塔:小白请参考下面的文章,教程默认已经安装宝塔。

服务器宝塔Docker安装教程(小白特供)

解析的域名:自行购买,挑活动时候购买比较划算,最近新网在搞活动可以看一下。

“老朋友”新网活动:0.99元买com域名、0元购企业邮箱、虚机1折

本人运行环境:Oracle Linux 7.9+宝塔+Nignx 1.20.2+MySQL 5.6.50+PHP7.4

甲骨文因为当时白嫖的,已经装了系统了,不打算重装,新朋友还是推荐服务器安装Centos7系统。

部署NMP环境

LNMP环境百度百科一下:Linux系统下Nginx+MySQL+PHP这种网站服务器架构。

一、宝塔安装NMP环境

直接在“软件商店”搜索?找到对应的版本下载即可。

PHP版本要求7.0+哦,不要安装低版本。

H5ai文件目录列表程序(云网盘)搭建小记

二、宝塔添加站点

宝塔在“网站-添加站点“进行添加,域名要填一下,其他默认即可。网站解析自己处理一下,这里不展开说了。

根目录要留意一下,后面H5ai的程序要放在网站根目录。

H5ai文件目录列表程序(云网盘)搭建小记

三、设置网站默认文档

在网站-站点设置-默认文档?添加 /_h5ai/public/index.php,记得点击添加。

H5ai文件目录列表程序(云网盘)搭建小记

部署H5ai

先了解一下H5ai的网站目录树结构

网站根目录
  ├─ _h5ai
  ├─ _h5ai ─ private
  ├─ _h5ai ─ public
  ├─ 展示文件
  ├─ 展示文件夹
  └─ 展示文件夹 ─ 展示文件

一、下载安装H5ai

1、安装H5ai

用ssh工具连接服务器,分步执行下面命令

#切换root身份
sudo -i
#cd到网站根目录,例如cd /www/wwwroot/kejiwanjia
cd /www/wwwroot/你的网站目录
#下载最新压缩包
wget https://release.larsjung.de/h5ai/h5ai-0.30.0.zip
#解压压缩包
unzip h5ai-0.30.0.zip
#删除压缩包 非必要,可以先保留。
rm -rf h5ai-0.30.0.zip
#给private、public文件夹权限
chmod -R 777 private
chmod -R 777 public

2、查看功能自检页面

现在来访问一下:你的域名/_h5ai/public/index.php,例如:科技玩家Cloud,可以查看网站相关信息。

初始密码为空,直接点击login即可。访问地址会发现有很多no,别着急,马上一个一个来解决。

H5ai文件目录列表程序(云网盘)搭建小记
H5ai文件目录列表程序(云网盘)搭建小记

好了,h5ai已经准备就绪,马上回到宝塔开始初始化配置。

二、PHP配置

1、Use EXIF thumbs、PDF thumbs安装

PHP安装插件fileinfoimagemagickexif

软件商店?PHP设置?安装插件fileinfoimagemagickexif

H5ai文件目录列表程序(云网盘)搭建小记

2、Movie thumbs (ffmpeg)安装

#x86_64下载二进制文件
wget https://www.moerats.com/usr/down/ffmpeg/ffmpeg-git-64bit-static.tar.xz
#解压文件
tar xvf ffmpeg-git-64bit-static.tar.xz
#删除压缩包
rm -rf ffmpeg-git-64bit-static.tar.xz
#将可执行文件移至/usr/bin
mv ffmpeg-git-20180831-64bit-static/ffmpeg ffmpeg-git-20180831-64bit-static/ffprobe /usr/bin/

3、Shell tar、Shell zip、Shell du安装

禁用PHP函数execpassthru即可。

软件商店?PHP设置?禁用函数?删除exec、passthru函数

H5ai文件目录列表程序(云网盘)搭建小记

同时,删除scandirputenv函数,不然有可能下面的问题:

scandir函数相关:无法显示存在的文件

putenv函数相关:访问网站出现报错Warning: putenv() has been disabled for security reasons in

以上PHP配置完毕,重启PHP。

H5ai文件目录列表程序(云网盘)搭建小记

再来访问一下:你的域名/_h5ai/public/index.php,可以看到所有的no都变成yes啦!

H5ai文件目录列表程序(云网盘)搭建小记
H5ai文件目录列表程序(云网盘)搭建小记

配置H5ai

H5ai部署后,就可以开始进行配置啦。

一、安全性设置

这个非常重要,一定不要嫌麻烦而不做。

1、设置功能自检页面访问密码

功能自检访问地址:你的域名/_h5ai/public/index.php,之前也说过了。

密码修改路径:_h5ai/private/conf/options.json,开头就是密码部分,下面是默认配置。

/*
Password hash. 
SHA512 hash of the info page password, the preset password is the empty string.
Online hash generator: https://md5hashing.net/hash/sha512
*/
"passhash": "cf83e1357eefb8bdf1542850d66d8007d620e4050b5715dc83f4a921d36ce9ce47d0d13c5d85f2b0ff8318d2877eec2f63b931bd47417a81a538327af927da3e",

"passhash",它的值是经过 SHA512 hash 计算后的结果,比如这里默认值是

"cf83e1357eefb8bdf1542850d66d8007d620e4050b5715dc83f4a921d36ce9ce47d0d13c5d85f2b0ff8318d2877eec2f63b931bd47417a81a538327af927da3e"

其实这串字符是“空值“经过SHA512 hash 计算后的结果,所以在最开始功能自检页面不用输入密码,直接就能登录。

所以,这里你要修改密码,其实是填你要修改的密码经过SHA512 hash计算后的结果。

比如,你要修改密码为kejiwanjia,通过在线密码生成工具SHA512 online,进行计算,将生成的结果填入passhash,即替换"a5b03990d3ac9e3afba4d385dda51f0858dbcefec1526d0f9b037ca969782d2dc97b1b58e5651115188d99455cbc153d08b4269120af819754b34f3c3de302e4"即可。

H5ai文件目录列表程序(云网盘)搭建小记
H5ai文件目录列表程序(云网盘)搭建小记

其实,我根本不懂什么是SHA512 hash,但是学会这东西要怎么生成和怎么填了,也不知道我说清楚没有。

2、设置/_h5ai/private目录访问返回404

这么私人的目录,当然不能随随便便让人访问啦。设置也很简单,在网站配置文件中添加下面的内容即可。

注意一下格式哦,对齐保持一致哈,不然可能有莫名其妙的错误哦。

location = /_h5ai/private/ 
{ 
    return 404; 
}
H5ai文件目录列表程序(云网盘)搭建小记

3、设置网站访问密码

1)全局式密码

即访问网站需要先登录账号密码才能查看。

修改文件路径/你的域名/_h5ai/public/index.php,将下面内容添加到末尾。

function auth () {
    $valid_passwords = array ("账号" => "密码");
    $valid_users = array_keys($valid_passwords);
 
    $user = $_SERVER['PHP_AUTH_USER'];
    $pass = $_SERVER['PHP_AUTH_PW'];
    
    
    $validated = (in_array($user, $valid_users)) && ($pass == $valid_passwords[$user]);
 
    if (!$validated) {
        header('WWW-Authenticate: Basic realm="Storage Server"');
        header('HTTP/1.0 401 Unauthorized');
        die ("Your permission is denied!");
    }
}
auth();

分别修改代码内的“账号”和“密码”即可。

设置好之后,来访问测试一下,发现已经有了要求登录的弹窗。

H5ai文件目录列表程序(云网盘)搭建小记
2)局部式密码

即可以针对某个文件夹进行加密访问,我这里采用了nignx的官方认证方式

  • 生成密码配置文件htpasswd
printf "user:$(openssl passwd -crypt yourpassword)\n" >> /www/wwwroot/htpasswd

其中user替换为你的用户名,yourpassword替换为你的密码,/www/wwwroot/htpasswd就是你的密码文件路径。

运行后,你的路径下就会有htpasswd文件。

H5ai文件目录列表程序(云网盘)搭建小记

需要注意的是,htpasswd采用 crypt加密,可以参考?crypt在线,逻辑和SHA512 hash差不多,密码是经过crypt加密计算后的结果。

  • 修改网站配置文件

网站配置文件增加下面的内容

location ~ /AutoJS 
    {
    auth_basic "please login!";
    auth_basic_user_file /www/wwwroot/htpasswd;
    }

其中~ /AutoJS就是我设置的加密的文件夹,~ 表示匹配开头,递归全部目录(可参考?nginx 中location的用法

H5ai文件目录列表程序(云网盘)搭建小记

保存后,再来访问一下AutoJS目录,发现已经有弹窗提示登录了。

H5ai文件目录列表程序(云网盘)搭建小记

以上,一些完全性的访问基本已经ok啦。下面开始说说H5ai的基本使用设置。

二、基础功能设置

H5ai基本设置的配置文件路径是:_h5ai/private/conf/options.json

下面仅列示一些基础功能,其他自己摸索。

1、设置默认语言。

找到“l10n”,将en改为zh-cn

"l10n": {
     "enabled": true,
     "lang": "zh-cn",
     "useBrowserLang": true
 },

2、开启文件搜索功能。

找到“search”,将false改为true

"search": {
     "enabled": true,
     "advanced": true,
     "debounceTime": 300,
     "ignorecase": true
 },

设置好后,网页左上角会有?按钮。

H5ai文件目录列表程序(云网盘)搭建小记

3、打包下载功能

1)多文件选择设置,即复选框☑️

找到“select”,将false改为true

"select": {
     "enabled": true,
     "clickndrag": true,
     "checkboxes": true
 },

2)下载设置

找到“download”,将false改为true,如果需要设置打包文件的格式为zip,则修改type的值为shell-zip

"download": {
     "enabled": true,
     "type": "shell-zip",
     "packageName": null,
     "alwaysVisible": false
 },

4、显示文件信息与二维码下载

找到"info",将false改为true。H5ai可以通过扫码的方式下载文件,真的好贴心。

"info": {
     "enabled": true,
     "show": true,
     "qrcode": true,
     "qrFill": "#999",
     "qrBack": "#fff"
 },

打开后,网页右侧显示文件类型和二维码,手机扫码即可下载。

H5ai文件目录列表程序(云网盘)搭建小记

5、字体加速,替换google字体库

找到"resources",替换fonts.googleapis.com为国内源,例如fonts.lug.ustc.edu.cn

"resources": {
        "scripts": [],
        "styles": [
            "//fonts.lug.ustc.edu.cn/css?family=Ubuntu:300,400,700%7CUbuntu+Mono:400,700"
        ]
    },

以上,基本上你就可以愉快的使用这款小而美的文件管理程序啦!完全可以当做一个私有云盘来使用。后面有时间再来展开说一下更多配置功能。

最后的最后,关注“科技玩家圈”公众号,发送“cloud”获取科技Cloud密码。

H5ai文件目录列表程序(云网盘)搭建小记
-> 加入科技玩家交流群组:点击加入 注意:
1.文中二维码和链接可能带有邀请性质,请各位玩家自行抉择。
2.请勿通过链接填写qq号与密码、银行卡号与密码等个人隐私信息。
3.禁止纯拉人头,拉app注册等信息,发现必小黑屋。
4.同一种信息仅发一次,多发会被删除。
5.文章中源码或APP等,无法保证其绝对安全,需自行辨别。
6.文章关联方不想展示也可以微信站长“socutesheep”删除。
本文由 @LAzySheep 发布。如若转载,请注明出处: 科技玩家 » H5ai文件目录列表程序(云网盘)搭建小记

给TA买糖
共{{data.count}}人
人已买糖
学习笔记

群晖Docker阿东jd-qinglong旧版部署(1.7、1.8)

2022-1-9 11:29:07

学习笔记精选文章

H5ai文件目录列表程序(云网盘)基础界面美化介绍

2022-1-16 21:53:25

63 条回复 A文章作者 M管理员
贴心提醒
请认真对待作者付出,勿发表无意义言论,触发过滤规则的评论将无法提交,包含敏感词的评论会自动变成待审核状态哦。
  1. 幻念

    前来顶贴!

  2. 幻念

    这真是个好文章,谢谢

  3. 幻念

    真棒,感谢分享!

  4. 七年

    打卡升级

  5. 七年

    谢谢分享,学习了

  6. slimei

    前来顶贴!

  7. 可乐?

    非常感谢 打卡升级

  8. 七年

    感谢分享,插眼学习

  9. 金水

    谢谢分享,学习了

  10. 萝卜头

    谢谢,分享学习了

  11. 七年

    又学习到了,写的非常好

  12. slimei

    感谢分享,让我好好学习一下

  13. slimei

    先看看,不明白的地方再问

  14. 84896150

    学习中

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索