[项目自荐] 交叉编译njs并使用Nginx搭建自由的个人网盘：vList5

这个博客好久没有打理了，最近才想起来
这篇文章是以下 5 篇文章的组合，希望这个免费的项目能实现他的初衷吧

• vList5：部署指南
  
• vList5.3 全面加密，从我做起
  
• njs 从入门(交叉编译)到入坟(与vList5配对)
  
• vList5+njs/moment 实用与使用
  
• 光猫折腾4：为光猫编译armel版本的nginx
  

特色：

• 使用 Vue3 作为框架，支持njs作为后端(推荐)，超强大的并发能力
  
• 超多格式支持预览，甚至原生支持CueSheet与vue原生集成
  
• 动态模块加载，即插即用
  
• 预设5个打开方式和3个备用打开方式，可在src/opener.ts中添加
  
• 支持简单的文件系统管理，集成批量、正则等好用的工具
  
• 响应式设置设计，设置里修改后立即生效
  
• 仿explorer易上手的文件选取、文件树结构
  
• 好用的右键支持，在移动端也可以像Windows那样长按唤出右键菜单
  
• vPlayer集成ASS字幕，支持手势、字幕选取，artPlayer能否做到的她都能做到
  
• vLite仿照了 [yesPlayMusic][9] 的UI，支持CUE光盘文件播放，强大而华丽
  
• 支持 [所见即所得的MarkDown编辑器Muya][10]，高效编写MarkDown的助手
  
• 使用VSCode底层monaco编辑器，代码编辑如虎添翼
  
• ......
  

GITHUB开源：https://github.com/imzlh/vList5
1.编译

njs是Nginx的一个扩展，用于取代lua动态输出内容
njs融合了浏览器端的ES(如crypto)语法和部分NodeJS语法(如fs.open)
这里已经假设你安装了pcre2、openssl、zlib、libxml2库
先fetch NGINX

1. curl https://nginx.org/download/nginx-1.25.4.tar.gz | tar xz
2. cd nginx-1.25.4
3. sed -i 's|ngx_feature_run=yes|ngx_feature_run=no|g' auto/cc/name
4. sed -i 's|ngx_feature_run=yes|ngx_feature_run=no|g' auto/os/linux
5. sed -i 's|ngx_feature_run=yes|ngx_feature_run=no|g' auto/unix
6. sed -i 's|ngx_size=`$NGX_AUTOTEST`|ngx_size=4|g' auto/types/sizeof
7. sed -i '187 a ngx_feature_run=no' auto/cc/conf
8. sed -i 's|/opt/local|/data/app|g' auto/lib/geoip/conf
9. sed -i 's|/opt/local|/data/app|g' auto/lib/pcre/conf
10. sed -i 's|ngx_feature_path=|ngx_feature_path="/data/app/include"|g' auto/lib/zlib/conf
11. sed -i 's|ngx_feature_libs="-lz"|ngx_feature_libs="-R/data/app/lib -L/data/app/lib -lz"|g' auto/lib/zlib/conf
12. sed -i 's|/opt/local|/data/app|g' auto/lib/openssl/conf

复制代码

将njs克隆到 njs/ 文件夹中：

1. git clone https://github.com/nginx/njs.git

复制代码

由于是交叉编译，我们需要修改一下编译选项

1. for i in `ls njs/auto`
2. do
3.     sed -i 's|njs_feature_run=yes|njs_feature_run=no|g' njs/auto/$i
4.     sed -i 's|njs_feature_run=value|njs_feature_run=no|g' njs/auto/$i
5. done

复制代码

然后是重新编译nginx

