“把麻烦留给自己，把方便留给别人”，这才是我们折腾的终极目标。在上一篇中 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

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_dspWORKDIR /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 buildFROM 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 /apiRUN 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 设置的占位符

这个和第一版是一样的

#!/usr/bin/env shfind '/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

[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)

# /etc/nginx/nginx.confuser 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 转发给后端处理

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;}
}

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

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

高颜值的第三方网易云播放器—YesPlayerMusic
YesPlayMusic 是一款高颜值的第三方网易云播放器,由 Electron 支撑,支撑 macOS.Windows.Linux 三个平台:macOS 用户也可以通过 brew install - ...
高颜值的第三方网易云播放器，支持 Windows / macOS / Linux
一.开源项目简介一款高颜值的第三方网易云播放器,支持 Windows / macOS / Linux. 二.功能概述三.技术选型 Vue.js 全家桶 Electron 灵感来源 API 源代码来 ...
推荐一款高颜值的第三方网易云播放器，支持网页版和客户端
简介 YesPlayMusic是一款基于网易云音乐官方平台开发的第三方播放器其 UI界面非常漂亮,简洁的白色风格将全部内容简化 YesPlayMusic-高颜值的第三方网易云播放器,支持网页版和客户 ...
YesPlayMusic-高颜值的第三方网易云播放器，支持 Windows / macOS / Linux
特性使用 Vue.js 全家桶开发网易云账号登录(扫码/手机/邮箱登录) 支持 MV 播放支持歌词显示支持私人 FM / 每日推荐歌曲无任何社交功能海外用户可直接播放(需要 ...
如何使用轻量应用服务器搭建高颜值的YesPlayMusic网易云播放器
本文介绍了如何使用腾讯云的Lighthouse轻量应用服务器来搭建一个高颜值的第三方网易云播放器. 项目简介本文使用的是YesPlayMusic项目,这是一款高颜值的第三方网易云播放器,它完全可 ...
推荐一款高颜值网易云播放器
之前老逛推荐过一个符合程序员气质的 GitHub 项目:网易云音乐命令行版本.这个项目基于 Python 编写,支持 Mac OS.Unix.Linux 系统,简洁优雅,丝般顺滑. 人家的网抑云程序 ...
如何搭建一个自己的音乐播放器-使用腾讯云轻量应用服务器搭建YesPlayMusic网易云播放器
项目简介本文使用的是YesPlayMusic项目,这是一款高颜值的第三方网易云播放器,它完全可以作为网易云官方应用的替代品.而且还拥有一些网易云官方应用没有的功能,比如可以自动签到,支持PWA可以直 ...
Qt:一个简洁漂亮的高仿网易云播放器
Qt:一个简洁漂亮的高仿网易云播放器界面动图展示: 功能简述: 1.音乐的播放.暂停 2.音乐的上.下一曲 3.进度条显示进度.滑动条调整进度 4.音量的滑动调整 5.列表切换歌曲 6.播放.暂停的 ...
Vue网易云播放器|Vue音乐播放附带环境部署视频教程
本次项目是对前面的vue知识的综合应用:基于vue实现一个网页版播放器. 主页面这是第二个页面是推荐音乐的模块在这里我们可以查看歌单中的音乐标题还可以自己查看mv 播放视频自由的查看自己喜欢的 ...

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

构建镜像

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

最新文章

热门文章