准备工作

如何在服务器上搭建在线音乐播放器 | hash070’s blog

搭建所用到的服务

后端音乐服务接口GitHub链接：


前端mmPlayer GitHub链接:

~~~

### 搭建后端服务

+ 后端服务克隆后执行安装

~~~bash
#我这边将这些文件放在了/www/wwwroot/文件夹下

#进入/www/wwwroot/文件夹
cd /www/wwwroot/

#克隆音乐后端服务项目到该文件夹(如果由于网络原因下载失败，也可以直接点击上面的链接去github下载压缩包并解压上传到服务器)
git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
#进入克隆下来目录
cd NeteaseCloudMusicApi/
#执行安装命令
npm install

#如果提示npm命令不存在，则您应当手动安装nodejs和npm
#安装命令(CentOS)：
yum install nodejs
yum install npm
#如果执行npm命令提示链接错误等信息，则您应当尝试卸载并重新安装nodejs和npm
#卸载命令(CentOS)
yum remove nodejs
yum remove npm
  • 在宝塔面板的软件商店中下载PM2管理器

PM2管理器

  • 进入PM2管理器小工具界面，填写信息
#启动文件填写
/www/wwwroot/NeteaseCloudMusicApi/app.js
#运行目录填写
/www/wwwroot/NeteaseCloudMusicApi
  • 填写完成后点击提交可以看到项目运行成功

运行成功

构建前端服务

  • 将前端项目使用git clone命令或者自行下载并上传到服务器上
#同样的,进入/www/wwwroot/文件夹
cd /www/wwwroot/
#克隆项目
git clone https://github.com/maomao1996/Vue-mmPlayer.git
  • 进入项目目录，安装依赖并打包
#进入项目目录
cd Vue-mmPlayer
#安装依赖
npm install
#编译打包
npm run build
  • 执行编译打包命令之后，在该项目目录中会出现一个dict文件夹，里面就是生成的网站了

img

  • 这些文件先放着，去创建一个网站

img