企业官网建设流程全解析

简介：EasyMedia-ui.zip 是一套面向流媒体直播与点播场景的Vue.js前端页面工程，集成RTSP与FLV播放技术，适合前端开发者、Vue学习者以及需要快速搭建多视频源监控或视频平台的工程师参考。压缩包共22个文件，以7个Vue单文件组件和7个JS脚本为主体，辅以HTML入口、JSON配置及Vue CLI相关配置，整体仅101KB，内容精简、易于阅读；目录结构涵盖public静态入口与src源码区，并包含完整的依赖锁定文件。工程内包含单屏、四分屏、九分屏、十六分屏布局，并封装了Stream、Preview、CusPlayer等视频相关组件，可直接窥见多视频源同屏呈现与协议接入的实现思路。已有16541人学习下载，说明其在流媒体前端开发中具有一定通用性。通过学习这套工程，可以掌握Vue项目目录划分、路由与状态管理配置、vue.config.js/Babel/ESLint等工程化要点，以及RTSP与FLV在前端播放场景中的整合方式，适合作为二次开发或课程实操的参照。 如果你刚拿到一个叫EasyMedia-ui.zip的文件，大概率是别人直接从工作目录里拖给你，或者是从某次团队协作的网盘链接里保存下来的。我第一次拿到它的时候，第一反应是双击看看能不能打开，结果 Windows 只是帮我解了个压，里面既没有 exe，也没有安装向导。后来我才弄明白，这个 UI 包本身不是软件本体，它是 EasyMedia 流媒体服务的前端管理界面。EasyMedia 是一套基于 Spring Boot 技术栈的开源流媒体解决方案，常用于摄像头拉流、直播转推、网页低延迟播放这类场景，而EasyMedia-ui.zip就是它的操作台。这篇内容适合正在部署 EasyMedia、或者刚从同事手里接到这个压缩包、不知道怎么把它的人和环境跑起来的人。

1. 先弄明白 EasyMedia-ui 在你整套流媒体架构里的角色

很多人在 UI 包上卡住，是因为默认把它当成了一个独立软件。实际上 EasyMedia 这套方案是典型的前后端分离：后端负责所有流媒体相关的脏活累活，UI 包只是把管理接口包装成了浏览器里的图形界面。

1.1 它不是一个能独立运行的程序

把EasyMedia-ui.zip解压后，你会看到一堆前端工程文件，可能是已经编译好的静态资源目录，也可能直接就是源码（能看到 package.json、src 目录那种）。无论哪一种，它自身都没有端口、没有数据库、没有推流能力，它只能靠 HTTP 请求去调用后端接口拿数据。

用生活里的例子类比，UI 就是汽车的仪表盘，它显示转速、油量、故障灯，但真正让车跑起来的是发动机和传动系统。EasyMedia 后端就是发动机，它处理 RTMP 推流接入、流状态管理、转封装、向浏览器分发 HTTP-FLV/HLS 这些核心事务；UI 仪表盘只是把这些状态可视化。所以正确顺序永远是：先把后端跑起来，再部署 UI，而不是反过来。

如果你是纯视频流接入场景，其实不用 UI 也能用，用命令行调用后端接口一样能实现推流和播放。但问题在于，接口返回的是 JSON，里面写着会话 ID、推流状态、节点负载这类信息，非技术同事根本没法看。UI 存在的价值就是把这一堆 JSON 变成列表、按钮、状态指示灯。

1.2 UI 与后端的分工边界

我曾经为了让一个朋友少走弯路，给他画过一张职责表，这里直接放出来：

这个分工带来的直接好处是后端可以独立做集群，一个控制台管多个流媒体节点。我在实际项目里最多接过十几路摄像头流，分别推给两台后端节点，UI 上依然只有一套界面，点哪一路流都能看状态。这种集中管理能力，用纯命令行是很难做到的。

1.3 什么场景下你会真正需要它

不是所有 EasyMedia 用户都需要 UI，但下面几类场景里，它是刚需：

• 安防项目：机房里有几十路摄像头要走 RTSP 拉流，再转成网页能放的 HTTP-FLV 给监控大屏用，没有列表式的管理面板，排查哪路流断了会非常痛苦。
• 直播转推：用 OBS 或者硬件编码器往自己的流媒体服务推流，再通过后台配置转推到多个平台，需要一个地方统一看转推状态。
• 团队协作：你负责把服务搭好，运营或前端同事需要自己操作流的新增和停止，总不能教他们敲 curl 命令，给他们一个 UI 是最省事的。

2. 解开压缩包之后，先核对这几样环境

拿到 zip 后别急着扔到服务器上，先花五分钟对照一下运行环境。这一步省掉的时间，后面会让你用十倍还回来。

