【CI/CD】docker + Nginx自动化构建部署

CI/CD是什么

CI/CD 是持续集成(Continuous Integration)和持续部署(Continuous Deployment)或持续交付(Continuous Delivery)的缩写,它们是现代软件开发中用于自动化软件交付过程的实践。

1、持续集成(CI):指的是开发人员频繁(通常是每天多次)将代码变更合并到共享仓库中的实践。每次代码提交后,自动执行构建和测试,以尽早发现并解决集成错误,提高软件质量。

2、持续交付(CD - Continuous Delivery):在持续集成的基础上,自动将代码变更部署到更接近生产环境的测试环境中,以便进行更深入的测试和验证。持续交付确保软件可以随时被部署到生产环境中,但最终的部署动作可能需要手动触发。

3、持续部署(CD - Continuous Deployment):是持续交付的进一步实践,它指的是每当代码变更通过所有的测试阶段后,自动部署到生产环境中。这意味着软件的新版本可以快速且频繁地部署到生产环境中。

CI/CD 的目标是通过自动化测试和部署流程,减少软件开发和发布过程中的手动错误,提高开发效率和软件质量。这通常需要使用专门的工具和平台,如 Jenkins、Travis CI、CircleCI、GitLab CI/CD 和 GitHub Actions 等。

也就是说,我们可以通过我们的git版本控制平台如GitLab CI/CD、GitHub Actions、Gitea Actions等自动化执行某些操作(打包测试、部署、数据库版本控制的验证等),设置触发时机,每次PR时都会触发,便于提前暴露问题,提高效率等

怎么做

这里以GitHub Actions为例,其他的也都类似 GitHub Actions官网

GitHub Actions 的工作流配置文件使用 YAML(.yml 或 .yaml)格式。这些文件位于 GitHub 仓库的 .github/workflows 目录下。在这些 YAML 文件中,你可以定义事件触发器、作业、步骤以及每个步骤使用的动作。

运行器

附位置 =》 运行器

在这里插入图片描述

触发

仅列举常用的 附位置 =》 触发工作流

触发方式说明
pull_request创建合并请求时,此合并中的所有修改提交都会触发,不包括合并其他分支到主分支
push每次提交修改到远程分支时触发,包括合并其他分支到主分支

区别
其实二者的触发方式差不多,只不过范围不同,所以使用push时谨慎触发的条件
可以通过限制分支branch、标签tags、更改的文件路径path等

