高颜值的第三方网易云播放器YesPlayMusic（续）

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 8.6k 阅读时长 ≈ 8 分钟
YesPlayMusic 是一款高颜值的第三方网易云播放器。

“把麻烦留给自己，把方便留给别人”，这才是我们折腾的终极目标。在上一篇中 YesPlayMusic 虽然能用，但是需要安装两个镜像，总归还是不算方便，更何况还有不完美的公网访问。经过老苏的不懈努力，v2 版实现了将播放器和 API 集成在一个镜像中，成功解决了：

  • v1 版不能刷新页面的问题
  • 公网反代的问题
  • 可以连接到 Last.me
  • 支持上传云盘

构建镜像

如果你不想自己构建，可以跳过，直接阅读下一章节

折腾 bypy 时学习的 supervisor 让老苏有了新的想法，那就是把前端播放器、后端 API 、nginx 整到一个容器中，把群晖上没完成的事情尝试在容器中搞定，所以就有了本文

  • 前端继续还是采用占位符的方式，老苏还是保留了变量，原本是可以将 VUE_APP_NETEASE_API_URL 写死为 /api 的
  • 参考了 网易 API 官方的 Dockerfile ，所以没有像第一版使用 nginx:1.12-alpine 做基础镜像，而是用了 node:lts-alpine，并在其中安装了一个 nginx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
FROM node:16.5 as build-deps
LABEL maintainer=laosu<wbsu2003@gmail.com>

# environment
ENV VUE_APP_NETEASE_API_URL netease_vanau
ENV VUE_APP_ELECTRON_API_URL netease_vaeaux
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
RUN TMPDIR=/tmp yarn install
#RUN yarn config set registry "https://registry.npm.taobao.org/" \
#    && TMPDIR=/tmp yarn install
COPY . ./
RUN yarn build

FROM node:lts-alpine
RUN apk update \
    && apk add --no-cache supervisor openssh nginx
COPY --from=build-deps /app/dist /usr/share/nginx/html
COPY --from=build-deps /app/supervisord.conf /etc/supervisord.conf

# nginx
COPY --from=build-deps /app/default.conf /etc/nginx/conf.d/default.conf
COPY --from=build-deps /app/nginx.conf /etc/nginx/nginx.conf
RUN mkdir -p /usr/local/nginx/logs

# api server
WORKDIR /api
COPY --from=build-deps /app/netease_api/. /api
COPY --from=build-deps /app/replace_api_url.sh /api

RUN chmod +x replace_api_url.sh
RUN npm config set registry "https://registry.npm.taobao.org/" \
    && npm install --production

# CMD ["sh", "replace_api_url.sh"]
ENTRYPOINT ["supervisord","-c","/etc/supervisord.conf"]

EXPOSE 80

replace_api_url.sh 用于替换 ENV 设置的占位符

这个和第一版是一样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#!/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_vaeaux,'"$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;"

