1. 研究背景

在做ASR数据集采集的时候面临着一个突出的问题，音频和文本标签对不上。出现这种问题，大概率是录音的时候命名和标注出现偏移，并且使用录音软件录制后，还需要重命名音频文件，这些问题都使得采集数据过程变得缓慢。为此特地开发一个ASR数据采集系统。该系统不单解决了上述问题，还可以部署在云服务器中使得在各地的人都可以一起参与数据集采集，突破了时空地理位置限制，同时每个人又可以清晰看到他人录制的音频，可以做到相互监督相互检查，进一步提高数据采集的精准度。

2. 技术架构

ASR数据集采集系统是前后端分离项目，其中后端是使用SpringBoot开发，依赖JDK21，前端使用Vue开发，依赖node。同时还使用到nginx作为web服务器和做反向代理。数据记录存储在MySQL数据库中，并且可以导出excel表格。

下面是nginx的核心配置：(vim /etc/nginx/nginx.conf)

server {
            listen 80;
            server_name localhost;
            return 301 https://$host$request_uri;
        }

        server {
            listen 443 ssl;
            server_name localhost;

            ssl_certificate /usr/local/src/asr/ssl/server.crt;
            ssl_certificate_key /usr/local/src/asr/ssl/server.key;
            
            # ASR数据集采集系统前端页面
            location / {
                root /usr/local/src/asr/AutoLabelASR/dist;
                index index.html;
            }
			
			# ASR数据集采集系统后端接口
            location /api/audio/ {
                proxy_pass http://localhost:8080;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
            }
            
            # 播放音频
            location /audio/ {
                proxy_pass http://localhost:8080;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
            }
         }

这里说明一下，必须要先在前端路径中执行npm run build来构建生成html等静态文件，然后就配置到nginx配置文件中，最终前端是通过nginx来访问的，而不是通过node。如果是使用npm run dev来启动，那么只能在这台机器中可以访问，如果想让其它人都可以访问，可以添加参数，例如写为这种npm run dev – --host，但是也存在问题，即使我使用nohup挂载到后台去运行，当我断开ssh连接的时候，会导致npm进程退出。所以这只适合调试，不是生产环境使用方式。必须要使用npm run build来构建为静态文件，通过nginx来访问。

3. 运行效果

4. 部署过程

4.1 安装JDK并配置环境变量

下载JDK 21

https://www.oracle.com/cn/java/technologies/downloads/

访问上面的网址，根据自己的CPU架构选择不同的版本。

这里直接在linux服务器中使用wget命令下载。

cd /usr/local
wget https://download.oracle.com/java/21/latest/jdk-21_linux-x64_bin.tar.gz

下载后解压

tar -zxvf jdk-21_linux-x64_bin.tar.gz

mv jdk-21.0.10 jdk

配置系统环境变量

vim /etc/profile
# 在末尾添加下面内容
export JAVA_HOME=/usr/local/jdk
export PATH=$PATH:$JAVA_HOME/bin
# 最后记得执行
source /etc/profile

4.2 安装MySQL并创建数据库

安装MySQL数据库，这里使用最简单的方式安装apt方式。

apt-get install mysql-server

设置开机自启动

systemctl start mysql
systemctl enable mysql

修改MySQL中的root登录密码

# 先查看
sudo cat /etc/mysql/debian.cnf
# 可以看到下面账号和密码
user     = debian-sys-maint
password = nvqrZwiElBU3lGAC
# 以 debian-sys-maint 账号登录 MySQL
mysql -u debian-sys-maint -p
# 修改 MySQL 的 root 账号密码
USE mysql;
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '你的新密码';
FLUSH PRIVILEGES;

创建数据库asr_datasets

create database asr_datasets character set utf8mb4 collate utf8mb4_general_ci;

4.3 安装node并生成项目的静态文件

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash
\. "$HOME/.nvm/nvm.sh"
nvm install 24
npm -v
node -v

最新版本可以访问下面的地址

https://nodejs.org/en/download

安装完成之后，生成前端页面的静态文件，会生成一个dist目录，里面保存了项目的静态文件，下面一步骤要用到这个路径，需要配置到nginx.conf中。

npm run build

如果访问 github 失败，可以使用下面方式安装

vim ~/.bashrc

export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node/

curl -o- https://gitee.com/RubyMetric/nvm-cn/raw/main/install.sh | bash
chmod +x ~/.nvm/nvm.sh
source ~/.bashrc
nvm install 24

