【保姆级】阿里云codeup配置Git的CI/CD步骤

以下是通过阿里云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）。

通过以上步骤，可以实现前端和后端项目的自动化打包、镜像构建和部署，提高开发和运维效率。