015_Vue音乐播放器（将项目打包，传到服务器，线上预览，完结撒花）

终于做完了，前前后后历时一个半月，终于撸出一个能用的音乐播放器了，感谢酷狗播放源API  酷狗API参考​​​​​​

我已经把代码放到了我的GitHub仓库上，欢迎讨论，喜欢的给个start *******

GitHub 地址：https://github.com/CWH0908/VueMusicPlayer

线上预览地址：http://49.235.92.173:70/

 

做好的项目需要把它丢到服务器，那么首先需要打包和租一个服务器

关于项目打包

首先要修改config目录的index.js文件的打包路径，从 “/” 改为 “./” 即可

直接使用 npm run build 即可，不过时不时会出现小bug影响我们打包，比如这次我打包就遇到了这个问题

意思大概就是我的semver 模块版本太低了，版本检查时不通过 。=_=模块依赖的版本问题一直是模块化的痛点，网上搜的解决方式，就是忽略版本检查（亲测有效），在node_modules/semver.js内，忽略版本检查

//找到下面这句话，把里面的函数体替换即可

// if ANY of the sets match ALL of its comparators, then pass
Range.prototype.test = function(version) {
// ignore the version of this file
return true;
// ignore the version of this file
if (!version)
return false;

if (typeof version === 'string')
version = new SemVer(version, this.options);

for (var i = 0; i < this.set.length; i++) {
if (testSet(this.set[i], version, this.options))
return true;
}
return false;
};

由于我本着多种解决方式的想法，尝试给它升级版本，结果发现升级失败，导致整个node_modules模块包都得重新安装了（=_=这种精神是好的）。

租用服务器

这里我用的是腾讯云的服务器，99元/年

腾讯云官网

 

有了服务器以后我们需要安装的模块有两个，Nginx模块和node模块

 Nginx模块

 参考文章：CentOS7.5下安装nginx --项目部署

 

1、安装ngnix一些依赖包

yum -y install gcc gcc-c++ openssl-devel pcre-devel httpd-tools


2、下载nginx-1.16.0

wget http://nginx.org/download/nginx-1.16.0.tar.gz


3、解压二进制包

tar -zxf nginx-1.16.0.tar.gz


4、执行配置文件，指定需要的模块

useradd nginx

./configure --prefix=/usr/local/nginx --user=nginx --group=nginx --with-http_ssl_module --with-http_mp4_module --with-http_flv_module


5、执行编译和安装

make && make install


6、建立软链接

ln -s /usr/local/nginx/sbin/nginx /usr/sbin


7、启动nginx

nginx


8、查看nginx占用的端口

netstat -anptu | grep nginx

 注意，此处安装SSL模块才能反向代理https

 安装好 Nginx后，需要配置出站进站规则

 

 然后访问自己的外网网址+端口号即可访问nginx下的默认index.html文件（先看下方 安装winSCP软件来操作nginx.conf文件）

现在插播两个好用的桌面应用

操作远程linux系统的指令行工具：SSH Secure shell

安装后使用这个：

在此处执行linux命令即可

ls  //该文件夹下目录

pwd  //当前文件夹路径

usr/local  //一般装软件的地址

chmod 777 文件名  //给文件夹最高权限

mv 旧文件夹地址  新文件夹地址  //移动文件

cp //复制内容

rm 文件名 //删除该文件

rm -rf 文件夹名 //删除此文件夹

mkdir 文件夹名 //新建文件夹

touch 文件名  //新建文件 如first.html

vi 文件名  //读写文件 first.html

vi下按 i  //insert，进行内容的写入

ESC后 :wq  //退出vi并保存编辑的内容

ESC后 :q!  //退出vi，不保存编辑后的内容

cat 文件名  //只读文件内容

cd /usr/local/nginx/sbin  //我的nginx目录

./nginx  //启动nginx

./nginx -s reload  //获取最新的nginx配置文件

netstat -tunlp  //查看端口占用

启动nginx的地方（误用exit退出了），在root目录时，使用 cd /usr.local

进入nginx目录的sbin

 使用  ./nginx 即可启动nginx

 

 

如果对Linux命令不太熟悉的同学，可以直接使用下面的软件来进行文件的操作

 

将本地文件通过拖拽方式直接上传到服务器的软件 ：winSCP下载地址 

 

 腾讯云服务器linux系统的目录

nginx 配置


 

Node环境

在root目录下安装        centos7安装node环境 

下载node环境压缩包
wget https://nodejs.org/dist/v8.9.4/node-v8.9.4-linux-x64.tar.xz

解压
xz -d node-v8.9.4-linux-x64.tar.xz
tar -xvf  node-v8.9.4-linux-x64.tar

进入目录
cd node-v0.10.26-linux-x64/bin
 
查看node版本
./node -v     

软连接
ln -s /root/node-v8.9.4-linux-x64/bin/node /usr/local/bin/node
ln -s /root/node-v8.9.4-linux-x64/bin/npm /usr/local/bin/npm