name: CI
on:
  push:
     ## 以下两个条件是或的关系 
    branches: 
      - master ## 只push到master分支时触发
    tags:
      - v**  ## 标签为以v打头的push触发
    path:
      - src/main/**  ## push的更改文件路径包含src/main下的文件时触发

格式

创建目录文件 .github/workflows/build.yaml,设置工作流触发时机为pull_request即创建合并请求后执行

name: CI  ## 工作流名称
## 工作流的触发时机
on: pull_request  ## 仅在PR(合并请求)触发    

## 作业(任务)
jobs:
  continuous_build: ## 作业名称
    runs-on: ubuntu-latest   ## 运行器环境

    steps: ## 作业步骤
      - name: test
      	run: echo "this is a test step" 

注意github actions 工作流中不允许使用中文
在这里插入图片描述

情景示例

此情景只适用于测试环境,所以只打包构建到自己的docker hub中。不可用于生产环境,生产环境的配置更复杂,感兴趣的可以了解CI/CD + k8s + rancher

1、在 合并请求 的生命周期,通过自动化工作流提前做一些测试

目标
在创建合并请求后,在合并之前,每次更改推送都自动执行打包测试(还可以执行 npm run test)

在这之前,由于Gihub Actions具有隔离性,运行在虚拟环境中,每次运行都是在一个干净的环境中开始。所以我们需要在其工作流中做像拉取新项目时的操作如重新npm i

创建目录文件 .github/workflows/build.yaml,设置工作流触发时机为pull_request

name: CI  
on: [pull_request]  

jobs:
  continuous_build: 
    runs-on: ubuntu-latest   

    steps:
      - name:  test
        run:  echo "this is a test step"
      
      - name: checkout  ## 检出代码
        uses: actions/checkout@v3 ## GitHub 提供用于在工作流中检出仓库

      - name: get-hash ## 计算hash,便于缓存
        uses: seepine/hash-files@v1
        id: get-hash
        with: 
          patterns: |-
            package.json
            package-lock.json

      - name: set cache ## 设置缓存
        id: npm-cache
        uses: actions/cache@v3
        with:
          key: coal-manage-${{ steps.get-hash.outputs.hash }} ## 使用项目名称 + 上一步骤的hash
          path: ${{ github.workspace }}/node_modules    ## 上下文表达式,获取执行的工作目录

      - name: install ## 安装依赖
        if: steps.npm-cache.outputs.cache-hit != 'true' ## 判断缓存
        run: npm i --registry=http://registry.npmmirror.com 
        
      - name: build
        run: npm run build

在这里插入图片描述

2、在合并分支到主分支时,通过自动化流程做一些部署

目标
每次合并到主分支或者每次打tag标签发布版本时,通过工作流帮我们打包项目并构建成docker 镜像推送到个人都docker hub中,我们可以直接在本地通过手敲或shell脚本部署。

ps:我也有尝试过直接通过工作流打包然后启动,但是直接访问运行的容器会有一些限制,因为 GitHub Actions 的运行器(runner)是在 GitHub 的虚拟环境中,而不是在本地网络或公开的服务器上。所以需要借助工具或者通过k8s部署,这里暂时不考虑

  • 准备docker/Dockerfile
FROM nginx:alpine

COPY dist/ /usr/share/nginx/html/

COPY nginx/nginx.conf /etc/nginx/nginx.conf

EXPOSE 9999
  • 准备docker/nginx.conf配置

worker_processes	1;

events {
	worker_connections	1024;
}

http {
	include		/etc/nginx/mime.types;
	default_type	application/octet-stream;

	sendfile	on;

	keepalive_timeout	65;

	server {
		listen	80;
		server_name	localhost;

		location / {
			root	/usr/share/nginx/html;
			index	index.html index.htm;
		}

		error_page	500 502 503 504 /50x.html;
		location = /50x.html {
			root	html;
		}

	}
}
  • 在 Docker Hub 创建访问令牌:

    1) 登录到 Docker Hub

    • 进入 Account Settings(账户设置)

    • 选择 Security(安全)选项卡

    • 创建一个新的 Access Token(访问令牌,需要读写操作)。

    • 记下生成的令牌,因为你将需要它来在 GitHub 中配置凭据。
      在这里插入图片描述

    2) 在 GitHub 仓库中设置 Secrets

    • 转到你的 GitHub 仓库页面。
    • 选择 Settings(设置)> Secrets(密钥)> Actions(操作)。
    • 点击 New repository secret(新建仓库密钥)按钮。
    • 创建两个密钥:一个用于 Docker Hub 的用户名(例如,DOCKER_USERNAME),另一个用于上一步中生成的访问令牌(例如,DOCKER_PASSWORD)。
      在这里插入图片描述
  • 创建目录文件 .github/workflows/deploy.yaml,设置触发时机为push master,即当代码被合并到远程仓库时到推送操作执行。

name: CI  
on: 
  push:
    branches:
      - main


jobs:
  continuous_build: 
    runs-on: ubuntu-latest   

    steps:
      
      - name: checkout
        uses: actions/checkout@v3 

      - name: get-hash
        uses: seepine/hash-files@v1
        id: get-hash
        with: 
          patterns: |-
            package.json
            package-lock.json

      - name: set cache
        id: npm-cache
        uses: actions/cache@v3
        with:
          key: coal-trade-web-manage-${{ steps.get-hash.outputs.hash }}
          path: ${{ github.workspace }}/node_modules   

      - name: install
        if: steps.npm-cache.outputs.cache-hit != 'true'
        run: npm i --registry=http://registry.npmmirror.com 
      
      - name: build
        run: npm run build
      
      - name: login to Docker Hub
        uses: docker/login-action@v1
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}

      - name: build and push docker image
        uses: docker/build-push-action@v4
        with:
          context: . ## 执行上下文
          file: docker/Dockerfile  ## Dockerfile路径
          push: true  ## 是否推送
          tags: ${{ secrets.DOCKER_USERNAME }}/my-dockerfile-nginx:${{ github.ref_name }}   ## 标签 docker hub username/镜像名称:版本号(git tag打的标签,不打就是分支名)

合并到主分支、每次打tag标签推送都会执行,执行成功后会显示✅
在这里插入图片描述

  • 可以登录自己的docker hub查看
    在这里插入图片描述

  • 登录docker hub将镜像拉取到本地,直接运行即可

docker login
# 根据提示输入用户名、密码

docker pull  <username>/<image name>:<tag>

在这里插入图片描述
启动成功返回容器id

# 本地9090端口(访问端口)映射 容器内的端口
docker run --name <container name> -p 9090:80 -d <username>/<image name>:<tag>

在这里插入图片描述
直接访问本地虚拟机ip+端口
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spark实时(五):InputSource数据源案例演示

文章目录 InputSource数据源案例演示 一、​​​​​​​File Source 1、读取text文件 2、读取csv文件 3、读取json文件 二、Socket Source 三、Rate Source InputSource数据源案例演示 在Spark2.0版本之后&#xff0c;DataFrame和Dataset可以表示静态有边界的数据&am…

【RT摩拳擦掌】RT600 4路音频同步输入1路TDM输出方案

【RT摩拳擦掌】RT600 4路音频同步输入1路TDM输出方案 一&#xff0c; 文章简介二&#xff0c;硬件平台构建2.1 音频源板2.2 音频收发板2.3 双板硬件连接 三&#xff0c;软件方案与软件实现3.1 方案实现3.2 软件代码实现3.2.1 4路I2S接收3.2.2 I2S DMA pingpong配置3.2.3 音频数…

Spring源码学习笔记之@Async源码

文章目录 一、简介二、异步任务Async的使用方法2.1、第一步、配置类上加EnableAsync注解2.2、第二步、自定义线程池2.2.1、方法一、不配置自定义线程池使用默认线程池2.2.2、方法二、使用AsyncConfigurer指定线程池2.2.3、方法三、使用自定义的线程池Excutor2.2.4、方法四、使用…

算法-----递归~~搜索~~回溯(宏观认识)

目录 1.什么是递归 1.1二叉树的遍历 1.2快速排序 1.3归并排序 2.为什么会用到递归 3.如何理解递归 4.如何写好一个递归 5.什么是搜索 5.1深度&#xff08;dfs&#xff09;优先遍历&优先搜索 5.2宽度&#xff08;bfs&#xff09;优先遍历&优先搜索 6.回溯 1.什…

《0基础》学习Python——第二十三讲__网络爬虫/<6>爬取哔哩哔哩视频

一、在B站上爬取一段视频&#xff08;B站视频有音频和视频两个部分&#xff09; 1、获取URL 注意&#xff1a;很多平台都有反爬取的机制&#xff0c;B站也不例外 首先按下F12找到第一条复制URL 2、UA伪装&#xff0c;下列图片中&#xff08;注意代码书写格式&#xff09; 3、Co…

redis的使用场景和持久化方式

redis的使用场景 热点数据的缓存。热点&#xff1a;频繁读取的数据。限时任务的操作&#xff1a;短信验证码。完成session共享的问题完成分布式锁。 redis的持久化方式 什么是持久化&#xff1a;把内存中的数据存储到磁盘的过程&#xff0c;同时也可以把磁盘中的数据加载到内存…

react开发-配置开发时候@指向SRC目录

这里写目录标题 配置开发时候指向SRC目录VScode编辑器给出提示总体1.配置react的 2.配置Vscode的1.配置react的2,配置VSCode的提示支持 配置开发时候指向SRC目录VScode编辑器给出提示 总体1.配置react的 2.配置Vscode的 1.配置react的 1. 我么需要下载一个webpack的插件 这样…

河南萌新联赛2024第(二)场:南阳理工学院

文章目录 链接 A. 国际旅行Ⅰ题意与思路代码 D.A*BBBB题意与思路代码 F.水灵灵的小学弟题意与思路代码 H.狼狼的备忘录题意与思路代码 I.重生之zbk要拿回属于他的一切题意与思路代码 J.这是签到题意与思路代码总结 链接 链接 A. 国际旅行Ⅰ 题意与思路 这是一个签到题&…

[红明谷CTF 2021]write_shell 1

目录 代码审计check()$_GET["action"] ?? "" 解题 代码审计 <?php error_reporting(0); highlight_file(__FILE__); function check($input){if(preg_match("/| |_|php|;|~|\\^|\\|eval|{|}/i",$input)){// if(preg_match("/| |_||p…

如何使用C#快速创建定时任务

原文链接&#xff1a;https://www.cnblogs.com/zhaotianff/p/17511040.html 使用Windows的计划任务功能可以创建定时任务。 使用schtasks.exe可以对计划任务进行管理&#xff0c;而不需要编写额外代码 这里掌握schtasks /CREATE 的几个核心参数就可以快速创建计划任务 /SC …

一些和颜色相关网站

1.中国传统色 2.网页颜色选择器 3.渐变色网站 4.多风格色卡生成 5.波浪生成 6.半透明磨砂框 7.色卡组合

OAK相机支持的图像传感器有哪些?

相机支持的传感器 在 RVC2 上&#xff0c;固件必须具有传感器配置才能支持给定的相机传感器。目前&#xff0c;我们支持下面列出的相机传感器的开箱即用&#xff08;固件中&#xff09;传感器配置。 名称 分辨率 传感器类型 尺寸 最大 帧率 IMX378 40563040 彩色 1/2.…

nginx通过nginx_upstream_check_module实现后端健康检查

1、简介说明 nginx是常用的反向代理和负载均衡服务&#xff0c;具有强大并发能力、稳定性、丰富的功能集、低资源的消耗。 nginx自身是没有针对后端节点健康检查的&#xff0c;但是可以通过默认自带的ngx_http_proxy_module 模块和ngx_http_upstream_module模块中的相关指令来完…

EmlogPro图片本地化插件修复版V2.0

Emlog图片本地化插件V2.0 全新优化升级版&#xff0c;并非emlog官方发布的收费插件&#xff0c;可以快速将文章中的远程图片链接下载到自己的服务器&#xff0c;避免远程站点图片防盗链、跑路等等问题&#xff01; 插件下载&#xff1a;img2local.zip 功能特色&#xff1a; …

Centos安装、迁移gitlab

Centos安装迁移gitlab 一、下载安装二、配置rb修改&#xff0c;起服务。三、访问web&#xff0c;个人偏好设置。四、数据迁移1、查看当前GitLab版本2、备份旧服务器的文件3、将上述备份文件拷贝到新服务器同一目录下&#xff0c;恢复GitLab4、停止新gitlab数据连接服务5、恢复备…

MySQL SQL 编程练习

目录 创建表并插入数据 查看表结构 创建触发器 创建INSERT 触发器 创建DELETE 触发器 创建更新触发器 创建存储过程 创建提取emp_new表所有员工姓名和工资的存储过程s1 创建存储过程s2&#xff0c;实现输入员工姓名后返回员工的年龄 创建一个存储过程s3&#xff0c;有2个参数&…

<数据集>AffectNet表情识别数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;29752张 标注数量(xml文件个数)&#xff1a;29752 标注数量(txt文件个数)&#xff1a;29752 标注类别数&#xff1a;7 标注类别名称&#xff1a;[anger,contempt,disgust,fear,happy,neutral,sad,surprise] 序号类…

在WPF中使用WebView2详解

Microsoft Edge WebView2 Microsoft Edge WebView2 控件允许在本机应用中嵌入 web 技术(HTML、CSS 以及 JavaScript)。 WebView2 控件使用 Microsoft Edge 作为绘制引擎&#xff0c;以在本机应用中显示 web 内容。 使用 WebView2 可以在本机应用的不同部分嵌入 Web 代码&…

【网络流】——初识(最大流)

网络流-最大流 基础信息引入一些概念基本性质 最大流定义 Ford–Fulkerson 增广Edmons−Karp算法Dinic 算法参考文献 基础信息 引入 假定现在有一个无限放水的自来水厂和一个无限收水的小区&#xff0c;他们之间有多条水管和一些节点构成。 每一条水管有三个属性&#xff1a…

【算法】单链表面试题

1.求单链表中有效节点的个数 //方法&#xff1a;获取到单链表的节点的个数(如果是带头节点的链表&#xff0c;不统计头节点)/**** param head 链表的头节点* return 返回有效节点的个数*/public static int getLength(HeroNode head) {if (head.next null) {return 0;}int le…