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

以下是通过阿里云CodeUp的Git仓库进行CI/CD配置的详细步骤，涵盖前端（Vue 3）和后端（Spring Boot）项目的自动化打包，并将前端打包结果嵌入到Nginx的Docker镜像中，以及将后端打包的JAR文件拷贝至Docker指定目录的完整流程：

前提条件

阿里云账号：已注册并登录阿里云CodeUp。
项目代码：前端（Vue 3）和后端（Spring Boot）项目代码已托管到CodeUp仓库。
Docker环境：本地或服务器上已安装Docker。
阿里云容器镜像服务：已创建并配置好容器镜像仓库。

步骤 1：配置CodeUp仓库

登录CodeUp：
- 使用阿里云账号登录CodeUp。
- 创建或选择一个前端Vue 3项目仓库和一个后端Spring Boot项目仓库。
设置Webhook（可选）：
- 在CodeUp仓库中，进入“设置”页面，找到“Webhooks”选项。
- 添加Webhook，指向阿里云CI/CD工具的Webhook地址（如果使用阿里云CI/CD工具）。

步骤 2：配置CI/CD流水线

2.1 配置前端项目CI/CD

创建前端Dockerfile：

在前端项目根目录下创建Dockerfile，内容如下：

# 基于官方Nginx镜像
FROM nginx:alpine# 将构建好的dist文件夹复制到Nginx的默认静态文件目录
COPY dist /usr/share/nginx/html# 暴露80端口
EXPOSE 80# 启动Nginx
CMD ["nginx", "-g", "daemon off;"]

配置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

创建后端Dockerfile：

在后端项目根目录下创建Dockerfile，内容如下：

# 基于官方OpenJDK镜像
FROM openjdk:17-jdk-alpine# 将构建好的JAR文件复制到镜像中
COPY target/*.jar app.jar# 暴露8080端口
EXPOSE 8080# 启动Spring Boot应用
CMD ["java", "-jar", "app.jar"]

配置CI/CD流水线：
- 在CodeUp中，进入项目的“CI/CD”页面，选择“流水线配置”。
- 创建流水线任务，配置如下：
  - 任务1：安装依赖并打包后端项目：
    - 配置任务，选择Java运行环境。
    - 构建命令：
```
mvn clean package
```
    - 设置触发条件为特定标签（如v*）。
  - 任务2：构建后端Docker镜像：
    - 使用Docker任务，将target目录下的*.jar文件打包为Docker镜像。
    - 镜像名称格式：<阿里云镜像仓库地址>/backend:<版本号>。
    - 推送到阿里云容器镜像服务。
  - 任务3：推送镜像到阿里云容器镜像服务：
    - 配置Docker镜像推送任务，将后端镜像推送到阿里云容器镜像服务。

步骤 3：配置环境变量

在CodeUp中配置环境变量：
- 在CodeUp项目的“设置”页面中，找到“环境变量”选项。
- 添加以下环境变量：
  - ALIYUN_ACR_USERNAME：阿里云容器镜像服务的用户名。
  - ALIYUN_ACR_PASSWORD：阿里云容器镜像服务的密码。
  - ALIYUN_ACR_REGISTRY：阿里云容器镜像服务的仓库地址。
- 这些环境变量将用于Docker镜像的推送和拉取操作。

步骤 4：测试CI/CD流程

推送代码到CodeUp：
- 在本地仓库中，为前端和后端项目分别打上特定标签（如v1.0.0）。
- 推送代码到CodeUp仓库：
```
git tag v1.0.0
git push origin v1.0.0
```
监控流水线执行：
- 在CodeUp的CI/CD页面，查看流水线的执行情况。
- 确保前端项目打包成功，并构建为Nginx Docker镜像。
- 确保后端项目打包成功，并构建为Spring Boot Docker镜像。
- 确保Docker镜像成功推送到阿里云容器镜像服务。

步骤 5：部署到Docker环境

拉取Docker镜像：

在目标服务器上，拉取前端和后端Docker镜像：

docker pull <阿里云镜像仓库地址>/frontend:v1.0.0
docker pull <阿里云镜像仓库地址>/backend:v1.0.0

运行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：优化和扩展

添加测试阶段：
- 在CI/CD流水线中，为前端和后端项目添加测试任务。
- 前端项目可以运行单元测试和端到端测试。
- 后端项目可以运行单元测试和集成测试。
配置多环境部署：
- 使用环境变量和配置文件，支持开发、测试和生产环境的部署。
- 例如，通过.env文件管理不同环境的配置。
集成更多工具：
- 根据项目需求，集成代码质量检查工具（如SonarQube）。
- 集成自动化测试工具（如Jest、Mocha）。