【保姆级】阿里云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)。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/898522.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LINUX网络编程API原型详细解析

1. 网络体系 1.1. 简介 网络采用分而治之的方法设计&#xff0c;将网络的功能划分为不同的模块&#xff0c;以分层的形式有机组合在一起。 每层实现不同的功能&#xff0c;其内部实现方法对外部其他层次来说是透明的。每层向上层提供服务&#xff0c;同时使用下层提供…

蓝桥杯 之 暴力回溯

文章目录 数字接龙小u的最大连续移动次数问题迷宫 在蓝桥杯中&#xff0c;十分喜欢考察对于网格的回溯的问题&#xff0c;对于这类的问题&#xff0c;常常会使用到这个DFS和BFS进行考察&#xff0c;不过无论怎么考察&#xff0c;都只是会在最基础的模本的基础上&#xff0c;根据…

微信小程序的业务域名配置(通过ingress网关的注解)

一、背景 微信小程序的业务域名配置&#xff08;通过kong网关的pre-function配置&#xff09;是依靠kong实现&#xff0c;本文将通过ingress网关实现。 而我们的服务是部署于阿里云K8S容器&#xff0c;当然内核与ingress无异。 找到k8s–>网络–>路由 二、ingress注解 …

Python数据可视化工具:六西格玛及其基础工具概览

在当今数据驱动的时代&#xff0c;数据分析和可视化工具成为了各行业优化流程、提升质量的关键手段。六西格玛&#xff08;Six Sigma&#xff09;作为一种以数据为基础、追求完美质量的管理理念&#xff0c;其实施依赖于一系列基础工具的灵活运用。而Python&#xff0c;凭借其强…

集群环境下Redis 商品库存系统设计

目录 环境实现基本结构代码业务代码主体库存管理模块 后续问题高并发临界值与乐观锁问题 完整代码总结后话 环境 我们现在要做商品秒杀系统。功能很简单&#xff0c;就是库存删减。用户先下单减库存&#xff0c;之后再进行扣款。 实现 基本结构代码 那么我们先看下如何搭建…

Spring MVC响应数据

