SPlayer网页部署指南 - 部署一个免费强大的第三方网易云音乐播放器

23 天前(已编辑)
139
1

SPlayer网页部署指南 - 部署一个免费强大的第三方网易云音乐播放器

在开始前说一个坏消息, 现在MoeFurina也被封号了, 已经发出申诉但是一点反应都没有, 估计没法自部署了

IamFurina这个作者被封号了, 所以使用了MoeFurina账号继续更新

以下是归档内容

SPlayer是一款基于Vue 3和Electron开发的网易云音乐第三方客户端,具有美观的界面和丰富的功能。本教程将详细介绍如何通过Vercel平台免费部署SPlayer网页版。

一、部署前准备

1. 注册必要账号

2. 了解项目依赖

SPlayer需要以下两个API服务支持:

  1. 网易云音乐API Enhanced(Reborn增强版本)
    • 提供核心音乐服务
  2. TTML歌词API(可选) - 提供歌词服务

二、部署网易云音乐API

方法一:一键部署(推荐)

  1. 点击下方按钮直接部署到Vercel:

Deploy with Vercel

Deploy with Vercel

  1. 等待部署完成,记下生成的域名(如https://api-xxx.vercel.app
    > 尽量使用自己的域名, 默认域名已经被大陆墙了

方法二:手动部署

# 克隆仓库
git clone https://github.com/neteasecloudmusicapienhanced/api-enhanced.git

# 进入目录
cd api-enhanced

# 安装依赖
pnpm install

# 本地测试
pnpm start

三、部署TTML歌词API(可选)

  1. 点击下方按钮部署:

Deploy with Vercel

Deploy with Vercel

  1. 记下部署后的域名
    > 一定要使用自己的域名, 默认域名已经被大陆墙了

四、部署SPlayer主体

方法一:Fork仓库部署(推荐)

  1. 访问SPlayer GitHub仓库
  2. 点击右上角"Fork"按钮,复制到你的账号
  3. 在Vercel控制台点击"New Project"
  4. 选择你Fork的SPlayer仓库
  5. 在配置页面进行以下设置:

    • Framework Preset: 选择"Vue"
    • Build Command: pnpm buildnpm run build
    • Output Directory: out/renderer
    • Environment Variables:

现在配置文件已经设置好构建目录和框架, 直接点击配置环境变量即可

```
RENDERER_VITE_SERVER_URL = "你的网易云API地址"
RENDERER_VITE_SITE_URL = "你的SPlayer部署地址"
```
  1. 点击"Deploy"开始部署,部署完成后配置域名 (一定要配置!)

方法二:手动部署

  1. 克隆仓库:

    git clone https://github.com/MoeFurina/SPlayer.git
    cd SPlayer
    
  2. 复制环境变量文件:

    cp .env.example .env
    
  3. 编辑.env文件:

    RENDERER_VITE_SERVER_URL="你的网易云API地址"
    RENDERER_VITE_SITE_URL="你的SPlayer部署地址"
    
  4. 安装依赖:

    pnpm install
    
  5. 构建项目:

    pnpm build
    
  6. out/renderer目录上传到你的托管服务

五、配置自定义域名(可选)

  1. 在Vercel项目控制台点击"Domains"
  2. 输入你想绑定的域名
  3. 按照提示配置DNS解析

六、更新维护

更新SPlayer

  1. 进入你Fork的仓库
  2. 点击"Sync fork"同步最新代码
  3. Vercel会自动触发重新部署

更新API服务

API服务更新只要你启用了Github Action, Action会自动同步最新内容, Vercel也会自动部署
服务器更新需要重新部署

七、常见问题解决

1. Vercel构建失败

  • 检查out/renderer目录是否正确设置
  • 确认环境变量配置正确

2. 跨域问题

确保.env文件中:

RENDERER_VITE_SERVER_URL = "你的API地址"
RENDERER_VITE_SITE_URL = "你的前端地址"

3. 登录功能异常

  • 检查API服务是否正常运行
  • 确认网络没有被防火墙拦截

4.以上都不是我遇到的问题

  • 加入QQ群423016289, 向群主或管理员询问问题

八、高级配置

使用同级域名API

vercel.json中添加:

{
  "rewrites": [
    {
      "source": "/:path*",
      "destination": "/index.html"
    },
    {
      "source": "/api/:apiurl*",
      "destination": "https://你的API域名/:apiurl*"
    }
  ]
}

.env配置:

RENDERER_VITE_SITE_ROOT=true

九、项目特点

  1. 美观界面:基于Naïve UI的现代化设计
  2. 完整功能

    • 扫码/手机号登录
    • 每日自动签到
    • Hi-Res音质下载
    • 歌词显示与翻译
    • MV播放
    • 私人FM
  3. 多端适配:支持Web和Electron桌面端

十、注意事项

  1. 本项目仅供学习交流使用
  2. 请勿用于商业用途
  3. 遵守AGPL-3.0开源协议
  4. 网易云音乐API可能不稳定,建议自建API服务

通过本教程,你应该已经成功在Vercel上部署了自己的SPlayer音乐播放器。如有任何问题,可以参考项目GitHub仓库的Issue部分或提交新的Issue。

使用社交账号登录

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...