使用javascript輕松擴展nginx的功能

js是 nginx 官方推出的一個基于 JavaScript 的擴展，啟用后可以通過 javascript 腳本來擴展 nginx 功能。安裝完成njs模塊即可使用njs的相關指令導入和運行js代碼實現相關功能了。

一、安裝njs模塊

njs模塊有兩種安裝方式：包管理器安裝和源碼編譯安裝。這里都以Ubuntu22.04LTS版本為例。

1.1、包管理器安裝

包管理器安裝比較省事，不用操心軟件包之間的依賴。但是直接apt install nginx的話，安裝的版本比較舊，是1.18.0版本，而不是前最新穩定版1.24.0，而且還沒有njs模塊可安裝。所以必須要按照nginx官網的說明文檔先添加nginx的apt源。

# 添加apt源，見：http://nginx.org/en/linux_packages.html#Ubuntu
sudo apt install curl gnupg2 ca-certificates lsb-release ubuntu-keyring
curl https://nginx.org/keys/nginx_signing.key | gpg --dearmor | sudo tee /usr/share/keyrings/nginx-archive-keyring.gpg >/dev/null
echo "deb [signed-by=/usr/share/keyrings/nginx-archive-keyring.gpg] http://nginx.org/packages/ubuntu `lsb_release -cs` nginx" | sudo tee /etc/apt/sources.list.d/nginx.list
echo -e "Package: *\nPin: origin nginx.org\nPin: release o=nginx\nPin-Priority: 900\n" | sudo tee /etc/apt/preferences.d/99nginx
sudo apt update
# 安裝nginx和njs模塊
sudo apt install nginx
sudo apt install nginx-module-njs
# 修改配置文件，加載模塊，在events之前加一行：load_module modules/ngx_stream_js_module.so;
sudo vi /etc/nginx/nginx.conf

1.2、源碼編譯安裝

這njs模塊并不能簡單的通過configure --with參數添加，需要單獨下載源碼構建才行。

# 安裝源碼管理工具mercurial
sudo apt install mercurial
# 下載源碼，會自動在當前目錄下創建njs目錄
hg clone http://hg.nginx.org/njs
# 安裝編譯所需的軟件包
sudo apt install gcc libpcre3-dev zlib1g zlib1g-dev libssl-dev make libxslt1-dev
# 配置和構建，添加--add-module參數
./configure --prefix=/usr/local/nginx --with-http_gzip_static_module --with-http_realip_module --with-stream --with-http_ssl_module --with-http_v2_module --add-module=/home/user/njs/nginx
make && sudo make install

二、在Nginx當中運行javascript代碼

假定目標是處理rtsp推流預讀，將rtsp的url記錄到日志，可以編寫js代碼/etc/nginx/njs/rtsp_log.js，內容如下：

function onpreread(s) {
    s.on("upload", function(data, flags){
        var _idx, _str;
        if(data != null && (_idx = data.indexOf("\r\n")) > 0) {
            _str = data.substr(0, _idx);
            if(_str.substr(0, 8) == "OPTIONS ") {
                s.variables.rtsp_preread_url = _str.substr(8);
                s.allow();
                return;
            }
            s.deny();
        }
    });
}
export default {onpreread};

修改nginx配置文件/etc/nginx/nginx.conf，增加如下配置

stream {
    # 定義一個nginx的全局變量，可通過js代碼讀寫
    js_var $rtsp_preread_url;
    # 導入js代碼，并處理預讀，記錄到變量
    js_import rtsp from njs/rtsp_log.js;
    js_preread rtsp.onpreread;
    # 將預讀的結果(變量$rtsp_preread_url)記錄到日志
    log_format basic '$remote_addr:$remote_port [$time_local] $protocol '
    '$server_port $rtsp_preread_url '
    '$status $bytes_received $bytes_sent $session_time';
    access_log /var/log/nginx/stream-access.log basic buffer=32k;

    server {
        listen 10554;
        proxy_pass 127.0.0.1:554; # 轉發給rtsp流媒體服務器
    }
}

重啟nginx，rtsp推流一下，再次重啟nginx（日志量不夠32k，不重啟不會寫到磁盤）再查看日志文件，可看到如下日志：

192.168.1.102:55382 [23/Sep/2023:06:47:41 +0000] TCP 10554 rtsp://***:554/live/demostream RTSP/1.0 200 902 1044 8.544

目開發完成之后我們就需要將項目上線運行供用戶訪問，這時候我們就需要將項目部署到服務器上。對于Vue這種前端Web項目我們一般都部署在linux系統上，Linux常見的Web應用服務器有Apache、Nginx和Tomcat 。Nginx是一款高性能、低消耗的輕量級反代理服務器很適合中小型項目，這里選擇Nginx服務器來部署Vue項目。

打包Vue項目

項目發布之前我們需要先將項目進行打包，Vue腳手架是利用webpack將前端代碼通過編譯、壓縮，合并等操作，將代碼進行整合優化并生成瀏覽器可直接識別的文件（如html，css，fonts、img、js等）。具體的打包介紹可以參考文章【Vue實戰074：你真的了解了項目打包么？來普及下吧！】，這里我們直接通過命令：npm run build對vue項目進行打包，打包之后會在項目根目錄生成一個dist 文件夾用來存放打包編譯的文件。

