让这个MusicPlayer音乐播放器在浏览器里访问

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
生成了可部署的网页版本
1、进入系统根目录
cd /home/xxx/MusicPlayer
2、安装依赖（跳过如果已经安装过）
npm install
3、生产环境构建（非常关键！）
npm run build
 3.1、Error: EACCES: permission denied 没有写入权限
 sudo chown -R musicuser:musicuser /home/xxx/MusicPlayer


把网页部署到服务器，让你能在浏览器访问。
1、Electron + Vite 项目构建后，网页文件会位于：
out/renderer/

方案 A（最快速）：用 serve 在服务器直接跑网页
1）安装 serve（如果没装）
npm install -g serve
2）运行网页
serve -s out/renderer -l 8005
3）访问
http://47.115.72.68:8005

要看到“有歌曲、有数据的成功案例
方案 A — 最快成功：用项目自带本地音乐资源
通常目录是：
/src/assets/music
/src/assets/data/music.json
out/renderer/assets/...



让这个MusicPlayer音乐播放器在浏览器里访问

start-api.js文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const server = require('netease-cloud-music-api-alger/server');
const cors = require('cors');
const express = require('express');

const app = express();
app.use(cors());

const port = process.env.PORT || 3000;

server.serveNcmApi({
  app,
  port
}).then(() => {
  console.log(`后端 API 服务器运行在 http://localhost:${port}`);
}).catch(error => {
  console.error('启动后端失败:', error);
});

执行步骤：

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
1、在 Ubuntu 创建 start-api.js
cd /home/xxx/MusicPlayer
nano start-api.js
插入上述文件内容

2、安装后端依赖
npm install netease-cloud-music-api-alger
npm install express cors

3、运行后端
pm2 start start-api.js --name music-api
pm2 save
确认 3000 端口已打开：
sudo ss -tulpn | grep 3000
应该看到：
node ... *:3000

4、修改前端 VITE API 地址
nano src/renderer/.env.production
写入：
VITE_API=http://47.115.72.68:3000
VITE_API_MUSIC=http://47.115.72.68:3000
然后重建前端：
npm run build

5、最终
1）安装 serve（如果没装）
npm install -g serve
如果第六行报错：npm error Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/serve' -> '/usr/local/lib/node_modules/.serve-ZifzkhmQ'
执行下面两句：
sudo chown -R $(whoami) /usr/local/lib/node_modules（修复 npm 全局目录的 owner）
sudo chown -R $(whoami) /usr/local/bin（修复 npm 全局可执行文件目录）

2）运行网页
serve -s out/renderer -l 8005
3）访问
http://47.115.72.68:8005
4)用 PM2 运行 serve(开机自启、远程工具关闭照常运行)
cd /home/xxx/MusicPlayer
pm2 start "serve -s out/renderer -l 8005" --name music-web

如果修改了项目文件的配置

1
2
3
4
5
6
7
重建前端：（重新读取本地已经修改好的文件，再挂载上去）
npm run build
先暂停所以挂载的程序：
pm2 stop name
重新打开（如果删除），否则就全部重启即可（暂停的话）
pm2 reload all
pm2 reload name

如果误删了/home/musicuser/怎么办？

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
为什么在/home/projects/MusicPlayer下执行命令，pm2 却在/home下创建目录musicuser？
原因：因为 PM2 的工作目录永远是「当前登录用户的 HOME 目录」
不管你在哪里执行命令：
/home/projects/MusicPlayer$ pm2 start ...
PM2 永远会使用这个目录下的pm2工具：
/home/musicuser/.pm2
因为这是 Linux 规定的用户 HOME 目录，而 PM2 会把日志、进程 ID、模块配置全部放在用户 HOME 下，不会放在项目目录里。

为什么 PM2 一定要用 HOME？
因为 PM2 是「用户级进程管理器」，工作方式类似：
~/.pm2/logs/ → 存储所有程序日志
~/.pm2/pids/ → 存储所有运行中进程的 PID
~/.pm2/pm2.log → PM2 自身日志
~/.pm2/dump.pm2 → 保存所有进程状态
~/.pm2/conf → PM2 配置
这些都属于 用户环境，而不是 项目文件。

为什么在项目目录执行命令，但 pm2 不用项目目录？
因为 PM2 不是项目文件管理器，它是系统级进程管理器。

