[專案自薦] 交叉編譯njs並使用Nginx搭建自由的個人網盤：vList5

imzlh發表於2024-07-17
編譯JSNginx

這個部落格好久沒有打理了，最近才想起來
這篇文章是以下 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

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

將njs克隆到 njs/ 資料夾中：

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

由於是交叉編譯，我們需要修改一下編譯選項

for i in `ls njs/auto`
do
    sed -i 's|njs_feature_run=yes|njs_feature_run=no|g' njs/auto/$i
    sed -i 's|njs_feature_run=value|njs_feature_run=no|g' njs/auto/$i
done

然後是重新編譯nginx

./configure \
    --prefix=/usr/local/ \
    --user=daemon \
    --group=daemon \
    --build="for ARMRounger" \
    --without-poll_module \
    --without-http_ssi_module \
    --without-http_userid_module \
    --without-http_mirror_module \
    --without-http_geo_module \
    --without-http_map_module \
    --without-http_split_clients_module \
    --without-http_uwsgi_module \
    --without-http_grpc_module \
    --without-http_memcached_module \
    --without-http_empty_gif_module \
    --without-http_browser_module \
    --without-http_upstream_hash_module \
    --without-http_upstream_ip_hash_module \
    --without-http_upstream_least_conn_module \
    --without-http_upstream_random_module \
    --without-http_upstream_keepalive_module \
    --without-http_upstream_zone_module \
    --http-log-path=/tmp/nginx/log.log \
    --http-client-body-temp-path=/tmp/nginx/body \
    --http-proxy-temp-path=/tmp/nginx/proxy \
    --http-fastcgi-temp-path=/tmp/nginx/fcgi \
    --http-scgi-temp-path=/tmp/nginx/scgi \
    --with-cc=armv7m-linux-musleabi-gcc \
    --with-cpp=armv7m-linux-musleabi-gcc-g++ \
    --add-dynamic-module=njs/nginx/ \
    --add-module=dav \
    --with-http_dav_module \
    --with-http_v2_module \
    --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

nano /etc/nginx/nginx.conf

可以直接將配置寫在這裡，但是我其實更推薦使用系統為我們設計好的其他目錄
Alpine: /etc/nginx/http.d/default.conf
Debian: /etc/nginx/site-enabled/default.conf
然後找到合適的位置加上這幾行

js_import /etc/nginx/main.js;
location = /@api/ {
    js_var                  $authkey "[這裡填寫你想要的密碼]";
    js_content              main.main;
}

如果有 # Everything in 404 這幾行 location，刪掉

下載vList

得益於GithubAction，現在你不需要安裝node，直接可以開箱即用啦
這個是vList5
這個是適用於nginx的

配置網頁

cd [你的網頁根目錄]
curl https://github.com/imzlh/vList5/releases/download/main/vlist5_latest.tgz -L | tar xz

配置

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

開始使用

現在，過載nginx

killall nginx
nginx

開啟網頁，即可體驗

進階用法

修改配置

用記事本開啟config.ts這個檔案

-  | // 應用名稱，顯示在左上角
4  | export const APP_NAME = 'izCloud';
-  | // 預設檔案圖示，自定義：可以改成相對路徑
5  | export const DEFAULT_FILE_ICON = I_File;
-  | // 預設資料夾圖示，自定義：可以改成相對路徑
6  | export const DEFAULT_DIR_ICON = I_DIR;
-  | // API地址，除非前後端分離，請修改請修改最後一行引號內至"/"
7  | export const APP_API = import.meta.env.DEV
   | ? 'http://192.168.1.1:81/@api/' 
   | : '/@api/';      // <--- HERE
-  | // 檔案伺服器地址，除非前後端分離，請修改最後一行引號內至"/"
10 | export const FILE_PROXY_SERVER = import.meta.env.DEV 
   | ? 'http://192.168.1.1:81/' 
   | : '';            // <--- HERE

關於FILE_PROXY_SERVER

  • 如果有代理伺服器，可以修改這一段
  • 如果前後端分離(vList5單獨一個伺服器)，需要填寫
  • 一般情況下直接改成/即可，因為vList5預設使用網頁根目錄作為列表根目錄

關於API地址

  • 並不是一定需要/@api/作為API地址的，但是需要nginx和前端vlist一起更改

vList的妙用

批次刪除/重新命名/移動

場景 設想你下載了一堆番劇檔案和找來了一堆字幕，有簡體、繁體、各種不同的命名。你甘心一個一個排序嗎？

step

cue檔案解析

你去網上下載了一張CD，結果是一個cue檔案和一個長達1個小時，大小甚至超過了200MB的flac檔案，你想要聽一個片段，怎麼辦？
在vList5中，雙擊開啟即可

私密資料夾

有的時候，我們需要開放，也需要隱私。這個時候隱藏資料夾就出場了
比如遮蔽所有$開頭的資料夾，開啟 vlist.js

16 | /**
17 |  * 檢驗檔案是否應該被隱藏
18 |  */
19 | const HIDE_FILES = (name) => name[0] == '.';

在19行新增即可，如

19 | const HIDE_FILES = (name) => name[0] == '.' || name[0] == '$';

甚至可以正則匹配，如隱藏所有圖片

19 | const HIDE_FILES = (name) => name[0] == '.' || name.match(/\.(jpg|png|webp|jpeg)$/);

然後，我自己訪問只需要 轉到目錄，輸入隱藏的路徑(資料夾)即可

隱藏

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

相關文章