以下是通過阿里云CodeUp的Git倉庫進行CI/CD配置的詳細步驟，涵蓋前端（Vue 3）和后端（Spring Boot）項目的自動化打包，并將前端打包結果嵌入到Nginx的Docker鏡像中，以及將后端打包的JAR文件拷貝至Docker指定目錄的完整流程：

前提條件

1. 阿里云賬號：已注冊并登錄阿里云CodeUp。
2. 項目代碼：前端（Vue 3）和后端（Spring Boot）項目代碼已托管到CodeUp倉庫。
3. Docker環境：本地或服務器上已安裝Docker。
4. 阿里云容器鏡像服務：已創建并配置好容器鏡像倉庫。

步驟 1：配置CodeUp倉庫

1. 登錄CodeUp：

   • 使用阿里云賬號登錄CodeUp。
   • 創建或選擇一個前端Vue 3項目倉庫和一個后端Spring Boot項目倉庫。

2. 設置Webhook（可選）：

   • 在CodeUp倉庫中，進入“設置”頁面，找到“Webhooks”選項。
   • 添加Webhook，指向阿里云CI/CD工具的Webhook地址（如果使用阿里云CI/CD工具）。

步驟 2：配置CI/CD流水線

2.1 配置前端項目CI/CD

1. 創建前端Dockerfile：

   • 在前端項目根目錄下創建Dockerfile，內容如下：

     # 基于官方Nginx鏡像
     FROM nginx:alpine# 將構建好的dist文件夾復制到Nginx的默認靜態文件目錄
     COPY dist /usr/share/nginx/html# 暴露80端口
     EXPOSE 80# 啟動Nginx
     CMD ["nginx", "-g", "daemon off;"]
     

2. 配置CI/CD流水線：

   • 在CodeUp中，進入項目的“CI/CD”頁面，選擇“流水線配置”。
   • 創建流水線任務，配置如下：
     • 任務1：安裝依賴并打包前端項目：
       • 配置任務，選擇Node.js運行環境。
       • 構建命令：

         npm install
         npm run build
         

       • 設置觸發條件為特定標簽（如v*）。
       • 配置輸出路徑為dist文件夾。
     • 任務2：構建前端Docker鏡像：
       • 使用Docker任務，將dist文件夾打包為Nginx鏡像。
       • 鏡像名稱格式：<阿里云鏡像倉庫地址>/frontend:<版本號>。
       • 推送到阿里云容器鏡像服務。
     • 任務3：推送鏡像到阿里云容器鏡像服務：
       • 配置Docker鏡像推送任務，將前端鏡像推送到阿里云容器鏡像服務。

2.2 配置后端項目CI/CD

1. 創建后端Dockerfile：

   • 在后端項目根目錄下創建Dockerfile，內容如下：

     # 基于官方OpenJDK鏡像
     FROM openjdk:17-jdk-alpine# 將構建好的JAR文件復制到鏡像中
     COPY target/*.jar app.jar# 暴露8080端口
     EXPOSE 8080# 啟動Spring Boot應用
     CMD ["java", "-jar", "app.jar"]
     

2. 配置CI/CD流水線：

   • 在CodeUp中，進入項目的“CI/CD”頁面，選擇“流水線配置”。
   • 創建流水線任務，配置如下：
     • 任務1：安裝依賴并打包后端項目：
       • 配置任務，選擇Java運行環境。
       • 構建命令：

         mvn clean package
         

       • 設置觸發條件為特定標簽（如v*）。
     • 任務2：構建后端Docker鏡像：
       • 使用Docker任務，將target目錄下的*.jar文件打包為Docker鏡像。
       • 鏡像名稱格式：<阿里云鏡像倉庫地址>/backend:<版本號>。
       • 推送到阿里云容器鏡像服務。
     • 任務3：推送鏡像到阿里云容器鏡像服務：
       • 配置Docker鏡像推送任務，將后端鏡像推送到阿里云容器鏡像服務。

步驟 3：配置環境變量

1. 在CodeUp中配置環境變量：
   • 在CodeUp項目的“設置”頁面中，找到“環境變量”選項。
   • 添加以下環境變量：
     • ALIYUN_ACR_USERNAME：阿里云容器鏡像服務的用戶名。
     • ALIYUN_ACR_PASSWORD：阿里云容器鏡像服務的密碼。
     • ALIYUN_ACR_REGISTRY：阿里云容器鏡像服務的倉庫地址。
   • 這些環境變量將用于Docker鏡像的推送和拉取操作。

步驟 4：測試CI/CD流程

1. 推送代碼到CodeUp：

   • 在本地倉庫中，為前端和后端項目分別打上特定標簽（如v1.0.0）。
   • 推送代碼到CodeUp倉庫：

     git tag v1.0.0
     git push origin v1.0.0
     

2. 監控流水線執行：

   • 在CodeUp的CI/CD頁面，查看流水線的執行情況。
   • 確保前端項目打包成功，并構建為Nginx Docker鏡像。
   • 確保后端項目打包成功，并構建為Spring Boot Docker鏡像。
   • 確保Docker鏡像成功推送到阿里云容器鏡像服務。

步驟 5：部署到Docker環境

1. 拉取Docker鏡像：

   • 在目標服務器上，拉取前端和后端Docker鏡像：

     docker pull <阿里云鏡像倉庫地址>/frontend:v1.0.0
     docker pull <阿里云鏡像倉庫地址>/backend:v1.0.0
     

2. 運行Docker容器：

   • 啟動前端容器：

     docker run -d -p 80:80 --name frontend <阿里云鏡像倉庫地址>/frontend:v1.0.0
     

   • 啟動后端容器：

     docker run -d -p 8080:8080 --name backend <阿里云鏡像倉庫地址>/backend:v1.0.0
     

步驟 6：優化和擴展

1. 添加測試階段：

   • 在CI/CD流水線中，為前端和后端項目添加測試任務。
   • 前端項目可以運行單元測試和端到端測試。
   • 后端項目可以運行單元測試和集成測試。

2. 配置多環境部署：

   • 使用環境變量和配置文件，支持開發、測試和生產環境的部署。
   • 例如，通過.env文件管理不同環境的配置。

3. 集成更多工具：

   • 根據項目需求，集成代碼質量檢查工具（如SonarQube）。
   • 集成自動化測試工具（如Jest、Mocha）。

通過以上步驟，可以實現前端和后端項目的自動化打包、鏡像構建和部署，提高開發和運維效率。