上線計畫，根本不用伺服器！

2024-06-06碼農

大家好，我是程式設計師魚皮。經過一個月的奮鬥（肝疼），我的新計畫魚答答 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, });