部署一个自己的高颜值网易云

博主：晚风
发布时间：2023 年 04 月 25 日
391 次浏览
1 条评论
4307字数
分类：网站/教程生活/日记

# 部署一个自己的高颜值网易云

> 用 vercel 搭建一个高颜值的第三方网易云播放器 YesPlayMusic
> 
> 不需要自备服务器，域名也可以搭建属于自己的网易云播放器！
> 
> 演示站点：[https://music.sl00.top/](https://music.sl00.top//)

## YesPlayMusic介绍：

一款高颜值的第三方网易云播放器，支持 Windows / macOS / Linux

- 使用 Vue.js 全家桶开发
- 网易云账号登录（扫码/手机/邮箱登录）
- 支持 MV 播放
- 支持歌词显示
- 支持私人 FM / 每日推荐歌曲
- 无任何社交功能
- 海外用户可直接播放（需要登录网易云账号）
- 支持 [UnblockNeteaseMusic](https://github.com/UnblockNeteaseMusic/server#音源清单)，自动使用[各类音源](https://github.com/UnblockNeteaseMusic/server#音源清单)替换变灰歌曲链接 （网页版不支持）
- 「各类音源」指默认启用的音源。
- YouTube 音源需自行安装 `yt-dlp`。
- 每日自动签到（手机端和电脑端同时签到）
- Light/Dark Mode 自动切换
- 支持 Touch Bar
- 支持 PWA，可在 Chrome/Edge 里点击地址栏右边的 ➕ 安装到电脑
- 支持 Last.fm Scrobble
- 支持音乐云盘
- 自定义快捷键和全局快捷键
- 支持 Mpris

![YesPlayMusic首页](http://img.wfy.pub/i/2023/04/24/64469f86a247e.png)

![YesPlayMusic个人音乐库](http://img.wfy.pub/i/2023/04/24/64469fbc75fe5.png)

![音乐播放页面](http://img.wfy.pub/i/2023/04/24/64469ff79a52f.png)

---

## 网易云 API介绍：

工作原理：跨站请求伪造 (CSRF), 伪造请求头 , 调用官方 API

功能特性：登录，刷新登录，发送验证码，校验验证码，注册(修改密码)，获取用户信息 , 歌单，收藏，mv, dj 数量，获取用户歌单，获取用户电台，获取用户关注列表，获取用户粉丝列表，获取用户动态，获取用户播放记录，获取精品歌单，获取歌单详情，搜索，搜索建议，获取歌词，等等等等～～～～

![image-20230425001323220](http://img.wfy.pub/i/2023/04/25/6446aaa3c253a.png)

## 准备：

在开始之前，你需要准备：

- 聪明的脑子
- 通畅的网络
- Github账号
- Vercel账号

准备完成后，接下来开始吧！

# 开始：

> YesPlayMusic官方网址：https://github.com/qier222/YesPlayMusic
> YesPlayMusic官方演示：[music.qier222.com](https://music.qier222.com/)
> 本人搭建的地址：https://yes-play-music-weld-three.vercel.app/

YesPlayMusic提供多种安装方式，本次我们使用Vercel部署（不需要服务器和域名），在部署YesPlayMusic之前，我们需要先部署网易云API来给YesPlayMusic提供服务

## 部署网易云 API：

> 官方仓库：https://github.com/Binaryify/NeteaseCloudMusicApi
> 官方文档：https://neteasecloudmusicapi.vercel.app/#/?id=%e7%bd%91%e6%98%93%e4%ba%91%e9%9f%b3%e4%b9%90-api

> 使用Vercel部署

### 1、fork仓库

进入https://github.com/Binaryify/NeteaseCloudMusicApi fork此项目，`Repository name`改不改都行，可以不勾选`Copy the master branch only`，点击`Create fork`开始复制项目

![fork网易云api项目](http://img.wfy.pub/i/2023/04/24/6446a5dfd4df2.png)

### 2、Vercel部署

Vercel网址：https://vercel.com/

![vercel首页](http://img.wfy.pub/i/2023/04/24/6446a4fabd075.png)

点击Login，选择Github登录后进入首页（如图所示）：

![创建新项目](http://img.wfy.pub/i/2023/04/24/6446a73cd7140.png)

点击`Add New`，选择`Project`，这里会展示你Github账号已有的项目，选择刚刚fork的网易云音乐API，点击`Import`（如图所示）：

![选择部署项目](http://img.wfy.pub/i/2023/04/25/6446a7ae75a0f.png)

`PROJECT NAME`可以不改,`FRAMEWORK PRESET` 选 `Other` 然后直接点 `Deploy` 接着等部署完成即可，稍等几分钟等他部署完成

![修改配置](http://img.wfy.pub/i/2023/04/25/6446a8f5b061b.png)

部署后进入仪表盘，如图2画框链接的就是部署网易云API的地址，复制下来备用：

![仪表盘图1](http://img.wfy.pub/i/2023/04/25/6446a988a56b2.png)

![仪表盘图2](http://img.wfy.pub/i/2023/04/25/6446a9c6b42ad.png)

---

到此，网易云api就部署完成了，接下来开始部署YesPlayMusic！

## 部署YesPlayMusic：

### 1、fork仓库

进入：https://github.com/qier222/YesPlayMusic fork此项目，`Repository name`改不改都行，可以不勾选`Copy the master branch only`，点击`Create fork`开始复制项目

![fork-yesplaymusic](http://img.wfy.pub/i/2023/04/25/6446abd481dd7.png)

### 2、新增josn文件

进入fork后的项目主页，点击仓库的 Add File，选择 Create new file，输入 `vercel.json`，将下面的内容复制粘贴到文件中，并将 `https://your-netease-api.example.com` 替换为你刚刚部署的网易云 API 地址，代码如下：

```
{
  "rewrites": [
    {
      "source": "/api/:match*",
      "destination": "https://your-netease-api.example.com/:match*"
    }
  ]
}
```

![新增文件](http://img.wfy.pub/i/2023/04/25/6446ac499fb7f.png)

![文件配置](http://img.wfy.pub/i/2023/04/25/6446acd3bea89.png)

### 3、Vercel部署

Vercel网址：https://vercel.com/，点击Login，选择Github登录后进入首页（如图所示）：

![vercel首页](http://img.wfy.pub/i/2023/04/24/6446a4fabd075.png)

点击`Add New`，选择`Project`，这里会展示你Github账号已有的项目，选择刚刚fork的YesPlayMusic，点击`Import`（如图所示）：

![创建新项目](http://img.wfy.pub/i/2023/04/24/6446a73cd7140.png)

![部署播放器](http://img.wfy.pub/i/2023/04/25/6446ae0331819.png)

填写 Name 为 `VUE_APP_NETEASE_API_URL`（第一个红框），Value 为 `/网易云api的链接`（第二个红框），点击 Add。最后点击底部的 Deploy 就可以部署到 Vercel 了。

![修改配置](http://img.wfy.pub/i/2023/04/25/6446ae53784e6.png)

稍等几分钟等部署完成，部署完成后进仪表盘，图2红框内的链接就是我们部署YesPlayMusic的链接

![image-20230425003249748](http://img.wfy.pub/i/2023/04/25/6446af3514fce.png)

![image-20230425003316102](http://img.wfy.pub/i/2023/04/25/6446af4c932b8.png)

---

## 写在最后

到此，本篇内容就已经结束了，通过Vercel你还可以部署更多奇奇怪怪好玩的服务，由于Vercel生成的链接可能不太方便记忆，后续可能会发布免费域名的相关内容！

最后修改：2023 年 05 月 23 日

如果觉得我的文章对你有用，请随意赞赏

1 条评论

Pampo
May 2nd, 2023 at 06:02 pm

这UI还挺好看的

回复

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

wu先生
技术文，不明觉历。
泽泽
应该叫迁移不是移植
鸟叔
这种复杂的事情我一般都会交给插件
空空裤兜
用过一段时间，也会偶尔出问题，自建的方案也会出问题，最后就随便吧。
Sirit
是不是只有MySQL支持emoji，sqlite数据库就不支持啊？

XDD- PLUS安装教程
浏览次数: 1160
将Typecho无缝迁移到WordPress
浏览次数: 337
新
浏览次数: 1603
新主题-handsome
浏览次数: 161
风铃发卡更新教程
浏览次数: 1291

部署一个自己的高颜值网易云

晚风 • 2023 年 04 月 25 日

# 部署一个自己的高颜值网易云

## YesPlayMusic介绍：

一款高颜值的第三方网易云播放器，支持 Windows / macOS / Linux

![YesPlayMusic首页](http://img.wfy.pub/i/2023/04/24/64469f86a247e.png)

![YesPlayMusic个人音乐库](http://img.wfy.pub/i/2023/04/24/64469fbc75fe5.png)

![音乐播放页面](http://img.wfy.pub/i/2023/04/24/64469ff79a52f.png)

---

## 网易云 API介绍：

工作原理：跨站请求伪造 (CSRF), 伪造请求头 , 调用官方 API

![image-20230425001323220](http://img.wfy.pub/i/2023/04/25/6446aaa3c253a.png)

## 准备：

在开始之前，你需要准备：

- 聪明的脑子
- 通畅的网络
- Github账号
- Vercel账号

准备完成后，接下来开始吧！

# 开始：

YesPlayMusic提供多种安装方式，本次我们使用Vercel部署（不需要服务器和域名），在部署YesPlayMusic之前，我们需要先部署网易云API来给YesPlayMusic提供服务

## 部署网易云 API：

> 官方仓库：https://github.com/Binaryify/NeteaseCloudMusicApi
> 官方文档：https://neteasecloudmusicapi.vercel.app/#/?id=%e7%bd%91%e6%98%93%e4%ba%91%e9%9f%b3%e4%b9%90-api

> 使用Vercel部署

### 1、fork仓库

进入https://github.com/Binaryify/NeteaseCloudMusicApi fork此项目，`Repository name`改不改都行，可以不勾选`Copy the master branch only`，点击`Create fork`开始复制项目

![fork网易云api项目](http://img.wfy.pub/i/2023/04/24/6446a5dfd4df2.png)

### 2、Vercel部署

Vercel网址：https://vercel.com/

![vercel首页](http://img.wfy.pub/i/2023/04/24/6446a4fabd075.png)

点击Login，选择Github登录后进入首页（如图所示）：

![创建新项目](http://img.wfy.pub/i/2023/04/24/6446a73cd7140.png)

点击`Add New`，选择`Project`，这里会展示你Github账号已有的项目，选择刚刚fork的网易云音乐API，点击`Import`（如图所示）：

![选择部署项目](http://img.wfy.pub/i/2023/04/25/6446a7ae75a0f.png)

`PROJECT NAME`可以不改,`FRAMEWORK PRESET` 选 `Other` 然后直接点 `Deploy` 接着等部署完成即可，稍等几分钟等他部署完成

![修改配置](http://img.wfy.pub/i/2023/04/25/6446a8f5b061b.png)

部署后进入仪表盘，如图2画框链接的就是部署网易云API的地址，复制下来备用：

![仪表盘图1](http://img.wfy.pub/i/2023/04/25/6446a988a56b2.png)

![仪表盘图2](http://img.wfy.pub/i/2023/04/25/6446a9c6b42ad.png)

---

到此，网易云api就部署完成了，接下来开始部署YesPlayMusic！

## 部署YesPlayMusic：

### 1、fork仓库

进入：https://github.com/qier222/YesPlayMusic fork此项目，`Repository name`改不改都行，可以不勾选`Copy the master branch only`，点击`Create fork`开始复制项目

![fork-yesplaymusic](http://img.wfy.pub/i/2023/04/25/6446abd481dd7.png)

### 2、新增josn文件

```
{
  "rewrites": [
    {
      "source": "/api/:match*",
      "destination": "https://your-netease-api.example.com/:match*"
    }
  ]
}
```

![新增文件](http://img.wfy.pub/i/2023/04/25/6446ac499fb7f.png)

![文件配置](http://img.wfy.pub/i/2023/04/25/6446acd3bea89.png)

### 3、Vercel部署

Vercel网址：https://vercel.com/，点击Login，选择Github登录后进入首页（如图所示）：

![vercel首页](http://img.wfy.pub/i/2023/04/24/6446a4fabd075.png)

点击`Add New`，选择`Project`，这里会展示你Github账号已有的项目，选择刚刚fork的YesPlayMusic，点击`Import`（如图所示）：

![创建新项目](http://img.wfy.pub/i/2023/04/24/6446a73cd7140.png)

![部署播放器](http://img.wfy.pub/i/2023/04/25/6446ae0331819.png)

填写 Name 为 `VUE_APP_NETEASE_API_URL`（第一个红框），Value 为 `/网易云api的链接`（第二个红框），点击 Add。最后点击底部的 Deploy 就可以部署到 Vercel 了。

![修改配置](http://img.wfy.pub/i/2023/04/25/6446ae53784e6.png)

稍等几分钟等部署完成，部署完成后进仪表盘，图2红框内的链接就是我们部署YesPlayMusic的链接

![image-20230425003249748](http://img.wfy.pub/i/2023/04/25/6446af3514fce.png)

![image-20230425003316102](http://img.wfy.pub/i/2023/04/25/6446af4c932b8.png)

---

## 写在最后

部署一个自己的高颜值网易云

1 条评论

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

一键安装Aria2 + AriaNg + Filebrowser实现离线下载

风铃发卡搭建教程

莫等闲，白了少年头，空悲切！

搭建青龙面板

Hello 2020

XDD- PLUS安装教程

将Typecho无缝迁移到WordPress

新

新主题-handsome

风铃发卡更新教程

部署一个自己的高颜值网易云

1 条评论

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

部署一个自己的高颜值网易云

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款