大家好，我是程序員魚皮。經(jīng)過一個(gè)月的奮斗（肝疼），我的新項(xiàng)目魚答答 AI 答題應(yīng)用平臺(tái)已經(jīng)完結(jié)~

這是一個(gè)深入業(yè)務(wù)場(chǎng)景的企業(yè)級(jí)實(shí)戰(zhàn)項(xiàng)目，基于 Vue 3 + Spring Boot + Redis + ChatGLM AI + RxJava + SSE 實(shí)現(xiàn)。用戶可以基于 AI 快速制作并發(fā)布多種答題應(yīng)用，支持檢索和分享應(yīng)用、在線答題并基于評(píng)分算法或 AI 得到回答總結(jié)；管理員可以審核應(yīng)用、集中管理整站內(nèi)容，并進(jìn)行統(tǒng)計(jì)分析。

我也把這個(gè)項(xiàng)目部署上線了，感興趣的朋友可以訪問玩玩看~

https://yudada.code-nav.cn

這篇文章，主要給大家分享如何將項(xiàng)目部署上線。其實(shí)之前已經(jīng)分享過使用服務(wù)器部署的傳統(tǒng)方式，而這一次，我要分享一種更高效的部署方式，而且完全不需要用到服務(wù)器！不用輸入 Linux 命令！

推薦觀看視頻教程：https://www.bilibili.com/video/BV1Xm421N7Xj

以下為文字版：

一、部署規(guī)劃

1、獲取源碼

本項(xiàng)目分為開源版本和擴(kuò)展版本。

開源版本：https://github.com/liyupi/yudada

擴(kuò)展版本：前端補(bǔ)充了更多功能、后端使用了 Redisson 分布式鎖和 Sharding JDBC 分庫分表。

見編程導(dǎo)航項(xiàng)目教程的資料 => 項(xiàng)目源碼：https://www.code-nav.cn/course/1790274408835506178

2、部署方案

本項(xiàng)目前端使用 Vercel 平臺(tái)部署；后端使用微信云托管平臺(tái)，以容器的方式進(jìn)行部署。

Vercel 平臺(tái)可免費(fèi)部署前端項(xiàng)目，支持讀取 GitHub 倉庫的項(xiàng)目，根據(jù) package.json 文件自動(dòng)安裝依賴并執(zhí)行打包構(gòu)建命令，還會(huì)提供測(cè)試域名和正式的 HTTPS 域名供用戶訪問。此外，支持自定義域名、代碼變更時(shí)自動(dòng)部署、快速回滾版本、監(jiān)控等操作。

微信云托管平臺(tái)以容器的方式部署項(xiàng)目，支持讀取 GitHub 倉庫的項(xiàng)目，并根據(jù) Dockerfile 文件自動(dòng)構(gòu)建容器鏡像并啟動(dòng)，還會(huì)提供 HTTPS 公網(wǎng)域名供用戶訪問。此外，支持自定義域名、代碼變更時(shí)自動(dòng)部署、快速回滾版本、監(jiān)控等操作。注意，該平臺(tái)按量計(jì)費(fèi)，不用時(shí)記得停止服務(wù)。

相比于傳統(tǒng)的服務(wù)器方式部署，采用這些平臺(tái)部署項(xiàng)目的優(yōu)點(diǎn)是：

1. 不需要登錄服務(wù)器輸入命令、更方便
2. 更易于項(xiàng)目的擴(kuò)展和回滾
3. 平臺(tái)內(nèi)置監(jiān)控能力，更易于管理和運(yùn)維項(xiàng)目

3、地址規(guī)劃

前端：使用 Vercel 生成的默認(rèn)域名，訪問地址為 https://{域名}。

后端：使用微信云托管生成的默認(rèn)域名，訪問地址為 https://{域名}/api，實(shí)際運(yùn)行在 8101 端口。

數(shù)據(jù)庫：需自行安裝，一般為服務(wù)器的 3306 端口

Redis：需自行安裝，一般為服務(wù)器 6379 端口

4、注意事項(xiàng)

注意，由于前端和后端都是用平臺(tái)生成的默認(rèn)域名，二者不一致，將會(huì)出現(xiàn)跨域問題。雖然后端已經(jīng)通過 CorsConfig 全局支持了跨域，但 Cookie 無法跨域設(shè)置，會(huì)導(dǎo)致用戶無法正常登錄，所以后面需要進(jìn)行解決。

二、安裝依賴

本項(xiàng)目主要用到了 MySQL、Redis、對(duì)象存儲(chǔ)和 ChatGLM AI 依賴。

1、MySQL

