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