连接成功后  ./node -v 可以查看node版本   ./npm -v 可以查看npm版本

 

 node环境安装好了以后，将打包后的文件丢到这个目录，即之前配置的Nginx的默认访问目录

由于我多了一层文件夹，所以要在Nginx的默认打开目录下修改路径

  

 这时候Nginx可以反向代理静态资源，我们项目中使用proxyTable代理的请求都可以通过配置Nginx反向代理完成请求，使用Nginx代理的请求，需要吧请求url的前缀加上Nginx的代理端口，示例如下

现在还剩下另一种请求，那就是我们写在webpack.dev.conf.js的webpack微服务请求的API需要抽离成一个单独的js文件，然后上传到服务器上，启动我们的node来打开这个服务。我们上传时可以只上传package.json和js文件，然后在CWH_server目录下使用npm install 命令安装依赖即可。

 

启动 node server.js  报错了，原来是我之前起的服务没关，导致端口被占用。

 

kill掉占用8081端口的10542 进程，即可启动node服务

  

 server.js文件（从webpack.dev.conf.js文件中服务代理请求部分抽离出来）

const Express = require('express')
const app = new Express()
const apiRoutes = Express.Router()
const axios = require('axios')

//解决跨域
app.all('*', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    if (req.method == 'OPTIONS') {
      res.send(200);
    } else {
      next();
    }
  });

apiRoutes.get('/QQMusicAPI/songList', function (req, res) {
    var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
    axios.get(url, {
      headers: {
        referer: 'https://c.y.qq.com/',
        host: 'c.y.qq.com'
      },
      params: req.query
    }).then((respond) => {
      // 将数据返回给前端
      res.json(respond.data)
    }).catch((e) => {
      console.log(e)
    })
  })

  //歌手列表
  apiRoutes.get('/QQMusicAPI/singerList', function (req, res) {
    var url = 'https://c.y.qq.com/v8/fcg-bin/v8.fcg'
    axios.get(url, {
      params: req.query
    }).then((respond) => {
      // 将数据返回给前端
      res.json(respond.data)
    }).catch((e) => {
      // console.log(e) ;//304报错，屏蔽
    })
  })

  // 歌曲列表
  apiRoutes.get('/QQMusicAPI/singerDetail', function (req, res) {
    var url = 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_singer_track_cp.fcg'
    axios.get(url, {
      params: req.query
    }).then((respond) => {
      // 将数据返回给前端
      res.json(respond.data)
    }).catch((e) => {
      console.log(e)
    })
  })

  //请求歌曲
  apiRoutes.get('/QQMusicAPI/getSongVkey', function (req, res) {
    var url = 'https://c.y.qq.com/base/fcgi-bin/fcg_music_express_mobile3.fcg'
    axios.get(url, {
      headers: {
        origin: 'https://y.qq.com/',
        referer: 'https://y.qq.com/portal/player.html'
      },
      params: req.query
    }).then((respond) => {
      // 将数据返回给前端
      res.json(respond.data)
    }).catch((e) => {
      console.log(e)
    })
  })

  //酷狗音乐请求歌曲详情
  apiRoutes.get('/kugouMusicAPI/getSongInfo', function (req, res) {
    var url = 'http://www.kugou.com/yy/index.php?r=play/getdata'
    axios.get(url, {
      headers: {
        Cookie: "kg_mid=bbbd01eb4d89517f78a82335ab0aec58; kg_dfid=2B054t0bTXp10XkJEz1QDSOQ; kg_dfid_collect=d41d8cd98f00b204e9800998ecf8427e; Hm_lvt_aedee6983d4cfc62f509129360d6bb3d=1572510353,1572868917,1572868957,1572869876"
      },
      params: req.query
    }).then((respond) => {
      // 将数据返回给前端
      res.json(respond.data)
    }).catch((e) => {
      console.log(e)
    })
  })

  //请求B站轮播图
  apiRoutes.get('/BAPI/getBSlider', function (req, res) {
    var url = 'https://api.bilibili.com/x/web-show/res/loc?pf=7&id=1695'
    axios.get(url, {
      params: req.query
    }).then((respond) => {
      // 将数据返回给前端
      res.json(respond.data)
    }).catch((e) => {
      console.log(e)
    })
  })

  app.use('/',apiRoutes)
  app.listen('8081',function(){
    console.log('open in 8081')
  })

然后将项目中所有使用dev-server代理的请求前的url前缀加上地址和node端口即可

将项目重新打包然后上传到服务器，访问自己的外网网址+nginx默认端口即可访问自己的项目啦~

注意：想让自己的node服务一直保持连接，需要使用nohub命令（包括两个&），然后输入exit结束会话，完成node服务的后台运行

nohup command & node server.js &

参考地址：https://blog.csdn.net/mochong/article/details/67636553