全球电台部署实战：从零到一，在电脑和手机上搭建你的全球收音机

上期《开源世界收音机，把全球电台装进口袋》发出后，收到不少朋友的反馈：“项目很棒，但怎么部署到自己服务器上？”“手机上能装吗？”今天这篇就是详细的部署实战指南，从 Docker 一键拉起到 PWA 手机安装，从本地开发到生产环境配置域名+HTTPS，基石项目精选手把手带你跑起来。

重点提醒：

1.手机部署在第五条

2.电台源在src/data/tingfmRadioData.json 和 src/services/radioApi.ts 这两个文件

核心是调用的https://www.radio-browser.info/的API

一、功能深度解析：先了解这个“全球收音机”到底能做什么：
电台搜索：支持中文台名搜索，输“纽约”能找到 WNYC，输“LBC”出来的也是对应电台
收藏+Playlist：发现喜欢的电台一键收藏，后续快速访问
播放历史：自动记录你听过的电台，方便回踪
睡眠定时器：设定 30/60 分钟后自动停止播放
主题切换：亮色/暗色两套主题
多语言：内置 i18n 支持中英日韩等主流语言
电台分享：发现好节目直接把链接发给朋友
PWA 支持：手机上可安装成接近原生 App 图标，离线也能打开
内存缓存：首页电台列表5分钟缓存，刷新可绕过
核心架构是 Vue 3 + Vite + TypeScript，打包后是纯静态站点，不需 Node.js 运行时。只要有能提供静态文件服务的东西（Nginx/Apache/Caddy）就能跑。

二、电脑/服务器部署方式一：Docker 一键部署（最快）
适合有 Docker 环境的服务器，一行命令即可：

docker pull superneed/global-radio:latest
docker run -d --name global-radio --restart unless-stopped -p 8080:80 superneed/global-radio:latest
浏览器访问 http://localhost:8080/ 即可。如果是云服务器，访问 http://你的服务器IP:8080/。

ARM/arm64 设备（树莓派、苹果芯片 Mac）请用专用镜像：

docker pull superneed/global-radio-arm64:latest
docker run -d --name global-radio --restart unless-stopped -p 8080:80 superneed/global-radio-arm64:latest

三、电脑/服务器部署方式二：本地构建部署
适合想自己修改源码或没有 Docker 的情况：

git clone https://github.com/moli-xia/global-radio.git
cd global-radio
npm ci
npm run build
构建完成后 dist/ 目录就是整个网站。可以用 Nginx 托管：

sudo cp -r dist /var/www/global-radio/
sudo nginx -t && sudo systemctl reload nginx
或者直接用 Node.js 预览：npm run preview -- --host 0.0.0.0 --port 4173，访问 http://localhost:4173/。


四、电脑/服务器部署方式三：配置域名 + HTTPS（生产环境）
想要用自己的域名访问并加上 HTTPS？两种方案：

方案 A：Nginx 反向代理

先用 Docker 启动容器，再配置 Nginx 反代：

server {
listen 80;
server_name radio.example.com;
location / {
proxy_pass http://127.0.0.1:8080;
}
}
然后用 Certbot 免费申请 SSL 证书：

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d radio.example.com

方案 B：Caddy 一行解决

Caddy 自带 HTTPS，配置更加简单：

radio.example.com {
reverse_proxy 127.0.0.1:8080
}

五、手机部署：PWA 手机安装（真正的“App”体验）
GlobalRadio 最大的亮点之一是完整支持 PWA。这意味着你不需要去应用商店下载，直接在浏览器里就能“安装”一个接近原生 App 体验的版本。

安卓手机（Chrome/Edge）
用 Chrome 浏览器打开你部署好的地址（或演示站 aabb.live）
等待页面完全加载，Chrome 会自动检测到 PWA 支持
地址栏右侧会出现“安装应用”图标（或菜单中选“添加到主屏幕”）
点击后确认，桌面上就多了一个 GlobalRadio 图标
点击图标即可以全屏运行，不带浏览器地址栏
iPhone/iPad（Safari）
用 Safari 打开你部署好的地址
点击底部导航栏的“分享”按钮（方形+U+2191）
向下滑动，找到“添加到主屏幕”
确认后桌面上就有了 GlobalRadio 图标
注意：苹果对 PWA 支持比较保守，建议确保你的部署地址已配置 HTTPS，否则 Safari 不会提示安装。演示站 aabb.live 已配置 HTTPS，可直接体验。

PWA 如何工作？
PWA 的核心是两个文件：manifest.json（定义应用名称、图标、全屏模式等）和 Service Worker（离线缓存）。部署后，浏览器会自动下载这两个文件，并缓存页面资源到本地。下次打开时，即使设备离线，也能加载应用界面（不过播放电台仍需网络）。

六、局域网部署（家庭 NAS/树莓派）
如果你有一台树莓派或 NAS，可以把 GlobalRadio 当作一个“家庭广播中心”：

docker pull superneed/global-radio-arm64:latest
docker run -d --name global-radio --restart unless-stopped -p 8080:80 superneed/global-radio-arm64:latest
部署后，家里所有设备访问 http://树莓派IP:8080/ 即可。配合一个蓝牙音箱，就是一台不要钱的“互联网收音机”。

七、科技 Lion 一键脚本（新手最友好）
GlobalRadio 已经被收录到 科技 Lion（kejilion.sh）的一键部署脚本中。只要你有一台 Linux 服务器，运行科技 Lion 的脚本，选择对应选项即可自动完成：

Docker 拉取镜像
配置 Nginx 反代
申请免费 SSL 证书
设置开机自启
对于不熟悉 Linux 的朋友来说，这是最省心的方式。

八、Nginx 直接托管（不用 Docker）
项目已提供了现成的 Nginx 配置文件，直接复制使用：

git clone https://github.com/moli-xia/global-radio.git
cd global-radio
npm ci && npm run build
sudo cp -r dist /var/www/global-radio/
sudo cp nginx-static.conf /etc/nginx/sites-available/global-radio
sudo ln -s /etc/nginx/sites-available/global-radio /etc/nginx/sites-enabled/
修改 /etc/nginx/sites-available/global-radio 中的 server_name 和 root 路径
sudo nginx -t && sudo systemctl reload nginx
这种方式不依赖 Docker，静态文件直接由 Nginx 提供，性能最佳。

九、总结
回顾一下，GlobalRadio 提供了四种部署方式，覆盖了从新手到专业的全场景：

Docker 一键部署：一行命令，适合有 Docker 的服务器
科技 Lion 脚本：新手最友好，自动配置域名+SSL
Nginx 直接托管：纯静态站点，性能最佳，适合生产环境
本地开发模式：npm run dev，修改源码体验实时预览
无论你选哪种方式，部署完成后记得试一下PWA 安装——尤其是在 iPhone 上用 Safari 添加到主屏幕，你会发现它的体验和 App Store 里下载的应用几乎没有区别。

下一步怎么玩？可以尝试修改 src/ 下的源码添加自己喜欢的电台源，或者用反向代理换一个好看的域名分享给朋友。一台属于你自己的全球收音机，就这么简单。

🔗 项目地址：https://github.com/moli-xia/global-radio