2.1 你至少要准备这些东西

EasyMedia 后端基于 Java，所以 JDK 是第一个硬性要求，建议 1.8 以上。数据库方面我用的是 MySQL 5.7，在初始化时把官方 SQL 脚本执行一遍就建好了表。如果你不确定脚本在哪，解压后找 sql 目录或项目根目录下带 .sql 后缀的文件，十有八九就是。

前端部分虽然本质上是静态文件，但为了让访问体验正常，最好准备一个 Nginx。当然你也可以用python -m http.server或者任意静态资源服务器临时顶着，不过后面要解决接口跨域时，Nginx 仍然是首选。如果 EasyMedia 后端版本里有拉流转发功能，服务器上最好再装一个 ffmpeg，很多自动拉流任务是在命令行里直接调 ffmpeg 完成的。

注意：EasyMedia-ui.zip这个名字其实已经暗示了它更偏前端资源，而后端 jar 包通常不在这个压缩包内。如果你手头没有后端启动文件，先去找完整部署包，否则 UI 会一直处于"看得见、摸不着"的状态。

2.2 解压后怎么快速判断是源码还是打包产物

我用一个很简单的规则判断：看有没有package.json。有它说明是前端源码，需要 Node.js 环境编译；没有它但能看到static、dist、index.html这类目录，说明是已经构建好的静态资源，直接扔给 Nginx 就能用。

如果是源码版本，编译命令基本逃不出这几步：

npm install npm run build

执行完成后会生成一个 dist 目录，这个 dist 才是真正要挂到 Nginx 下的东西。很多新手在这里犯迷糊，拿着一堆.vue文件就往服务器上传，结果页面白屏。记住一句话：服务器只认编译后的 dist，不认源码。

2.3 最容易忽略的三个配置点

• API 请求地址：前端页面里有一段配置或常量专门指定后端接口的 baseURL，常见值形如http://localhost:8823。如果你用 Nginx 做了同域反向代理，这里一般留空或者写相对路径/api；如果前后端分开部署，这里必须填成后端实际地址，否则页面加载完列表一直是空的。
• 后端端口：EasyMedia 后端常见的默认端口是 8823，但这不是绝对的，以你启动 jar 时的日志为准。日志里会明确打印Tomcat started on port(s): 8823。
• CORS 跨域：前后端域名不一致时，后端要允许跨域请求。如果后端没开 CORS，浏览器控制台会报一段红色错误，解决办法要么改后端配置，要么让 Nginx 把接口路径反代到后端口，从浏览器视角看就是"同源请求"。

3. 在服务器上从零拉到界面能登录

这一节是我在实际服务器上完整操作过的流程，按顺序做，基本不会出大问题。

3.1 先把后端跑通，别让 UI 背锅

后端没有起来之前，所有部署 UI 的努力都是无效的。我会先做这几步：

1. 安装 JDK，配置好 JAVA_HOME 环境变量。
2. 创建数据库，执行官方 SQL 初始化脚本，注意字符集选 utf8mb4。
3. 修改后端配置文件（一般是application.properties或application.yml），把数据库账号密码改成自己环境的。
4. 执行java -jar easymedia-server.jar启动。
5. 看到Started关键字后，再用浏览器或者 curl 访问一下后端地址，确认能返回 JSON 或后端提示信息。

后端启动这一步千万不要跳过直接去搞 UI，因为问题一旦交叉在一起，你会分不清到底是前端请求写错，还是后端根本没监听。

3.2 前端静态资源托管到 Nginx

假设你已经有编译好的 dist 目录，我以 Nginx 为例给出一个最小配置。找到nginx.conf里的server块，大致写成这样：

