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

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

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

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

本站演示:科技玩家Cloud

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

引用官方介绍

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

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

解题思路

服务器👉安装宝塔👉部署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/public/index.php,记得点击添加。

部署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已经准备就绪,马上回到宝塔开始初始化配置。

二、PHP配置

1、Use EXIF thumbs、PDF thumbs安装

PHP安装插件fileinfoimagemagickexif

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

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函数

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

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

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

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

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

配置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"即可。

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

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

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

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

location = /_h5ai/private/ 
{ 
    return 404; 
}

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();

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

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

2)局部式密码

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

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

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

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

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

  • 修改网站配置文件

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

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

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

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

以上,一些完全性的访问基本已经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
 },

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

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"
 },

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

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密码。

-> 加入科技玩家交流群组:点击加入 <-
注意:
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

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

    谢谢分享,学习了

  2. 可爱的八

    学习一下

  3. AresQ

    蹭个评论

  4. linlin

    谢谢分享,学习一下

  5.  AMI

    学习一下

  6. 花花花花海

    你好,我按照你的教程进行搭建私人云,前面按照步骤进行的,但是在 自己域名/_h5ai/public/index.php 这一步骤后就显示无法访问了,请问一下是什么原因呀

  7. Jackson

    私有云需要备案吗?

  8. WaitingForLove

    谢谢分享,受教了

  9. 王青尘

    谢谢分享,学习了

  10. 王青尘

    学习了,谢谢分享

  11. Yoke

    学习了

  12. 这把看我表演

    谢谢分享,学习了

  13. 巴黎的黄昏

    大佬去csdn

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