YesPlayMusic 是一款美觀的第三方网易云播放器，设计精美，播放体验优秀。使用 Vue.js 全家桶和 Electron 框架开发，支持 Windows 、 macOS 、 Linux。

https://github.com/qier222/YesPlayMusic/releases 下载对应平台的客户端，也可以去官方的 Demo 站点在线体验：https://music.qier222.com/

官方只提供了 Windows 、 MacOS 、 Linux 平台的客户端，所以 Docker 只能我们自己来构建YesPlayMusic 依赖于另一个开源项目 Binaryify/NeteaseCloudMusicApi（网易云 API） 的部署， 因此 API URL 是不能预先设定的。老苏按照参考文档，采用了占位符的方式 最近在学习多阶段构建方式，正好拿这个项目实践一下 FROM node:16.5 as build-deps MAINTAINER laosuwbsu2003@gmail.com

environment

ENV VUE_APP_NETEASE_API_URL netease_vanau ENV VUE_APP_ELECTRON_API_URL netease_vaeau ENV VUE_APP_ELECTRON_API_URL_DEV netease_vaeaud ENV VUE_APP_LASTFM_API_KEY netease_valak ENV VUE_APP_LASTFM_API_SHARED_SECRET netease_valass ENV DEV_SERVER_PORT netease_dsp

WORKDIR /app COPY package.json yarn.lock ./ RUN yarn COPY . ./ RUN yarn build

FROM nginx:1.12-alpine COPY --from=build-deps /app/dist /usr/share/nginx/html COPY --from=build-deps /app/replace_api_url.sh /
CMD ["sh", "replace_api_url.sh"] EXPOSE 80 replace_api_url.sh 用于替换 ENV 设置的占位符

!/usr/bin/env sh

find '/usr/share/nginx/html' -name '*.js' -exec sed -i -e 's,netease_vanau,'"$VUE_APP_NETEASE_API_URL"',g' {} \;

find '/usr/share/nginx/html' -name '*.js' -exec sed -i -e 's,netease_vaeau,'"$VUE_APP_ELECTRON_API_URL"',g' {} \;

find '/usr/share/nginx/html' -name '*.js' -exec sed -i -e 's,netease_vaeaud,'"$VUE_APP_ELECTRON_API_URL_DEV"',g' {} \;

find '/usr/share/nginx/html' -name '*.js' -exec sed -i -e 's,netease_valak,'"$VUE_APP_LASTFM_API_KEY"',g' {} \;

find '/usr/share/nginx/html' -name '*.js' -exec sed -i -e 's,netease_valass,'"$VUE_APP_LASTFM_API_SHARED_SECRET"',g' {} \;

find '/usr/share/nginx/html' -name '*.js' -exec sed -i -e 's,netease_dsp,'"$DEV_SERVER_PORT"',g' {} \;

nginx -g "daemon off;" 构建镜像和容器运行的基本命令如下👇

下载代码,当前对应的是 0.4.1

git clone https://github.com/qier222/YesPlayMusic.git

或者镜像站点

git clone https://hub.fastgit.org/qier222/YesPlayMusic.git

进入目录

cd YesPlayMusic

将 Dockerfile 和 replace_api_url.sh 放进代码目录中

构建镜像

docker build -t wbsu2003/yesplaymusic:v1 .

生成容器

docker run -d \ --name=yesplaymusic \ -p 3310:80 \ -e VUE_APP_NETEASE_API_URL=http://192.168.0.114:3000 \ # 网易云 API 地址 wbsu2003/yesplaymusic:v1

--------调试-------------

将生成的静态文件拷贝到容器外

docker cp yesplaymusic:/usr/share/nginx/html/. ./dist

将生成的静态文件拷贝到容器内

docker cp /dist/. yesplaymusic:/usr/share/nginx/html

------------------------

安装 在群晖上以 Docker 方式安装。播放器依赖于 网易云音乐 Node.js API service， 所以要先部署 API

网易云音乐 API 在注册表中搜索 binaryify ，选择第一个 binaryify/netease_cloud_music_api，双击直接下载。

端口 端口不冲突就行

本地端口 容器端口 3300 3000

运行 在浏览器中输入 http://群晖IP:3300 就能看到主界面，看到界面表示服务已经运行成功了

网易云音乐播放器 注册表中搜索 wbsu2003 ，找到 wbsu2003/yesplaymusic，版本选 latest。

端口 端口不冲突就行

本地端口 容器端口 3310 80

环境 可变 值 VUE_APP_NETEASE_API_URL 网易云 API 地址 VUE_APP_LASTFM_API_KEY Last.fm 获取的 API Key VUE_APP_LASTFM_API_SHARED_SECRET Last.fm 获取的 Shared Secret 如果你还没有 Last.fm 账号，可以去 https://www.last.fm/api/account/create 创建一个 API 帐户。

目前情况下只设置 VUE_APP_NETEASE_API_URL 即可

VUE_APP_NETEASE_API_URL 是必须要的，后两项为可选项，不填也不影响使用，而且老苏也没设置成功，Issues 中也有人提，https://github.com/qier222/YesPlayMusic/issues/712，但没看到解决办法。

参考文档 qier222/YesPlayMusic: 高颜值的第三方网易云播放器，支持 Windows / macOS / Linux 地址：https://github.com/qier222/YesPlayMusic

Binaryify/NeteaseCloudMusicApi: 网易云音乐 Node.js API service 地址：https://github.com/Binaryify/NeteaseCloudMusicApi

网易云音乐 NodeJS 版 API 地址：https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=%e5%ae%89%e8%a3%85

前端如何调用后端接口_前后端分离，如何在前端项目中动态插入后端API基地址？…_weixin_39876282的博客-CSDN博客 地址：https://blog.csdn.net/weixin_39876282/article/details/111289163