执行 npm run build 的时候报下面错误的解决方法。

> autolabelasr@0.0.0 build
> vite build

/usr/local/src/asr/AutoLabelASR/node_modules/rollup/dist/native.js:115
                throw new Error(
                      ^

Error: Cannot find module @rollup/rollup-linux-x64-gnu. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory.
    at requireWithFriendlyError (/usr/local/src/asr/AutoLabelASR/node_modules/rollup/dist/native.js:115:9)
    at Object.<anonymous> (/usr/local/src/asr/AutoLabelASR/node_modules/rollup/dist/native.js:124:76)
    at Module._compile (node:internal/modules/cjs/loader:1812:14)
    at Object..js (node:internal/modules/cjs/loader:1943:10)
    at Module.load (node:internal/modules/cjs/loader:1533:32)
    at Module._load (node:internal/modules/cjs/loader:1335:12)
    at wrapModuleLoad (node:internal/modules/cjs/loader:255:19)
    at loadCJSModuleWithModuleLoad (node:internal/modules/esm/translators:328:3)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:233:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:430:25) {
  [cause]: Error: Cannot find module '@rollup/rollup-linux-x64-gnu'
  Require stack:
  - /usr/local/src/asr/AutoLabelASR/node_modules/rollup/dist/native.js
      at Module._resolveFilename (node:internal/modules/cjs/loader:1456:15)
      at defaultResolveImpl (node:internal/modules/cjs/loader:1066:19)
      at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1071:22)
      at Module._load (node:internal/modules/cjs/loader:1242:25)
      at wrapModuleLoad (node:internal/modules/cjs/loader:255:19)
      at Module.require (node:internal/modules/cjs/loader:1556:12)
      at require (node:internal/modules/helpers:152:16)
      at requireWithFriendlyError (/usr/local/src/asr/AutoLabelASR/node_modules/rollup/dist/native.js:97:10)
      at Object.<anonymous> (/usr/local/src/asr/AutoLabelASR/node_modules/rollup/dist/native.js:124:76)
      at Module._compile (node:internal/modules/cjs/loader:1812:14) {
    code: 'MODULE_NOT_FOUND',
    requireStack: [
      '/usr/local/src/asr/AutoLabelASR/node_modules/rollup/dist/native.js'
    ]
  }
}

Node.js v24.14.0

解决方法

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

4.4 安装nginx并修改配置

apt-get install nginx

设置为开机自启动

systemctl enable nginx

修改nginx.conf配置

server {
            listen 80;
            server_name localhost;
            return 301 https://$host$request_uri;
        }

        server {
            listen 443 ssl;
            server_name localhost;

            ssl_certificate /usr/local/src/asr/ssl/server.crt;
            ssl_certificate_key /usr/local/src/asr/ssl/server.key;
            
            # ASR数据集采集系统前端页面
            location / {
                root /usr/local/src/asr/AutoLabelASR/dist;
                index index.html;
            }
			
			# ASR数据集采集系统后端接口
            location /api/audio/ {
                proxy_pass http://localhost:8080;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
            }
            
            # 播放音频
            location /audio/ {
                proxy_pass http://localhost:8080;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
            }
         }

修改配置后要记得执行下面命令

systemctl reload nginx

4.5 启动后端接口

经过上一步，已经启动了前端页面，现在需要启动后端接口，后端已经打包为jar包，可以使用下面命令启动。

nohup java -jar auto_label.jar > log.txt 2>&1 &

到此，整个部署过程就完成了，可以在浏览器中访问公网ip地址，并且一定要记得使用https协议访问，然后要同意使用麦克风权限。

5. 其它

项目下载地址：
通过网盘分享的文件：ASR数据集采集系统
链接: https://pan.baidu.com/s/18IGnt6pzw2MBNIMyUIDPLg?pwd=9jaw 提取码: 9jaw
这个系统支持部署在Windows，MacOS和Linux系统中，这篇文章记录的是在Ubuntu22.04中部署，你也可以在其它系统部署，如果不想看文章，可以看我发布到B站的部署详细视频，可以点击这里访问视频。
如果完全不懂电脑的小白，需要部署也可以微信联系lukeewin01进行有偿远程部署。注意添加的时候，一定要说明来自哪个平台，为啥添加，否则一律不通过。

Q.E.D.