如何修复：
1、安装pm2工具：
sudo npm install pm2@latest -g 
2、重建musicuser目录和pm2工具目录，并授予读写权限：
sudo mkdir -p /home/musicuser/.pm2
sudo chown -R musicuser:musicuser /home/musicuser/.pm2
sudo chmod -R 755 /home/musicuser/.pm2
3、检查是否安装成功：
pm2 -v
4、安装log管理工具pm2-logrotate，并启用：
pm2 install pm2-logrotate
pm2 set pm2-logrotate:max_size 10M （限制单个日志最大文件大小（例如 10M））
pm2 set pm2-logrotate:retain 7 （保留最近 7 个日志文件（自动删除旧的））
pm2 set pm2-logrotate:compress true （是否启用压缩（建议开启））
5、重建musicuser目录和npm工具目录，并授予读写权限
sudo mkdir -p /home/musicuser/.npm
sudo chown -R musicuser:musicuser /home/musicuser/.npm
sudo chmod -R 755 /home/musicuser/.npm
6、启用 PM2 的开机自启功能：
pm2 startup（服务器重启后，pm2工具会自启，里面的running的程序也会随之自启）
pm2 save


Nginx + 子域名反向代理配置全流程

此流程适用于：把子域名（如 music.altairnexus.top）代理到服务器内部端口（如 127.0.0.1:8005），并隐藏真实 IP 与端口。

前置条件

你已有一台公网服务器（如阿里云 ECS）

音乐播放器已经运行，监听端口如：http://127.0.0.1:8005

使用 Netlify 管理域名 DNS

Ubuntu + Nginx 环境（若无可安装）

在 Netlify 配置 DNS 记录

进入 Netlify → Site → Domain Management → DNS → Add Record。

新增一条：

Type Name Value
A music 47.115.72.68

说明：

  • Name 填写 music → 会生成完整域名 music.altairnexus.top
  • Value 是服务器公网 IP
  • TTL 默认即可
  • 生效时间通常 1–10 分钟

安装与检查 Nginx（如已安装可跳过）

安装 Nginx（如需）

1

检查 Nginx 状态

1
2
3
sudo systemctl status nginx
正常输出应包含：
active (running)

创建反向代理配置文件

创建站点配置文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

sudo nano /etc/nginx/sites-available/music
填入如下内容（这是正确、通用、无坑的配置）：

server {
    listen 80;
    server_name music.altairnexus.top;

    location / {
        proxy_pass http://127.0.0.1:8005/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

注意要点：
proxy_pass 后必须有 /
代理地址建议使用 127.0.0.1:8005（本机服务）
server_name 必须与子域名一致

启用站点配置

1
2
3
4
5
6
Nginx 默认只读取 /etc/nginx/sites-enabled/ 下的文件，所以创建软链接：
sudo ln -s /etc/nginx/sites-available/music /etc/nginx/sites-enabled/
检查是否成功：
ls -l /etc/nginx/sites-enabled/
应看到：
music -> /etc/nginx/sites-available/music

测试 Nginx 配置正确性

1
2
3
4
5
6
7
8
务必执行：
sudo nginx -t
若看到：
syntax is ok
test is successful

说明配置完全正确。
如有报错，会指出文件与行号，按提示修改即可。

启动/重载 Nginx

1
2
3
4
5
6
7
8
9
10
11
12
初次启用站点：
sudo systemctl start nginx

如果 nginx 已运行，使用重载方式：
sudo systemctl reload nginx

检查状态：
sudo systemctl status nginx

正常应该是：
active (running)

验证反向代理是否生效

1
2
3
4
5
6
7
8
访问：
http://music.altairnexus.top
若显示音乐播放器界面，地址栏保持域名 → 成功！

此时：
用户看不到 IP
用户看不到端口
完全使用你的独立域名访问

（可选）开启 HTTPS（强烈推荐）

1
2
3
4
5
6
7
8
9
10
11
使用 Certbot 自动申请 Let’s Encrypt 证书：
sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d music.altairnexus.top

选择 “自动将 HTTP 重定向到 HTTPS”。
成功后你获得：
完整 SSL 加密
域名完全掩盖 IP 与端口
浏览器可信绿色锁标识
访问：
https://music.altairnexus.top

附录：可能遇到的问题与解决办法

DNS 未生效

1
2
3
检查：
nslookup music.altairnexus.top
若 IP 不是服务器 IP，则等待或修正 DNS。

Nginx 无法启动

1
2
3
sudo nginx -t
sudo journalctl -xeu nginx
查看报错行号。

访问时报 502

1
2
通常是后端服务没启动，检查：
sudo lsof -i:8005

8080 / 8005 端口未对内开放

1
2
后端程序确认监听：
curl http://127.0.0.1:8005