WebChat前后端分离分布式微服务架构版,本地启动指南
webchat采用当下主流前后端分离分布式微服务架构,最主流的java全栈技术,包含IM通信流、社交、社区、电商、红包、圈子、支付、客服、大模型、智能化、图搜等众多核心业务场景及企业级技术解决方案。
视频演示
观看部署流程录屏(该视频录制与25年5月份版本,内容可能不全,后续在更新最新版本,可先参考大体思路)。如果无法播放,请检查网络连接。
微服务架构介绍
前端服务比较简单,这里就不单独介绍啦。后段服务因为模块比较多,可以了解下分层微服务拆分思想和各模块职责。
环境要求
部署前请确保服务器或本地电脑满足以下配置:
前端环境
trae
AI开发工具 (VS code也可以)
Node.js
建议安装最新版本 (必须)
npm
随 Node.js 默认安装
Vue 3.js
由 Node.js 环境驱动
ant-design-vue
项目使用组件库(无需安装)
服务端环境
IntelliJ IDEA
版本随意
SpringBoot 3.2.12
核心开发框架
JDK 17
运行与编译环境(推荐使用idea自带的JDK下载)
Maven
项目构建管理(推荐最新版本)
MySQL 8.0+
关系型数据库
Redis 7.0
高性能缓存
Nacos 2.5+
注册中心与配置中心
Minio
对象存储服务
ElasticSearch 8.X
全文检索搜索引擎
Sentinel
流量治理与熔断
Prometheus
系统监控指标采集
Grafana
数据可视化面板
RocketMQ 5.X
分布式消息中间件
n8n
工作流自动化工具,推荐npm安装(简单)
Milvus
向量数据库 (AI)
attu
向量数据库 (AI)
MongoDB
文档型数据库
deepseek api
[文生文]无需安装
kimi api
[文生文]无需安装
阿里 embedding
[文本转向量]无需安装
liblibai
[文生图]无需安装
一、代码获取
订阅完课程后联系作者(CODER-77)申请开通代码仓库权限,通过代码仓库(前端:webchat-front 后段 webchat-server),推荐使用git拉取项目代码。
# 1. 克隆前端项目到本地
$git clone https://**********************************/webchat-front.git
# 2. 克隆后段项目到本地
$git clone https://**********************************/webchat-server.git
二、数据库初始化
使用 SQL 工具(如 Navicat)连接 MySQL,执行webchat-server/resource/database-sql/webchat-*.sql文件夹下的脚本(注意数据库有多个,先创建数据库在执行脚本):
-- 1. 创建数据库 (必须 utf8mb4) 对应脚本文件:00-create-db.sql
CREATE DATABASE IF NOT EXISTS `webchat_act` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE DATABASE IF NOT EXISTS `webchat_aigc` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE DATABASE IF NOT EXISTS `webchat_payment` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE DATABASE IF NOT EXISTS `webchat_pgc` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE DATABASE IF NOT EXISTS `webchat_ugc` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE DATABASE IF NOT EXISTS `webchat_user` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
-- 2. 导入表结构&初始化数据
-- 请依次运行项目根目录下的 webchat-server/resource/database-sql/webchat-*.sql (注意先选择对应的数据库在执行脚本)
三、Docker 启动中间件
如果你觉得中间件比较多,又熟练使用docker,可以选择docker安装,必须安装中间件:nacos、mysql、redis、minio、milvus、mongodb、es、rocketmq、n8n。
为了快速搭建环境,我们提供了 docker-compose.yml 文件。
$cd docker-env
$后续更新...
# 查看容器状态 (MySQL, Redis, Nacos 应为 Up 状态)
$docker ps
四、Nacos配置
修改 nacos配置 中的各个服务配置信息:
启动nacos
http://localhost:8848/nacos/
空间id,建议保持一致,可以减少后续配置的麻烦。
2cdfb8e3-f127-4020-93df-2d4c3dc805b5
空间名
dev
导入配置,下载nacos配置,直接导入即可
配置文件修改
依次打开所有配置文件,检查所有配置链接、账号、密码、ak、sk等是否修改正确。#---------------------------------数据库配置----------------------------------#
spring:
datasource:
# 配置你的 MySQL地址、用户名、密码等信息
url: jdbc:mysql://127.0.0.1:3306/webchat_act?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=GMT%2b8&allowPublicKeyRetrieval=true
username: root
password: 12345678
driver-class-name: com.mysql.jdbc.Driver
hikari:
maximum-pool-size: 10
jpa:
show-sql: true
#---------------------------------redis----------------------------------#
data:
redis:
port: 6379
database: 6
jedis:
pool:
max-active: 100
max-wait: -1
min-idle: 10
rocketmq:
name-server: 127.0.0.1:9876 # 配置你的 RocketMQ NameServer 地址
consumer:
group: web_chat
producer:
group: web_chat
.... 省略
四、后端启动
依次启动 application.java ,注意看ide启动日志是否有报错,确认服务都启动成功
不管学习那部分内容必须启动服务
webchat-gateway、webchat-user、webchat-sso
学习[IM]还需启动
webchat-client-chat、webchat-connect、webchat-pgc、webchat-ugc
学习[企业级问答助手]还需启动
webchat-client-chat、webchat-connect、webchat-pgc、webchat-ugc、webchat-aigc、webchat-search
学习[电商]还需启动
webchat-client-mall、webchat-pgc、webchat-ugc、webchat-search、webchat-pay
学习[电商客服]还需启动
webchat-netty-gateway、webchat-netty-server、webchat-client-mall、webchat-pgc、webchat-ugc、webchat-search、n8n
学习[管理后台]还需启动
webchat-admin、webchat-pgc、webchat-ugc、webchat-aigc
其他问题欢迎学习交流群随时沟通
五、前端启动
我们已启动 webchat-front-client 为例子,其他都是一样的道理
# 进入对应服务
$cd ~/你的本地目录/webchat-front/webchat-front-client
# 安装依赖
$npm install
# 启动服务
$npm run dev
# 测试访问
http://localhost:5001/ # IM客户端
http://localhost:5000/ # 统一登录
http://localhost:5002/ # 大后台
http://localhost:5003/ # 电商
http://localhost:5003/ # 三方支付