这样上线项目，轻轻松松~

程序员鱼皮

发布于 2024-08-08 10:39:58

1080

发布于 2024-08-08 10:39:58

文章被收录于专栏：鱼皮客栈

大家好，我是程序员鱼皮。经过一个月的奋斗（肝疼），我的新项目鱼答答 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 的配置。

还可以修改接口文档的配置，设置需要密码才能访问，保护接口信息安全。

如果使用了扩展版源码，还需要编写分库分表的配置，一定不要遗漏！

要修改的部分配置如下：

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 代码如下，一般将其放到后端项目的根目录：

# 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 文件，区分开发环境和生产环境使用的接口地址。生产环境的接口地址就是上一步后端部署得到的公网域名。

代码如下：

// 是否是开发环境
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 生产环境配置文件如下：

server:
  port: 8101
  servlet:
    session:
      cookie:
        # 解决跨域
        same-site: none
        secure: true

然后将修改推送到 GitHub 上，会自动触发微信云托管平台的流水线部署，稍等片刻后再次访问，这次项目的各操作都能够正常执行。

至此本项目已经部署完成，大家可以自行测试和验证项目的上线效果~

应。该。不。难。吧！

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2024-08-07，如有侵权请联系 cloudcommunity@tencent.com 删除

前端

本文分享自程序员鱼皮微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度