大家好,我是程序员鱼皮。经过一个月的奋斗(肝疼),我的新项目鱼答答 AI 答题应用平台已经完结~
这是一个深入业务场景的企业级实战项目,基于 Vue 3 + Spring Boot + Redis + ChatGLM AI + RxJava + SSE 实现。用户可以基于 AI 快速制作并发布多种答题应用,支持检索和分享应用、在线答题并基于评分算法或 AI 得到回答总结;管理员可以审核应用、集中管理整站内容,并进行统计分析。
我也把这个项目部署上线了,感兴趣的朋友可以访问玩玩看~
https://yudada.code-nav.cn
这篇文章,主要给大家分享如何将项目部署上线。其实之前已经分享过使用服务器部署的传统方式,而这一次,我要分享一种更高效的部署方式,而且完全不需要用到服务器!不用输入 Linux 命令!
推荐观看视频教程:https://www.bilibili.com/video/BV1Xm421N7Xj
以下为文字版:
本项目分为开源版本和扩展版本。
开源版本:https://github.com/liyupi/yudada
扩展版本:前端补充了更多功能、后端使用了 Redisson 分布式锁和 Sharding JDBC 分库分表。
见编程导航项目教程的资料 => 项目源码:https://www.code-nav.cn/course/1790274408835506178
本项目前端使用 Vercel 平台部署;后端使用微信云托管平台,以容器的方式进行部署。
Vercel 平台可免费部署前端项目,支持读取 GitHub 仓库的项目,根据 package.json 文件自动安装依赖并执行打包构建命令,还会提供测试域名和正式的 HTTPS 域名供用户访问。此外,支持自定义域名、代码变更时自动部署、快速回滚版本、监控等操作。
微信云托管平台以容器的方式部署项目,支持读取 GitHub 仓库的项目,并根据 Dockerfile 文件自动构建容器镜像并启动,还会提供 HTTPS 公网域名供用户访问。此外,支持自定义域名、代码变更时自动部署、快速回滚版本、监控等操作。注意,该平台按量计费,不用时记得停止服务。
相比于传统的服务器方式部署,采用这些平台部署项目的优点是:
前端:使用 Vercel 生成的默认域名,访问地址为 https://{域名}
。
后端:使用微信云托管生成的默认域名,访问地址为 https://{域名}/api
,实际运行在 8101 端口。
数据库:需自行安装,一般为服务器的 3306 端口
Redis:需自行安装,一般为服务器 6379 端口
注意,由于前端和后端都是用平台生成的默认域名,二者不一致,将会出现跨域问题。虽然后端已经通过 CorsConfig 全局支持了跨域,但 Cookie 无法跨域设置,会导致用户无法正常登录,所以后面需要进行解决。
本项目主要用到了 MySQL、Redis、对象存储和 ChatGLM AI 依赖。
在鱼皮之前的教程中,已经讲过如何利用宝塔 Linux 面板快速安装 MySQL 和 Redis,可参考视频教程:https://www.bilibili.com/video/BV1eT421i7si/,此处不再赘述。
也可以使用微信云托管或者第三方云服务提供的 MySQL,不用自己安装:
对本项目来说,如果使用了开源代码,Redis 不是必须要安装的;如果使用扩展版的代码,Redisson 分布式锁依赖 Redis,所以必须要安装 Redis,或者注释掉分布式锁和 Redis 相关的代码。
需要在腾讯云的访问控制中获取到对象存储所需的 key 和 secret。同时如果对象存储配置开启了防盗链,注意要将前端网站的域名添加到防盗链白名单中,否则图片将无法加载。
本项目使用了智谱 AI,需要在智谱 AI 开放平台中获取到调用 AI 所需的 key。
进入后端项目,首先利用 IDEA 自带的数据库管理能力,连接远程数据库。
然后执行 sql
目录下的 create_table.sql
和 init_data.sql
文件,创建库表和插入初始化数据。
成功看到了创建的库表:
修改生产环境的配置文件 application-prod.yml
,主要是数据库、Redis、对象存储和 ChatGLM API key 的配置。
还可以修改接口文档的配置,设置需要密码才能访问,保护接口信息安全。
如果使用了扩展版源码,还需要编写分库分表的配置,一定不要遗漏!
要修改的部分配置如下:
spring:
# 数据库配置
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://{修改为你的数据库地址}/yudada
username: 修改为你的用户名
password: 修改为你的密码
# Redis 配置
redis:
database: 1
host: 修改为你的地址
port: 6379
password: 修改为你的密码
# 分库分表配置(开源代码部署可忽略)
shardingsphere:
#数据源配置
datasource:
# 多数据源以逗号隔开即可
names: yudada
yudada:
type: com.zaxxer.hikari.HikariDataSource
driver-class-name: com.mysql.cj.jdbc.Driver
jdbc-url: jdbc:mysql://{修改为你的数据库地址}/yudada
username: 修改为你的用户名
password: 修改为你的密码
修改好配置后,可以将最新的代码推送到 GitHub 上,但是 一定要注意 !不要将包含密码和隐私数据的代码公开,建议新建一个 private 仓库 进行推送!
Dockerfile 类似于一个脚本文件,用于指定构建 Docker 镜像的方式,这里直接给大家提供,不同的项目进行微调即可。
Dockerfile 代码如下,一般将其放到后端项目的根目录:
# Docker 镜像构建
# 选择基础镜像
FROM maven:3.8.1-jdk-8-slim as builder
# 解决容器时期与真实时间相差 8 小时的问题
RUN ln -snf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo Asia/Shanghai > /etc/timezone
# 复制代码到容器内
WORKDIR /app
COPY pom.xml .
COPY src ./src
# 打包构建
RUN mvn package -DskipTests
# 容器启动时运行 jar 包
CMD ["java","-jar","/app/target/yudada-backend-0.0.1-SNAPSHOT.jar","--spring.profiles.active=prod"]
其实就是把部署所需的环境和操作命令写在一起。
首先进入微信云托管平台,创建环境并新建服务,注意要打开公网访问:
然后编写部署配置,选择发布在 GitHub 上的后端代码仓库,并且一定要修改端口号和实际后端项目一致!
注意目标目录要选择后端项目的根目录(这里是 yudada-backend),该目录内包含有 Dockerfile 文件。云托管平台会根据这个文件构建 Docker 镜像并启动容器。
配置完成后,点击发布,等待部署即可:
部署完成后,就可以通过云托管平台提供的公网域名进行访问和测试了。
如果部署遇到问题,注意查看部署日志,大概率是端口写错了或者依赖地址无法访问。可以参考鱼皮的 Bug 修复手册进行排查。
https://www.code-nav.cn/course/bug
云托管还提供了版本管理、查看日志、服务监控、云端调试、流水线部署等功能,可以观看鱼皮之前录制的云托管视频教程。
https://www.bilibili.com/video/BV1Je411X7TD
修改 request.ts
文件,区分开发环境和生产环境使用的接口地址。生产环境的接口地址就是上一步后端部署得到的公网域名。
代码如下:
// 是否是开发环境
export const isDev = process.env.NODE_ENV === "development";
// 创建 Axios 实例
const myAxios = axios.create({
baseURL: isDev ? "http://localhost:8101" : "改为自己的后端地址",
timeout: 60000,
withCredentials: true,
});
建议将项目发布到 GitHub 平台进行托管,敏感项目可以设置为 private。
先注册登录 Vercel 平台,授权 GitHub 后,点击新建项目,可以直接搜索到要部署的项目代码:
然后进入项目配置,由于本项目将前端、后端、小程序都放在了一起,所以必须指定项目目录为前端目录,然后平台会自动识别出这是一个 Vue 项目,并预设部署所需的命令。你也可以自行修改命令、添加环境变量等:
完成配置后,点击 Deploy 按钮,稍等片刻,即可完成部署。
部署完成后,就可以看到平台为我们生成的默认域名,可以直接访问。
访问前端页面,虽然能够获取到主页数据,但是无法正常登录。具体表现为用户登录后,回到主页,仍然处于未登录的状态。
按 F12 打开网络控制台,可以看到由于跨域问题导致 Cookie 没种上,后端就无法标识前端用户,所以查询不到登录态。
要解决这个问题,一种典型的方法是让前端请求相同的域名,使用 Nginx 通过路径(比如 /api)转发到真实的后端,可参考视频教程:https://www.bilibili.com/video/BV1eT421i7si/。
但由于我们前端和后端项目都使用了第三方平台部署,不方便再引入 Nginx,怎么办呢?
还有一种方法,是修改后端项目设置 Cookie 的配置,必须同时设置 SameSite=None 和 Secure=true。SameSite=None 表示 Cookie 将被发送到跨站请求中,而 Secure=true 确保 Cookie 只能通过 HTTPS 连接发送,从而提高了安全性。
修改 Spring Boot 生产环境配置文件如下:
server:
port: 8101
servlet:
session:
cookie:
# 解决跨域
same-site: none
secure: true
然后将修改推送到 GitHub 上,会自动触发微信云托管平台的流水线部署,稍等片刻后再次访问,这次项目的各操作都能够正常执行。
至此本项目已经部署完成,大家可以自行测试和验证项目的上线效果~
应。该。不。难。吧!