radioplato/radio-plato-frontend

Radio Plato 重新设计版镜像文档

镜像概述

本镜像为Radio Plato电台的重新设计版本，基于Create React App构建的现代Web应用，提供电台流媒体播放、元数据展示等核心功能，支持多环境配置与灵活部署。

核心功能与特性

• 技术架构：基于Create React App构建，采用React框架开发
• 环境管理：通过env-cmd包实现多环境（本地、生产、staging等）配置
• 开发支持：提供热重载、代码lint检查等开发时功能
• 构建优化：生产环境自动进行代码压缩、文件名哈希处理，优化性能
• 部署能力：内置GitHub Pages部署脚本，支持staging环境快速发布

使用场景

• 开发人员本地开发与调试Radio Plato Web应用
• 测试团队在staging环境验证新功能
• 生产环境部署优化后的React应用
• 通过GitHub Pages发布staging版本供预览

环境配置

环境变量文件

应用通过.env文件配置环境变量，不同环境对应不同文件名（如.env.local、.env.production、.env.staging），文件需包含以下字段：

REACT_APP_ENV =
REACT_APP_BACKEND_URL =
REACT_APP_STREAM_URL =
REACT_APP_DATA_URL =

变量说明

• REACT_APP_ENV：环境名称（如local、production、stage），应用根据此值调整路由策略（生产环境使用不同路由）
• REACT_APP_BACKEND_URL：后端服务URL
• REACT_APP_STREAM_URL：电台广播流URL
• REACT_APP_DATA_URL：返回流元数据的电台服务器端点

可用脚本

在项目目录中可执行以下脚本：

npm start

• 用途：以开发模式运行应用
• 依赖：需存在.env.local文件
• 特性：
  • 启动开发服务器，默认地址：http://localhost:3000
  • 代码修改后自动重载页面
  • 控制台输出lint错误信息

npm run build（生产环境）

• 用途：构建生产环境应用
• 依赖：需存在.env.production文件
• 输出：构建产物位于build文件夹
• 特性：
  • 生产模式打包React应用
  • 代码压缩优化，文件名包含哈希值
  • 构建产物可直接部署

npm run build（staging环境）

• 用途：构建staging环境应用（用于GitHub Pages部署）
• 依赖：需存在.env.staging文件
• 特性：使用特殊PUBLIC_URL配置，适配GitHub Pages路径

npm run deploy:staging

• 用途：构建staging版本并部署到GitHub Pages
• 流程：先执行staging环境构建，再将build文件夹内容部署到GitHub Pages

Docker部署示例

Dockerfile

dockerfile
# 构建阶段
FROM docker.xuanyuan.run/node:16-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# 根据目标环境构建，示例为生产环境
COPY .env.production .env
RUN npm run build

# 运行阶段
FROM docker.xuanyuan.run/nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

构建与运行命令

bash
# 构建镜像
docker build -t radio-plato:latest .

# 运行容器
docker run -d -p 80:80 --name radio-plato docker.xuanyuan.run/radio-plato:latest

docker-compose配置

yaml
version: '3'
services:
  radio-plato:
    build:
      context: .
      args:
        - ENV=production
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
    restart: always

开发人员

• George (Finds) - https://github.com/GitStearis
• Pavel (Stereobeaver) - https://github.com/pavel-kirpikau