本文会带你在本地完成 SeaTunnel Web 的后端和前端服务启动。
整体流程如下：
一、部署后端服务
本节会带你完成 SeaTunnel Web 后端服务的本地启动。
核心流程是：
拉取代码 → 初始化数据库 → 修改配置 → 启动服务 → 访问 Swagger
开始之前，请先确认本地已经安装好：
- JDK
- Maven
- MySQL
并且 MySQL 服务可以正常连接。
1. 拉取项目代码
打开终端，执行以下命令拉取代码：
git clone https://github.com/weifuwan/seatunnel-web.git
进入项目目录：
cd seatunnel-web
2. 使用 IDE 打开项目
推荐使用 IDEA 打开项目根目录。
打开后，等待 Maven 依赖自动加载完成。
3. 初始化数据库
先在 MySQL 中创建数据库：
CREATE DATABASE seatunnel_web DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
然后找到项目中的 SQL 初始化文件：
seatunnel-web-api/src/main/resources/sql/seatunnel_mysql.sql
将该文件中的 SQL 内容完整执行到 seatunnel_web 数据库中。
如果后面启动时报表不存在，大概率是 SQL 没有执行完整，或者执行到了其他数据库。
4. 修改数据库连接配置
找到后端配置文件：
seatunnel-web-api/src/main/resources/application.yml
修改其中的数据库连接信息：
spring:
datasource:
url: jdbc:mysql://127.0.0.1:3306/seatunnel_web?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai
username: root
password: your_password
请将 username 和 password 修改为你本地 MySQL 的账号和密码。
5. 启动后端服务
在 seatunnel-web-api/src/main/java 目录下搜索启动类：
SeaTunnelWebApplication
在 IDEA 中右键该类，选择：
Run 'SeaTunnelWebApplication'
稍等片刻，后端服务会开始启动。
6. 检查启动日志
启动后，观察控制台日志。
如果控制台没有明显报错，并且看到端口启动成功，说明后端服务已经正常运行。
7. 访问 Swagger
服务启动成功后，可以在浏览器访问 Swagger 地址：
http://localhost:9527/swagger-ui/index.html
如果无法访问，请先确认后端服务是否启动成功，并检查控制台中的实际启动端口。
后端常见问题
1. 启动时报数据库连接失败
请检查以下内容：
- MySQL 是否已经启动
- 数据库 seatunnel_web 是否已经创建
- application.yml 中的 url 是否正确
- application.yml 中的 username 和 password 是否正确
- MySQL 端口是否为 3306
2. 启动时报 MySQL 表不存在
通常是初始化 SQL 没有执行，或者执行到了其他数据库中。
请重新确认下面这个 SQL 文件，是否已经完整执行到 seatunnel_web 数据库中：
seatunnel-web-api/src/main/resources/sql/seatunnel_mysql.sql
3. Swagger 无法访问
请先确认后端服务是否启动成功。
如果控制台显示的端口不是 9527，请使用控制台中显示的实际端口访问。
二、部署前端服务
本节会带你完成 SeaTunnel Web 前端服务的本地启动。
核心流程是：
进入前端目录 → 安装依赖 → 配置代理 → 启动服务 → 访问页面
启动前，请先确认本地已经安装好：
- Node.js
- Yarn
1. 进入前端目录
在项目根目录下，进入前端模块：
cd seatunnel-web-ui
2. 安装依赖
执行以下命令安装前端依赖：
npm install -g yarn
yarn
第一次安装依赖可能会稍微久一点，耐心等待即可。
3. 配置后端接口代理
如果前端需要联调本地后端服务，需要确认代理配置是否正确。
找到前端代理配置文件：
seatunnel-web-ui/config/proxy.ts
确认 dev 环境中的 /api/ 代理地址指向本地后端服务：
export default {
dev: {
'/api/': {
target: 'http://localhost:9527',
changeOrigin: true,
pathRewrite: { '^/api': '/api' },
},
'/profile/avatar/': {
changeOrigin: true,
target: 'http://localhost:80',
},
},
};
其中：
- target 表示后端服务地址
- http://localhost:9527 需要和后端实际启动端口保持一致
- 如果后端不是 9527 端口，请改成控制台中实际显示的端口
修改完成后，再启动前端服务。
4. 启动前端服务
依赖安装完成后，执行启动命令：
yarn start
5. 访问前端页面
启动成功后，浏览器访问：
http://localhost:8000
如果页面可以正常打开，说明前端服务已经启动成功。
登录首页里藏了 10 个小动画，可以看看你能发现几个，哈哈。
前端常见问题
1. yarn 命令不存在
请先确认本地是否已经安装 Yarn。
可以执行下面的命令检查：
yarn -v
如果无法识别该命令，需要先安装 Yarn：
npm install -g yarn
安装完成后，再次检查版本：
yarn -v
2. 依赖安装失败
可以尝试清理缓存后重新安装：
yarn cache clean
yarn
如果仍然失败，请检查：
- Node.js 版本是否符合项目要求
- 网络环境是否正常
- 是否需要配置 npm 或 yarn 镜像源
3. 页面无法访问
请先确认 yarn start 是否启动成功。
如果控制台显示的端口不是 8000，请使用控制台中实际显示的地址访问。
三、启动完成
当后端和前端都启动成功后，可以通过下面的地址访问 SeaTunnel Web：
http://localhost:8000
如果页面可以正常打开，并且接口请求没有明显报错，说明本地开发环境已经部署完成。