在魚皮之前的教程中，已經(jīng)講過如何利用寶塔 Linux 面板快速安裝 MySQL 和 Redis，可參考視頻教程：https://www.bilibili.com/video/BV1eT421i7si/，此處不再贅述。

也可以使用微信云托管或者第三方云服務(wù)提供的 MySQL，不用自己安裝：

2、Redis

對(duì)本項(xiàng)目來說，如果使用了開源代碼，Redis 不是必須要安裝的；如果使用擴(kuò)展版的代碼，Redisson 分布式鎖依賴 Redis，所以必須要安裝 Redis，或者注釋掉分布式鎖和 Redis 相關(guān)的代碼。

3、對(duì)象存儲(chǔ)

需要在騰訊云的訪問控制中獲取到對(duì)象存儲(chǔ)所需的 key 和 secret。同時(shí)如果對(duì)象存儲(chǔ)配置開啟了防盜鏈，注意要將前端網(wǎng)站的域名添加到防盜鏈白名單中，否則圖片將無法加載。

4、ChatGLM AI

本項(xiàng)目使用了智譜 AI，需要在智譜 AI 開放平臺(tái)中獲取到調(diào)用 AI 所需的 key。

三、后端部署

1、數(shù)據(jù)庫初始化

進(jìn)入后端項(xiàng)目，首先利用 IDEA 自帶的數(shù)據(jù)庫管理能力，連接遠(yuǎn)程數(shù)據(jù)庫。

然后執(zhí)行 sql 目錄下的 create_table.sql 和 init_data.sql 文件，創(chuàng)建庫表和插入初始化數(shù)據(jù)。

成功看到了創(chuàng)建的庫表：

2、項(xiàng)目修改

配置修改

修改生產(chǎn)環(huán)境的配置文件 application-prod.yml，主要是數(shù)據(jù)庫、Redis、對(duì)象存儲(chǔ)和 ChatGLM API key 的配置。

還可以修改接口文檔的配置，設(shè)置需要密碼才能訪問，保護(hù)接口信息安全。

如果使用了擴(kuò)展版源碼，還需要編寫分庫分表的配置，一定不要遺漏！

要修改的部分配置如下：

spring:
  # 數(shù)據(jù)庫配置
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://{修改為你的數(shù)據(jù)庫地址}/yudada
    username: 修改為你的用戶名
    password: 修改為你的密碼
  # Redis 配置
  redis:
    database: 1
    host: 修改為你的地址
    port: 6379
    password: 修改為你的密碼
  # 分庫分表配置（開源代碼部署可忽略）
  shardingsphere:
    #數(shù)據(jù)源配置
    datasource:
      # 多數(shù)據(jù)源以逗號(hào)隔開即可
      names: yudada
      yudada:
        type: com.zaxxer.hikari.HikariDataSource
        driver-class-name: com.mysql.cj.jdbc.Driver
        jdbc-url: jdbc:mysql://{修改為你的數(shù)據(jù)庫地址}/yudada
        username: 修改為你的用戶名
        password: 修改為你的密碼

修改好配置后，可以將最新的代碼推送到 GitHub 上，但是 一定要注意 ！不要將包含密碼和隱私數(shù)據(jù)的代碼公開，建議新建一個(gè) private 倉庫 進(jìn)行推送！

Dockerfile

Dockerfile 類似于一個(gè)腳本文件，用于指定構(gòu)建 Docker 鏡像的方式，這里直接給大家提供，不同的項(xiàng)目進(jìn)行微調(diào)即可。

Dockerfile 代碼如下，一般將其放到后端項(xiàng)目的根目錄：

# Docker 鏡像構(gòu)建
# 選擇基礎(chǔ)鏡像
FROM maven:3.8.1-jdk-8-slim as builder

# 解決容器時(shí)期與真實(shí)時(shí)間相差 8 小時(shí)的問題
RUN ln -snf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo Asia/Shanghai > /etc/timezone

# 復(fù)制代碼到容器內(nèi)
WORKDIR /app
COPY pom.xml .
COPY src ./src

# 打包構(gòu)建
RUN mvn package -DskipTests

# 容器啟動(dòng)時(shí)運(yùn)行 jar 包
CMD ["java","-jar","/app/target/yudada-backend-0.0.1-SNAPSHOT.jar","--spring.profiles.active=prod"]

其實(shí)就是把部署所需的環(huán)境和操作命令寫在一起。

3、部署

首先進(jìn)入微信云托管平臺(tái)，創(chuàng)建環(huán)境并新建服務(wù)，注意要打開公網(wǎng)訪問：

然后編寫部署配置，選擇發(fā)布在 GitHub 上的后端代碼倉庫，并且一定要修改端口號(hào)和實(shí)際后端項(xiàng)目一致！