1. ./configure \
2.     --prefix=/usr/local/ \
3.     --user=daemon \
4.     --group=daemon \
5.     --build="for ARMRounger" \
6.     --without-poll_module \
7.     --without-http_ssi_module \
8.     --without-http_userid_module \
9.     --without-http_mirror_module \
10.     --without-http_geo_module \
11.     --without-http_map_module \
12.     --without-http_split_clients_module \
13.     --without-http_uwsgi_module \
14.     --without-http_grpc_module \
15.     --without-http_memcached_module \
16.     --without-http_empty_gif_module \
17.     --without-http_browser_module \
18.     --without-http_upstream_hash_module \
19.     --without-http_upstream_ip_hash_module \
20.     --without-http_upstream_least_conn_module \
21.     --without-http_upstream_random_module \
22.     --without-http_upstream_keepalive_module \
23.     --without-http_upstream_zone_module \
24.     --http-log-path=/tmp/nginx/log.log \
25.     --http-client-body-temp-path=/tmp/nginx/body \
26.     --http-proxy-temp-path=/tmp/nginx/proxy \
27.     --http-fastcgi-temp-path=/tmp/nginx/fcgi \
28.     --http-scgi-temp-path=/tmp/nginx/scgi \
29.     --with-cc=armv7m-linux-musleabi-gcc \
30.     --with-cpp=armv7m-linux-musleabi-gcc-g++ \
31.     --add-dynamic-module=njs/nginx/ \
32.     --add-module=dav \
33.     --with-http_dav_module \
34.     --with-http_v2_module \
35.     --with-http_v3_module

复制代码

完美：

configuring additional dynamic modules
adding module in ../njs/nginx/
  enabled webcrypto module
  enabled xml module
  enabled zlib module
  + ngx_js_module was configured

想要我编译好的可以去 原文找到
2.安装vList

vList在一个月内从 v1 升级到了 v4，完成了甚至超额完成我们预期内的所有功能
我们团队觉得好不是真的好，接下来是用户的天地！
配置nginx

如果你是自己编译的，那么配置文件位置是你自己设置的
打开配置文件，大部分系统都保存在 /etc/nginx/nginx.conf

1. nano /etc/nginx/nginx.conf

复制代码

可以直接将配置写在这里，但是我其实更推荐使用系统为我们设计好的其他目录
Alpine: /etc/nginx/http.d/default.conf
Debian: /etc/nginx/site-enabled/default.conf
然后找到合适的位置加上这几行

1. js_import /etc/nginx/main.js;
2. location = /@api/ {
3.     js_var                  $authkey "[这里填写你想要的密码]";
4.     js_content              main.main;
5. }

复制代码

如果有 # Everything in 404 这几行 location，删掉
下载vList

得益于GithubAction，现在你不需要安装node，直接可以开箱即用啦
这个是vList5
这个是适用于nginx的
配置网页

1. cd [你的网页根目录]
2. curl https://github.com/imzlh/vList5/releases/download/main/vlist5_latest.tgz -L | tar xz

复制代码

配置

1. curl -L https://github.com/imzlh/vlist-njs/releases/download/master/vlist5.js -o /etc/nginx/main.js

复制代码

开始使用

现在，重载nginx

1. killall nginx
2. nginx

复制代码

打开网页，即可体验
进阶用法

修改配置

用记事本打开config.ts这个文件

1. -  | // 应用名称，显示在左上角
2. 4  | export const APP_NAME = 'izCloud';
3. -  | // 默认文件图标，自定义：可以改成相对路径
4. 5  | export const DEFAULT_FILE_ICON = I_File;
5. -  | // 默认文件夹图标，自定义：可以改成相对路径
6. 6  | export const DEFAULT_DIR_ICON = I_DIR;
7. -  | // API地址，除非前后端分离，请修改请修改最后一行引号内至"/"
8. 7  | export const APP_API = import.meta.env.DEV
9.    | ? 'http://192.168.1.1:81/@api/'
10.    | : '/@api/';      // <--- HERE
11. -  | // 文件服务器地址，除非前后端分离，请修改最后一行引号内至"/"
12. 10 | export const FILE_PROXY_SERVER = import.meta.env.DEV
13.    | ? 'http://192.168.1.1:81/'
14.    | : '';            // <--- HERE

复制代码

甚至可以正则匹配，如隐藏所有图片

1. 16 | /**
2. 17 |  * 检验文件是否应该被隐藏
3. 18 |  */
4. 19 | const HIDE_FILES = (name) => name[0] == '.';

复制代码

然后，我自己访问只需要 转到目录，输入隐藏的路径(文件夹)即可

或者使用HASH大法，在路径上输入目录路径即可，如http://localhost:5173/#/.in/
完美!

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！