部署YesPlayMusic

由于YesPlayMusic(一个第三方的网易云音乐)官方写的 Vercel 部署教程有些地方表述的不是很清楚,而且似乎网上关于通过Vercel 部署 YesPlayMusic 的文章少之又少,同时也写的很马虎。所以在这里重写一下教程

YesPlayMusic 的原理可以概括为:

  1. 通过前端的 YesPlayMusic 发送请求
  2. 请求传送到 NeteaseCloudMusicApi 进行伪造
  3. 最后 NeteaseCloudMusicApi 再转给网易云音乐官方的 API

Demo:https://music.jeam.cc/

前言

官方给出的是部署到 Vercel ,而这里的教程是部署到 CloudflarePages 上的,虽然部署的地方不一样,但是逻辑是相同的。如果担心搞不懂就跟着教程来吧,本人也是推荐在有天然优势的 CloudflarePages 上部署而不是 Vercel。

部署 NeteaseCloudMusicApi

官方已给出比较详细的教程了,这里就不再多赘述(注意:部署期间给 Vercel 项目命名的时候不能有大小写,不然会报错)

当你部署完了打开箭头指到链接(这个链接就是你的 API,下面要用,而且推荐不要泄露)

出现了以下界面表示成功了

部署 YesPlayMusic

GitHub 上的操作

先 fork 官方的仓库 YesPlayMusic 到你的 GitHub 账号(这里不推荐直接 fork ,推荐下载官方仓库再上传到自己的私有仓库)

然后在自己的仓库创建一个叫 package.json 的文件,文件内容是:

1
2
3
4
5
6
7
8
{
"rewrites": [
{
"source": "/api/:match*",
"destination": "https://your-netease-api.example.com/:match*"
}
]
}

将里面的 https://your-netease-api.example.com 改成你的 API ,然后拉到最下面,点击绿色按钮就行了

Cloudflare 上的操作

登录你的 Cloudflare 账号,在左侧栏找到 Pages ,链接你的 GitHub 账号,选择刚才 fork 的项目点击绿色按钮即可

回到了 Cloudflare 后选择你刚才授权的仓库,点击右下角的开始设置

框架预设 选择 Vue

环境变量的名称填 VUE_APP_NETEASE_API_URL

值填你的 API

然后点击保存并部署即可

完成!

作者

Jeam

发布于

2022-11-01

更新于

2022-11-10

许可协议

评论