注意目標(biāo)目錄要選擇后端項(xiàng)目的根目錄（這里是 yudada-backend），該目錄內(nèi)包含有 Dockerfile 文件。云托管平臺(tái)會(huì)根據(jù)這個(gè)文件構(gòu)建 Docker 鏡像并啟動(dòng)容器。

配置完成后，點(diǎn)擊發(fā)布，等待部署即可：

部署完成后，就可以通過云托管平臺(tái)提供的公網(wǎng)域名進(jìn)行訪問和測(cè)試了。

如果部署遇到問題，注意查看部署日志，大概率是端口寫錯(cuò)了或者依賴地址無法訪問?？梢詤⒖剪~皮的 Bug 修復(fù)手冊(cè)進(jìn)行排查。

https://www.code-nav.cn/course/bug

云托管還提供了版本管理、查看日志、服務(wù)監(jiān)控、云端調(diào)試、流水線部署等功能，可以觀看魚皮之前錄制的云托管視頻教程。

https://www.bilibili.com/video/BV1Je411X7TD

四、前端部署

1、項(xiàng)目修改

修改 request.ts 文件，區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境使用的接口地址。生產(chǎn)環(huán)境的接口地址就是上一步后端部署得到的公網(wǎng)域名。

代碼如下：

// 是否是開發(fā)環(huán)境
export const isDev = process.env.NODE_ENV === "development";

// 創(chuàng)建 Axios 實(shí)例
const myAxios = axios.create({
  baseURL: isDev ? "http://localhost:8101" : "改為自己的后端地址",
  timeout: 60000,
  withCredentials: true,
});

2、部署

建議將項(xiàng)目發(fā)布到 GitHub 平臺(tái)進(jìn)行托管，敏感項(xiàng)目可以設(shè)置為 private。

先注冊(cè)登錄 Vercel 平臺(tái)，授權(quán) GitHub 后，點(diǎn)擊新建項(xiàng)目，可以直接搜索到要部署的項(xiàng)目代碼：

然后進(jìn)入項(xiàng)目配置，由于本項(xiàng)目將前端、后端、小程序都放在了一起，所以必須指定項(xiàng)目目錄為前端目錄，然后平臺(tái)會(huì)自動(dòng)識(shí)別出這是一個(gè) Vue 項(xiàng)目，并預(yù)設(shè)部署所需的命令。你也可以自行修改命令、添加環(huán)境變量等：

完成配置后，點(diǎn)擊 Deploy 按鈕，稍等片刻，即可完成部署。

部署完成后，就可以看到平臺(tái)為我們生成的默認(rèn)域名，可以直接訪問。

五、問題處理

解決 Cookie 跨域

訪問前端頁面，雖然能夠獲取到主頁數(shù)據(jù)，但是無法正常登錄。具體表現(xiàn)為用戶登錄后，回到主頁，仍然處于未登錄的狀態(tài)。

按 F12 打開網(wǎng)絡(luò)控制臺(tái)，可以看到由于跨域問題導(dǎo)致 Cookie 沒種上，后端就無法標(biāo)識(shí)前端用戶，所以查詢不到登錄態(tài)。

要解決這個(gè)問題，一種典型的方法是讓前端請(qǐng)求相同的域名，使用 Nginx 通過路徑（比如 /api）轉(zhuǎn)發(fā)到真實(shí)的后端，可參考視頻教程：https://www.bilibili.com/video/BV1eT421i7si/。

但由于我們前端和后端項(xiàng)目都使用了第三方平臺(tái)部署，不方便再引入 Nginx，怎么辦呢？

還有一種方法，是修改后端項(xiàng)目設(shè)置 Cookie 的配置，必須同時(shí)設(shè)置 SameSite=None 和 Secure=true。SameSite=None 表示 Cookie 將被發(fā)送到跨站請(qǐng)求中，而 Secure=true 確保 Cookie 只能通過 HTTPS 連接發(fā)送，從而提高了安全性。

修改 Spring Boot 生產(chǎn)環(huán)境配置文件如下：

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

然后將修改推送到 GitHub 上，會(huì)自動(dòng)觸發(fā)微信云托管平臺(tái)的流水線部署，稍等片刻后再次訪問，這次項(xiàng)目的各操作都能夠正常執(zhí)行。

至此本項(xiàng)目已經(jīng)部署完成，大家可以自行測(cè)試和驗(yàn)證項(xiàng)目的上線效果~

應(yīng)。該。不。難。吧！

???? 點(diǎn)擊下方閱讀原文，獲取魚皮往期編程干貨。