前言

最近逛论坛，看到一篇文章一台国内的1h1g1m小鸡可以做些什么？来看看我的吧（多图），其中有个项目吸引了我，网易云api及在线音乐播放器。顺腾摸瓜看教程。

可惜，文档比较少，前端知识也不够，折腾了我许久。别说前端技术目前来说也是相当强大的，长见识了。

必须要有国内服务器，不然UnblockNeteaseMusic没法用的，其他音乐平台都屏蔽了国外IP。

安装

一个个来，不然乱套了。

• NeteaseCloudMusicApi

  1. 安装nodejs 这个比较简单，上命令：

     apt update && apt install -y git curl
     curl -sL https://deb.nodesource.com/setup_lts.x | bash -
     apt-get install -y nodejs

  2. 克隆NeteaseCloudMusicApi项目：

     git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
     cd NeteaseCloudMusicApi
     npm install

  3. 配置Nginx： 我使用的是Nginx反向代理：

     server {
      listen 80;
      server_name xxx.xxx.com; ### 记得替换
      rewrite ^(.*) https://$server_name$1 permanent;
     }
     #跨域配置
     map $http_origin $allow_origin {
      default "";
      "~^(https?://[\w]+.domain.com)" $1; ##你的域名,记得替换，*.domain.com，这里可以添加多行域名
     }
     server {
      listen 443 http2 ssl;
      ssl_certificate /xxx/xxx.cer; #证书 记得替换
      ssl_certificate_key /xxx/xxx.key; #私钥 记得替换
      ssl_prefer_server_ciphers on;
      ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA'; #屏蔽不安全的加密方式
      server_name xxx.xxx.com; #域名， 记得替换成自己的
      charset utf-8;
      location / {
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header REMOTE-HOST $remote_addr;
          proxy_hide_header Access-Control-Allow-Origin;
          proxy_hide_header Access-Control-Allow-Credentials;
          proxy_hide_header Access-Control-Allow-Methods;
          proxy_hide_header Access-Control-Allow-Headers;
          proxy_pass http://0.0.0.0:3000; ###API端口，修改了下面supervisorctl配置也要同步修改
          # 跨域配置
          add_header Access-Control-Allow-Origin $allow_origin always;
          add_header 'Access-Control-Allow-Credentials' 'true' always;
          add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,DELETE,PATCH' always;
          add_header 'Access-Control-Allow-Headers' 'Token,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,X_Requested_With,If-Modified-Since,Cache-Control,Content-Type' always;
      }
      location = /favicon.ico { access_log off; log_not_found off; }
      location = /robots.txt  { access_log off; log_not_found off; }
      access_log off; #浏览日志，关了， 要开自己填写路径
      error_log  /var/log/nginx/xxx.xxx.xxx-error.log error; #错误日志路径
      sendfile off;
      location ~ /\.ht {
          deny all;
      }
     }

  4. 需要添加一处代码，忽略ssl错误(大概122行左右，其实无所谓，因为是环境变量，但是要加在请求执行之前)：

     nano NeteaseCloudMusicApi/util/request.js
     ...
     const settings = {
        method: method,
        url: url,
        headers: headers,
        data: queryString.stringify(data),
        httpAgent: new http.Agent({ keepAlive: true }),
        httpsAgent: new https.Agent({ keepAlive: true }),
      }
     //添加下面这一行代码
     process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = '0';

  5. 配置supervisorctl守护进程： 安装：

     apt update && apt install -y supervisor

     写配置

     nano /etc/supervisor/conf.d/music-api.conf

     端口3000，如果端口改了记得nginx配置文件也要改

     [program:music-api]
     command=/bin/bash -c 'PORT=3000 HOST=127.0.0.1 /usr/bin/node /var/www/NeteaseCloudMusicApi/app.js'
     autostart=true
     autorestart=true
     user=root
     numprocs=1

     更新配置文件，启动

     sudo supervisorctl reread
     sudo supervisorctl update
     sudo supervisorctl start music-api:*

     搞定,看看状态：

     $ supervisorctl status music-api:*
     music-api                        RUNNING   pid 3312, uptime 0:57:01

  6. 如果不想用Nginx，那就记得服务器开放3000端口（或者你自己配置的端口, 还是建议使用Nginx）。