supervisord.conf 文件是新增用来控制进程的，前端 app 是运行在 nginx 上的静态页面，后端 api 基于 node.js 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
[include]
files = /etc/supervisor/conf.d/*.conf

[program:app]
command=./replace_api_url.sh

[program:api]
command=node app.js

#directory will be any folder where you wnat supervisor to cd before executing.
#directory=/project 
autostart=true
autorestart=false
startretries=3

#user will be anyone you want but make sure that user will have the enough privilage.
user=root

[supervisord]
nodaemon=true
logfile=/tmp/supervisord.log
pidfile=/tmp/supervisord.pid
loglevel=debug
logfile_maxbytes=10MB

[supervisorctl]

nginx 设置文件 nginx.conf

镜像中的位置 /etc/nginx/nginx.conf，比默认的 nginx.conf 文件多一行 pid /usr/local/nginx/logs/nginx.pid;，如果没有会出现错误： nginx: [emerg] open() "/run/nginx/nginx.pid" failed (2: No such file or directory)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
# /etc/nginx/nginx.conf

user nginx;

pid /usr/local/nginx/logs/nginx.pid; 

# Set number of worker processes automatically based on number of CPU cores.
worker_processes auto;

# Enables the use of JIT for regular expressions to speed-up their processing.
pcre_jit on;

# Configures default error logger.
error_log /var/log/nginx/error.log warn;

# Includes files with directives to load dynamic modules.
include /etc/nginx/modules/*.conf;


events {
	# The maximum number of simultaneous connections that can be opened by
	# a worker process.
	worker_connections 1024;
}

http {
	# Includes mapping of file name extensions to MIME types of responses
	# and defines the default type.
	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	# Name servers used to resolve names of upstream servers into addresses.
	# It's also needed when using tcpsocket and udpsocket in Lua modules.
	#resolver 208.67.222.222 208.67.220.220;

	# Don't tell nginx version to clients.
	server_tokens off;

	# Specifies the maximum accepted body size of a client request, as
	# indicated by the request header Content-Length. If the stated content
	# length is greater than this size, then the client receives the HTTP
	# error code 413. Set to 0 to disable.
	client_max_body_size 1m;

	# Timeout for keep-alive connections. Server will close connections after
	# this time.
	keepalive_timeout 65;

	# Sendfile copies data between one FD and other from within the kernel,
	# which is more efficient than read() + write().
	sendfile on;

	# Don't buffer data-sends (disable Nagle algorithm).
	# Good for sending frequent small bursts of data in real time.
	tcp_nodelay on;

	# Causes nginx to attempt to send its HTTP response head in one packet,
	# instead of using partial frames.
	#tcp_nopush on;


	# Path of the file with Diffie-Hellman parameters for EDH ciphers.
	#ssl_dhparam /etc/ssl/nginx/dh2048.pem;

	# Specifies that our cipher suits should be preferred over client ciphers.
	ssl_prefer_server_ciphers on;

	# Enables a shared SSL cache with size that can hold around 8000 sessions.
	ssl_session_cache shared:SSL:2m;


	# Enable gzipping of responses.
	#gzip on;

	# Set the Vary HTTP header as defined in the RFC 2616.
	gzip_vary on;

	# Enable checking the existence of precompressed files.
	#gzip_static on;


	# Specifies the main log format.
	log_format main '$remote_addr - $remote_user [$time_local] "$request" '
			'$status $body_bytes_sent "$http_referer" '
			'"$http_user_agent" "$http_x_forwarded_for"';

	# Sets the path, format, and configuration for a buffered log write.
	access_log /var/log/nginx/access.log main;


	# Includes virtual hosts configs.
	include /etc/nginx/conf.d/*.conf;
}

nginx 设置文件 default.conf

镜像中的位置/etc/nginx/conf.d/default.conf，将 /api 转发给后端处理 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
server
    {
    listen 80;
    server_name default_serve; # 配置项目域名
    root /usr/share/nginx/html;
    index index.html index.htm;

    # 1.转给前端处理
    location / {
	    # 前端打包后的静态目录
        alias /usr/share/nginx/html/;
        # 解决页面刷新404问题
        try_files $uri $uri/ /index.html;
		# 处理上传文件大小
		client_max_body_size 1000m;
    }

    # 2.转给后端处理
    location ^~ /api/ {
	    proxy_pass http://127.0.0.1:3000/;
	    # 处理上传文件大小
	    client_max_body_size 1000m;
    }
}

构建镜像和容器运行的基本命令如下👇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# 下载代码,当前对应的是 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 、supervisord.conf、nginx.conf 、default.conf 五个文件放进代码目录中

# 构建镜像
docker build -t wbsu2003/yesplaymusic:v2 .

# 生成容器
docker run -d \
--name=yesplaymusic \
-p 3310:80 \
-e VUE_APP_NETEASE_API_URL=/api \
-e VUE_APP_LASTFM_API_KEY=<your Last.fm API KEY> \
-e VUE_APP_LASTFM_API_SHARED_SECRET=<your Last.fm API SHARED SECRET> \
wbsu2003/yesplaymusic:v2

# --------调试-------------
# 进入容器
docker exec --user root -it yesplaymusic /bin/sh

# 将生成的静态文件拷贝到容器外
docker cp yesplaymusic:/usr/share/nginx/html/. ./dist

# 将生成的静态文件拷贝到容器内
docker cp /dist/. yesplaymusic:/usr/share/nginx/html
# ------------------------

安装

注册表中搜索 wbsu2003 ，找到 wbsu2003/yesplaymusic，版本选 latest。

如果你之前已经安装过 YesPlayMusic，建议先删除老版本的容器和镜像再进行安装

端口

端口不冲突就行

本地端口 容器端口
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 帐户。

老苏没有填 Callback URL

如果你已经创建好了，需要查询可以去 https://www.last.fm/api/accounts 找到你的 API Applications

运行

在浏览器中输入 http://群晖IP:3310 就能看到主界面

第三方授权

在 设置 –> 第三方 –> 连接 Last.fm –> 授权连接

在跳转页面选择 YES ALLOW ACCESS 进行授权

授权之后会显示成功

点 完成，能看到连接的 Last.fm 账号

反代

反代已经没问题了

说明

文中提到的文件，都可以在 https://github.com/wbsu2003/Dockerfile 找到

个人精力有限，很难做全面的测试，如果你发现有什么问题，请反馈给老苏，反馈方式：

  • 给公众号发消息。虽然老苏的公众号并不支持留言，并且还有很多限制，但聊胜于无
  • 点『 阅读原文 』 去老苏的博客 （https://laosu.ml） 留言
  • 发邮件：wbsu2003@gmail.com、wbsu2003@hotmail.com

参考文档

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

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

Bug. Yarn couldn’t build package phantomjs. npm could. · Issue #1016 · yarnpkg/yarn
地址：https://github.com/yarnpkg/yarn/issues/1016

单机，前后端分离，Nginx反向代理 - 简书
地址：https://www.jianshu.com/p/3c2c3f64f1ad

Nginx代理同域名前后端分离项目 | Laravel China 社区
地址：https://learnku.com/articles/50668