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

来源:https://www.cnblogs.com/imzlh/p/18306972
-Advertisement-
Play Games

其實很久以前，Nginx就設想推出JavaScript for Nginx了，可惜直到現在都不完善，甚至在國內關註的人都寥寥無幾 雖然如此，但Nginx出品的高併發NJS還是很香啊，原生集成就是好 但是，你知道怎麼交叉編譯Nginx和Nginx的JS引擎njs嗎？ 你想要嘗試使用Nginx+NJS搭... ...


這個博客好久沒有打理了，最近才想起來
這篇文章是以下 5 篇文章的組合，希望這個免費的項目能實現他的初衷吧

特色：

  • 使用 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/
完美!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 使用 useLazyAsyncData 提升數據載入體驗
    title: 使用 useLazyAsyncData 提升數據載入體驗 date: 2024/7/19 updated: 2024/7/19 author: cmdragon excerpt: 摘要：本文介紹useLazyAsyncData函數在Nuxt 3中的使用，以提升數據載入體驗。此函數支持異 ...
  • VUE diff 演算法：為了直觀展示，畫了一張圖來直觀展示
    上圖直觀展示了 Vue 的 Diff 演算法流程：3種方式 比較根節點： 圖中左側的 "Old VNode" 和右側的 "New VNode" 表示舊的和新的虛擬 DOM 根節點。 箭頭表示比較過程，如果根節點不同，直接替換整個節點。 比較子節點： 當根節點相同時，遞歸比較子節點。 左側 "Old C ...
  • 記錄--如何修改第三方npm包？
    ‍ 寫在開頭 點贊 + 收藏 學會 有這樣一種場景：如果你在開發過程中，發現某個npm包有Bug，應該怎麼辦？ 第一選擇當然是向原作者提issue，或者Fork該倉庫代碼，修改以後，提交合併請求。 但這種情況有個嚴重的問題，就是耗時，如果遇到嚴格的作者，或者不活躍的作者，時間線可 ...
  • Nuxt.js 中使用 useHydration 實現數據水合與同步
    title: Nuxt.js 中使用 useHydration 實現數據水合與同步 date: 2024/7/18 updated: 2024/7/18 author: cmdragon excerpt: 摘要：介紹Nuxt.js中useHydration函數，用於控制客戶端與伺服器數據同步，實現數 ...
  • 防抖和節流
    1. 防抖，回城-執行完成區間計時的那一次 觸發事件時開始計時，計時結束後執行事件處理。當計時未結束再次觸發事件，則清除計時器並重新計時。 思路：利用閉包，保存回調函數的計時器。判斷計時器是否存在，是-清除原計時器。在計時器內調用事件處理函數。 註意：這裡要搞清楚返回的匿名函數才是綁定的點擊事件，而 ...
  • 一款免費開源的線上圖片壓縮工具
    Pic Smaller —— 一款超級好用的線上圖片壓縮工具，基於 Vite + React 實現，直觀、移動友好，並且支持壓縮配置。 ...
  • useHeadSafe：安全生成HTML頭部元素
    title: useHeadSafe：安全生成HTML頭部元素 date: 2024/7/17 updated: 2024/7/17 author: cmdragon excerpt: 摘要：“useHeadSafe”是Vue.js組合函數，用於安全生成HTML頭部元素，通過限制輸入值格式避免XSS ...
  • 記錄--uniapp相容微信小程式和支付寶小程式遇到的坑
    ‍ 寫在開頭 點贊 + 收藏 學會 1、支付寶不支持v-show 改為v-if。 2、v-html App端和H5端支持 v-html ，微信小程式會被轉為 rich-text，其他端不支持 v-html。 解決方法：去插件市場找一個支持跨端的富文本組件。 3、導航欄處有背景色延 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類