• YesPlayMusic

  以下步骤可以到本地操作，之后把编译的文件传到服务器就好了，当然服务器上操作也没问题。

  1. 安装yarn:

     curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
     echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
     apt-get update && apt-get install -y yarn

  2. 安装YesPlayMusic：

     git clone https://github.com/qier222/YesPlayMusic.git
     cd YesPlayMusic
     yarn install
     cp .env.example .env

  3. 编辑.env环境变量： 用了Nginx填写域名，没有使用Nginx的填写http://服务器外网IP:3000(改了端口记得改)

     nano .env
     ...
     VUE_APP_NETEASE_API_URL=https://xxx.xxx.com
     VUE_APP_ELECTRON_API_URL=/api
     VUE_APP_ELECTRON_API_URL_DEV=https://xxx.xxx.com
     VUE_APP_ENABLE_SENTRY=false
     DEV_SERVER_PORT=20201

     vue.config.js文件可以修改网页标题版权信息。 src/mian.js可以修改google analytics追踪代码ID。 src/store/actions.js 44行 document.title = ${track.name} · ${track.ar[0].name} - YesPlayMusic;这里YesPlayMusic是播放音乐的时候标题尾。

  4. 修改代码，为了后面使用UnblockNeteaseMusic： 文件路径 YesPlayMusic/src/store/actions.js。

     ...
     // import { updateHttps } from "@/utils/common";  //注释掉
     ...
        function getMP3(id) {
          return getMP3Api(id).then((data) => {
            // 未知情况下会没有返回数据导致报错，增加防范逻辑
            if (data.data[0]) {
              // const url = updateHttps(data.data[0].url); //注释掉
              const url = data.data[0].url; //添加一行
              commitMP3(url);
              return url;
            }
          });
        }
     ...
          } else {
        if (unblockSongUrl) {
          commitMP3(unblockSongUrl);
        } else {
          getMP3(track.id);
        }
      }
     } else {
      unblockSongUrl = getMP3(track.id);  //添加一行  大改116行左右
      commitMP3(
        unblockSongUrl ||
          `https://music.163.com/song/media/outer/url?id=${track.id}`
      );
     }
     });
     },

  5. 编译:

     yarn run build

  6. 配置Nginx: 此处需要新的域名，不能用NeteaseCloudMusicApi的域名

     server {
      listen 80;
      server_name xxx.xxx.com; ### 记得替换
      rewrite ^(.*) https://$server_name$1 permanent; ### 强制重定向到https
     }
     server {
      listen 443 http2 ssl;
      ssl_certificate /root/xxx.cer; ### 域名证书
      ssl_certificate_key /root/xxx.key; ### 域名证书私钥
      ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA'; #屏蔽不安全的加密方式
      ssl_prefer_server_ciphers on;
     
      server_name xxx.xxx.com;
      root "/var/www/YesPlayMusic/dist"; #### 如果服务器上编译那就是这个目录，本地编译上传dist目录到服务器，然后填写dist目录地址
      index index.html index.htm index.php;
      charset utf-8;
      location / {
          try_files $uri $uri/ =404;
      }
      location = /favicon.ico { access_log off; log_not_found off; }
      location = /robots.txt  { access_log off; log_not_found off; }
      access_log off;
      error_log  /var/log/nginx/xxx.xxx.com-error.log error;
      sendfile off;
      location ~ /\.ht {
          deny all;
      }
     }

     7.Tips 其实这样就已经弄好了，只是我在折腾的时候发现了一个更又意思的东西，发现前端技术现在真心酷。 我是在windows上操作的，要先在windows安装Nodejs，yarn,这部分就直接去NodeJS、yarn官网下载吧！ 我被electronjs坑惨了，根本不知道electronjs是跨平台桌面平台（相信很多前端都没有接触过这东西），使用electronjs可以编译出windows（MacOS, Linux）客户端，如果这样操作可以省去折腾UnblockNeteaseMusic，因为YesPlayMusic已经集成了。 起初只是看到YesPlayMusic有人提交PR，说是集成了UnblockNeteaseMusic，我就去看源码，发现 .env 中添加一个环境变量 IS_ELECTRON=true 就会开启UnblockNeteaseMusic，操作一番发现依赖electronjs通讯，window.require not a function 这错误让我在网上找了好久，其实是electronjs依赖nodejs，就算解决了 window.require not a function 问题，还是会接着来新问题。 后面发现electronjs不可能编译后通过浏览器使用的，这过程折腾了我一个晚上。 以下操作都是在本地windows系统操作的，可以按上文2-3部操作,NodeJS、yarn官网下载 开搞吧，先到.env中添加IS_ELECTRON=true。

     1. 安装electronjs

        npm install -g electron

     2. 编译：

        "scripts": {
         "serve": "vue-cli-service serve",
         "build": "vue-cli-service build",
         "lint": "vue-cli-service lint",
         "electron:build": "vue-cli-service electron:build -mwl -p never", //编译macos, windows, linux三个平台
         "electron:build-mac": "vue-cli-service electron:build -m -p never", //编译MacOS
         "electron:build-win": "vue-cli-service electron:build -w -p never", //编译windows
         "electron:build-linux": "vue-cli-service electron:build -l -p never", //编译linux
         "electron:serve": "vue-cli-service electron:serve", //运行服务，没什么用折腾我好久
         "electron:buildicon": "electron-icon-builder --input=./build/icons/icon.png --output=build --flatten",
         "electron:publish": "vue-cli-service electron:build -mwl -p always",
         "postinstall": "electron-builder install-app-deps",
         "postuninstall": "electron-builder install-app-deps",
         "prettier": "npx prettier --write ./src ./script",
         "netease_api:run": "cd ./netease_api && npm run start",
         "netease_api:pull": "node script/pull.js",
         "netease_api:install": "cd ./netease_api && npm install",
         "netease_api:setup": "npm run netease_api:pull && npm run netease_api:install"
        },

        以上都是yarn run ...支持的命令，开始编译windows版本：

        yarn run electron:build-win

        编译完了在YesPlayMusic\dist_electron目录下，进入目录，你会看到YesPlayMusic Steup.exe,这是安装程序，YesPlayMusic\dist_electron\win-unpacked里面有已解包程序YesPlayMusic.exe，点击就可以执行。 和网页版一样的效果，不得不说这界面做的真的好看。首页拉到底设置里面有深色模式。 点击右上角x并没有退出，最小化了，如果你再新开一个程序会提示你端口占用报错的。