handler方法分析 /*** TODO: 一个controller的方法是控制层的一个处理器,我们称为handler* TODO: handler需要使用RequestMapping/GetMapping系列,声明路径,在HandlerMapping中注册,供DS查找!* TODO: handler作用总结:* 1.接收请求参数(param,json,pathVariable,共享域等…

基于图像识别的医学影像大数据诊断系统的设计与实现

标题:基于图像识别的医学影像大数据诊断系统的设计与实现 内容:1.摘要 随着医学影像技术的快速发展&#xff0c;医学影像数据量呈爆炸式增长&#xff0c;传统的人工诊断方式在处理海量数据时效率低下且容易出现误差。本研究的目的是设计并实现一个基于图像识别的医学影像大数据…

Python散点图(Scatter Plot):数据探索的“第一张图表”

在数据可视化领域,散点图是一种强大而灵活的工具,它能够帮助我们直观地理解和探索数据集中变量之间的关系。本文将深入探讨散点图的核心原理、应用场景以及如何使用Python进行高效绘制。 后续几篇将介绍高级技巧、复杂应用场景。 Python散点图(Scatter Plot):高阶分析、散点…

【redis】在 Spring中操作 Redis

文章目录 基础设置依赖StringRedisTemplate库的封装 运行StringList删库 SetHashZset 基础设置 依赖 需要选择这个依赖 StringRedisTemplate // 后续 redis 测试的各种方法&#xff0c;都通过这个 Controller 提供的 http 接口来触发 RestController public class MyC…

微服务》》Kubernetes (K8S) 集群 安装

关闭交换空间 # 切换 超级管理员身份 # 查看交换空间 free -h # 关闭交换空间 swapoff -a避免开启启动交换空间 # 注释swap开头的行 vim /etc/fstab关闭防火墙 # 关闭防火墙 # 因为K8S 是集群形式存在的 至少三台 一主二从 &#xff08;一个master 两个node&#xff09…

HTTP和RPC的区别

RPC和 HTTP是两种常见的通信方式&#xff0c;它们在设计目标、使用场景和技术实现上有显著区别。以下是它们的详细对比&#xff1a; 1. 定义与核心思想 特性RPCHTTPRemote Procedure Call远程过程调用HyperText Transfer Protocol超文本传输协议定义一种协议或框架&#xff0…

MySQL 简记

MySQL 简记 mysql中的数据存储的结构是B树 其与B树的相同点是&#xff0c;B树一个节点也可以存放多条数据&#xff0c;并且从左到右依次增大&#xff1b;不同点是&#xff0c;B树的叶子结点之间也能相互连接。那么实际上是采取利用空间换区时间的策略。 那么B树的树结构like…

十七、实战开发 uni-app x 项目(仿京东)- 后端指南

前面我们已经用uniappx进行了前端实战学习 一、实战 开发uni-app x项目(仿京东)-规划-CSDN博客 二、实战 开发uni-app x项目(仿京东)-项目搭建-CSDN博客 三、实战开发 uni-app x 项目(仿京东)- 技术选型-CSDN博客 四、实战开发 uni-app x 项目(仿京东)- 页面设计-C…

Infura 简介

文章目录 Infura 简介Infura 的主要功能Infura 的替代方案&#xff08;类似服务&#xff09;AlchemyQuickNodeAnkrMoralisPocket Network 什么时候选择 Infura&#xff1f; Infura 简介 Infura 是一个 区块链基础设施即服务&#xff08;BaaS, Blockchain as a Service&#xf…

TouchSocket TcpService:构建高性能Tcp服务的终极利器

这里写目录标题 TouchSocket TCPService&#xff1a;构建高性能TCP服务的终极利器引言TCPService核心特性快速入门&#xff1a;5分钟搭建TCP服务1. 创建基础TCP服务2. 自定义插件处理数据 高级用法实战1. 客户端连接管理 性能与稳定性保障示例与源码结语 TouchSocket TCPServic…

Android Fresco 框架缓存模块源码深度剖析(二)

一、引言 在 Android 应用开发中&#xff0c;图片加载和处理是常见且重要的功能。频繁的图片加载不仅会消耗大量的网络流量&#xff0c;还会影响应用的性能和响应速度。因此&#xff0c;有效的缓存机制对于提升图片加载效率和用户体验至关重要。Fresco 是 Facebook 开源的一款…

springboot使用163发送自定义html格式的邮件

springboot使用163发送html格式的邮件 效果: 下面直接开始教学 注册邮箱&#xff0c;生成授权码 获取163邮箱的授权码&#xff0c;可以按照以下步骤操作&#xff1a; 登录163邮箱 打开浏览器&#xff0c;访问 163邮箱登录页面。 使用你的邮箱账号和密码登录。进入邮箱设置 登…

【Kafka】深入了解Kafka

集群的成员关系 Kafka使用Zookeeper维护集群的成员信息。 每一个broker都有一个唯一的标识&#xff0c;这个标识可以在配置文件中指定&#xff0c;也可以自动生成。当broker在启动时通过创建Zookeeper的临时节点把自己的ID注册到Zookeeper中。broker、控制器和其他一些动态系…

C#使用SnsPictureBox.dll绘制点,线段、圆、折线、多边形、测量尺等多种图形。

CSDN下载地址&#xff1a;https://download.csdn.net/download/sns1991sns/87726867 gitee下载地址:https://gitee.com/linsns/SnsPictrueBox 支持2种绘制方式&#xff1a;响应式和等待式。 一、使用响应式绘制图形 1、在窗口构造函数里添加绘制图形的完成响应函数 public…

Hugging Face预训练GPT微调ChatGPT(微调入门!新手友好!)

Hugging Face预训练GPT微调ChatGPT&#xff08;微调入门&#xff01;新手友好&#xff01;&#xff09; 在实战中&#xff0c;⼤多数情况下都不需要从0开始训练模型&#xff0c;⽽是使⽤“⼤⼚”或者其他研究者开源的已经训练好的⼤模型。 在各种⼤模型开源库中&#xff0c;最…