server { listen 8080; server_name your_server_ip; root /opt/easymedia-ui/dist; index index.html; location /api/ { proxy_pass http://127.0.0.1:8823; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }

这里最关键的在于location /api/这一段。它把前端发到同源/api/开头的请求，转发到后端 8823 端口，从浏览器角度完全看不出跨域。我几乎每次都建议团队成员这么做，比到处开启 CORS 更干净。

配置改完后，执行nginx -t检查语法，再nginx -s reload重载，然后打开浏览器访问http://服务器IP:8080，应该能看到登录页。

3.3 登录时的自检链路

页面出来只是第一步，登录成功才算前后端真正打通。如果输入账号密码后一直转圈或提示错误，我习惯按这个链路排查：

1. 按 F12 打开浏览器开发者工具，切到 Network 面板。
2. 看登录请求是否发出，URL 是哪一个，HTTP 状态码是多少。
3. 如果请求 404，多半是 Nginx 反代路径和后端接口前缀对不上。
4. 如果请求 500，去翻后端日志，重点看数据库连接、SQL 异常这两个关键词。
5. 如果请求根本没发出，那就是前端静态资源里的接口地址写死了一个不可达的域名，需要重新编译前端或在配置里改掉。

我自己遇到最多的情况是第 3 种，Nginx 里写的位置不对，多调试几次就熟练了。

4. 登录后台后，如何把第一路视频流接进来

UI 接通只是热身，真正让 EasyMedia 发挥价值的是往里面接视频流。这一步也是拿到 UI 包后最关心的实操环节。

4.1 推流的基本姿势：OBS 和 ffmpeg 二选一

EasyMedia 后端默认监听 RTMP 端口（常见 1935 端口，具体以配置为准），你只要把视频流推进去，它就能开始工作。我平常用得最多的是 OBS 推流，操作路径是"设置 → 直播 → 自定义服务器"，服务器地址填rtmp://你的服务器IP:1935/live，推流码填一个自定义流名称，比如room1，然后点开始直播。很快 UI 的流列表里就会出现一条新的在线流。

如果你不想开图形界面，用 ffmpeg 推流也可以，一个命令就能搞定：

ffmpeg -re -i input.mp4 -c copy -f flv rtmp://your_server_ip:1935/live/room1

命令里的input.mp4是你的本地视频，room1是你给这条流起的名字。这个方式尤其适合无人值守的定时推流脚本。

4.2 UI 流列表里你会看到什么信息

流推上去之后，回到 EasyMedia-ui 页面，在线流列表里通常能看到流名称、推流开始时间、协议类型、在线状态这些信息。有些版本还会展示会话 ID 和当前正在使用这条流的客户端数量。我自己的习惯是经常刷新一下流列表，确认流没有因为网络抖动断开，如果断了也能第一时间发现是哪一路。

4.3 播放地址怎么拼

UI 的价值之一是帮你省去记地址格式的精力，但理解格式仍然很重要。EasyMedia 常见的几种播放地址大概长这样：

具体路径和后端配置的挂载规则有关，以你部署版本后台里“播放地址”展示栏里的实际内容为准。我在网页项目里通常优先选 HTTP-FLV 方案，配合 flv.js 能实现在 Chrome 里秒开播放，延迟能控制在两秒左右。

5. 我在实际部署与日常使用里踩过的几个坑

最后聊几个真实踩过的坑，每一个都让我花过不少冤枉时间。

5.1 防火墙端口没放行，服务却在正常跑

最典型的一个：后端日志显示一切正常，UI 也能打开，但 OBS 就是推不了流。排查到最后才发现是服务器防火墙没放行 1935 端口。当时我用telnet 服务器IP 1935直接超时，才知道是被防火墙拦住了。建议在部署当天就把需要用到的端口一次性放行，包括 RTMP 用的 1935、HTTP 用的 8080、后端 API 用的 8823，顺便也确认一下云安全组的入方向规则。

5.2 前端页面白屏，连登录框都不显示

这个问题在开发环境偶尔出现，多半是前端资源和后端接口不在同一个域导致的跨域拦截。更隐蔽的一个原因是浏览器缓存了旧的静态资源，把index.html和 JS 文件缓存住了，导致你明明改了后端地址，浏览器还在跑老代码。我现在的做法是每次部署前端后，在 Nginx 的静态资源响应里关闭缓存或者加版本号参数，尽量避免这种玄学问题。

5.3 改了密码忘了登录不了，怎么重置

EasyMedia 的账号信息存在 MySQL 里，密码通常不是明文，是经过哈希的。真忘了密码，不要试图在数据库里手工改成一个明文，正确的做法是看后端有没有提供初始化或重置脚本。如果没有，最简单的方案是重新初始化一张用户表，把默认账号恢复出来，然后再登录改掉。手动算哈希这种事情很容易出错，不推荐。

5.4 UI 版本和后端版本不匹配

容易忽略但是真实存在。团队成员之间流传的 zip 文件可能跟后端 jar 版本差了好几个迭代，接口字段对不上，UI 列表里就会一直转圈或者空白。所以拿到EasyMedia-ui.zip后，我建议第一时间确认它的构建时间或版本号，如果和自己已有的后端对不上，不要犹豫，直接去下载同版本的配套包，比自己对着接口调省力得多。

最后再分享一个自己养成的习惯：每次部署这套东西，我会把启动步骤和端口清单写到一个DEPLOY.md里，放在服务器项目目录下，下次再部署同一套架构时，照着 markdown 文件走一遍就行，不用再靠记忆力。很多时候项目出问题都不是因为技术有多难，而是因为信息只在某一个人的脑子里。把它写下来，比什么都管用。

本文还有配套的精品资源，点击获取