• UnblockNeteaseMusic

  1. 安装UnblockNeteaseMusic 其实也说不上安装，目前有四种方法：

     1. npx @nondanee/unblockneteasemusic
     2. docker run nondanee/unblockneteasemusic
     3. docker-compose up

     4. git clone https://github.com/nondanee/UnblockNeteaseMusic.git
        cd UnblockNeteaseMusic
        // node app.js  //运行 不过暂时不用，下文配置supervisor守护进程

        自己选吧，都可以用,前三种要自己生成163.com域名证书。 目前我使用的是替换host全局代理方法，其他方法实在懒得折腾了，真心累。 作者说替换host方法必须要开启80（443）端口，其实也不用（80端口占了就docker也能搞定），nginx反代就好了。

  2. 配置nginx:

     server{
     listen 80;
     server_name music.163.com *.music.163.com; ##这里就别替换了
     location / {
          proxy_set_header Host $http_host;
          proxy_pass http://127.0.0.1:3001; ##UnblockNeteaseMusic绑定端口 80
     }
     }
     server
     {
      listen 443 ssl http2;
      server_name music.163.com *.music.163.com;
      ssl_certificate /var/www/UnblockNeteaseMusic/server.crt; ##不用换了
      ssl_certificate_key /var/www/UnblockNeteaseMusic/server.key; ##不用换了
      ssl_protocols  TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
      ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
      ssl_prefer_server_ciphers on;
      ssl_session_cache shared:SSL:10m;
      ssl_session_timeout 10m;
      location / {
          proxy_set_header Host $http_host;
          proxy_pass https://127.0.0.1:3002; ##UnblockNeteaseMusic绑定端口 443
      }
     }

  3. https反代歌曲URL域名： 此处需要新的域名，不能用NeteaseCloudMusicApi或YesPlayMusic的域名。

     server {
      listen 443;
      server_name xxx.xxx.com; # 改为你自己的域名
      ssl on;
      ssl_certificate /root/xxx.cer; ## 证书记得换
      ssl_certificate_key /root/xxx.xxx.key;
      ssl_session_timeout 5m;
      ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
      ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
      ssl_prefer_server_ciphers on;
     
      location / {
          proxy_pass http://localhost:3001; # 代理到 Unblock 服务地址
      }
     }

  4. 修改hosts文件, 末尾添加,把域名劫持到本机，NeteaseCloudMusicApi请求API就会通过nginx到UnblockNeteaseMusic，让UnblockNeteaseMusic通过其他音乐平台获取相关资源：

     nano /etc/hosts
     ...
     ...
     127.0.0.1 music.163.com
     127.0.0.1 interface.music.163.com
     127.0.0.1 music.126.net
     127.0.0.1 interface3.music.163.com

  5. 添加supervisor守护进程： xxx.xxx.xxx用你的服务器ping music.163.com,然后替换掉。这里不使用-f参数指定域名会死循环的，直接爆出http 502错误 -e https://xxx.xxx.com 这个参数是指定歌曲URL输出域名,刚刚第3部配置的域名，网易的域名不会替换，只有网易没版权通过其他音乐平台获取的歌曲URL的才会替换。如果不替换的话其他平台大多只支持http协议，你的网站如果是https，chrome会强制https访问站点下所有资源（外链也不放过），这时候https其他音乐平台又不支持，嗝屁了。所以只能通过这种方式用服务器反向代理了。

     nano /etc/supervisor/conf.d/music-unblock.conf

     [program:music-unblock]
     command=/usr/bin/node /var/www/UnblockNeteaseMusic/app.js  -p 3001:3002 -s -f xxx.xxx.xxx -a 127.0.0.1 -e https://xxx.xxx.com
     autostart=true
     autorestart=true
     user=root
     numprocs=1

  6. 更新配置文件，启动

     sudo supervisorctl reread
     sudo supervisorctl update
     sudo supervisorctl start music-unblock:*

     看状态：

     $ supervisorctl status music-unblock:*
     music-unblock                    RUNNING   pid 3373, uptime 2:39:00

  搞定，nginx -t看看有错误没有,没错误nginx -s reload,然后打开网站看看。

结语

虽然碰到很多问题，但是确实有意思，感兴趣才有动力去研究。大大小小的坑都趟过去了，还有意外发现electronjs。 看Demo可以访问我刚刚搭建好的站点Music OrzLee，可能有点卡，毕竟UnblockNeteaseMusic要绕回国。然后套了CF，就随便看看吧，主要还是自己搭建个国内站点最好了。