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