Callback was already called錯誤

Vue-cli3.0在打包的時候會自動將js和css分開打包，把所有的css樣式打包成一個個css文件。如果打包的時候遇到錯誤：Callback was already called，vue.config.js文件中配置css: {extract: false}}。該配置指定css是否使用分離插件ExtractTextPlugin（默認為true），將extract改成false則會將樣式強制內聯不生成單獨的css文件。

Nginx測試

我們可以在Windows上用Nginx先測試下是否能正常的訪問，在Windows使用Nginx可以參考文章【Nginx實戰001：Window中配置使用Nginx入門】。將打包好的項目拷貝到nginx的html目錄中，啟動nginx并在瀏覽器地址欄輸入網址 http://localhost:80訪問項目。

Nginx服務部署

在本地測試沒問題我們既可以開始部署了，先在服務器上安裝nginx。Centos安裝Nginx跟Ubuntu安裝基本一樣，這里就不再重復了，有需要可以參考文章【Linux實戰008：Ubuntu搭建Nginx服務器詳細圖解】。我們把打包好的文件上傳到nginx的html目錄中（該目錄一般在/usr/share/nginx/html），利用finalshell等工具可以快速將文件上傳到服務器指定目錄。

修改Nginx配置

docker的nginx基礎配置文件一般存放在/etc/nginx文件夾下的nginx.conf文件中，默認的配置default.conf也存放在這里。我們的服務器配置就放在default.conf中，用戶可以根據自己的項目需求來配置nginx。通過vim修改好之后執行命令:wq保存退出，再執行命令：sudo ./nginx -s reload重啟下nginx即可（docker可以重啟容器）。

總結：

Nginx默認配置的監聽端口為80，如果當前端口已經被占用的話就可以在這里進行修改。具體的配置按照自己的項目需求進行修改，一般我們都在server中進行配置（一個server代表一個服務站點，可以配置多個server節點搭建多個站點）。以上內容是小編給大家分享的【Vue實戰091：Vue項目部署到nginx服務器】。希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。更多Vue實戰技巧可以參考以下專欄：

為了方便學習，下面附上本文用到的源碼：

RL重寫

在前后端分離的開發模式中，會遇到這樣一個需求：前端通過特定路由前綴來訪問后端接口，例如：http://localhost/api/getUser，這里 api 即是每一個前端 request 所多加的前綴。nginx 需要把http://localhost/api/getUser 轉換成后端的訪問端口及路由，例如：http://localhost:8080/getUser，從而訪問服務。

這里就涉及到一個URL重寫的的概念，可以使用多種方式來實現，那么這里由于前端程序時通過 webpack 打包后，將靜態文件發布在 nginx 上，所以我們需要通過 nginx 的 rewirte 指令來進行 URL 的重寫。

location匹配規則

在使用 rewirte 指令前，我們需要先熟悉 location 匹配規則。

這里只涉及一般會用到的語法：

1. = 開頭精準匹配，停止搜索并立即處理請求

例：
	location = /login {  
	   #規則A  
	}  
	location / {  
	   #規則B 
	}  
	http://localhost/login 將匹配規則A
	http://localhost/register 則匹配規則B

2. ~ 區分大小寫匹配(可用正則表達式)

3. ~* 不區分大小寫匹配(可用正則表達式)

	location ~ \.(gif|jpg|png|js|css)$ {  
	   #規則D  
	}  
	location ~* \.png$ {  
	   #規則E  
	} 
	http://localhost/a.PNG 則匹配規則E，
	不會匹配規則D，因為規則E不區分大小寫

4. !~ 區分大小寫不匹配

5. !~* 不區分大小寫不匹配

6. ^~ 如果路徑中匹配，那么不測試正則表達式

rewrite 使用規則

1. nginx-rewirte 使用語法：

rewrite regex replacement [flag];

2. 參數介紹

regex ：可以使用正則或者字符串來表示相匹配的地址。
replacement：可以表示重定向的地址。
flag：指令集，匹配后續動作。取值
last、break：目前看來，作用類似，都是重寫后停止處理**重寫**其他指令。
redirect：如果替換字符串不以“ http://”，“ https://”或“ $scheme” 開頭，返回帶有302代碼的臨時重定向，瀏覽器地址會顯示跳轉后的URL地址。
permanent：返回301代碼的永久重定向，瀏覽器地址欄會顯示跳轉后的URL地址。

3. 使用示例

例如，現在將 http://localhost/api/getUser 請求轉發到 http://localhost:8080/getUser，配置如下：

        location ^~ /api/ {
                rewrite  ^/api/(.*)$ /$1 break;
                proxy_pass http://localhost:8080;
        }

location 匹配：路由中匹配到 /api/ 即執行規則。

正則：以 /api/ 開始，子表達式匹配任意多單字符，結束。

tips

1. react（umi）頁面刷新404，配置

try_files  $uri $uri/ /index.html;

參考文獻

https://www.cnblogs.com/dalaoyang/p/10264919.html

在線咨詢

上一篇：div + css 實現登錄界面
下一篇：HTML從入門到精通-基礎篇

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商