导航菜单

  • 0.api
  • 0.Async
  • 0.module
  • 1.ES2015
  • 2.Promise
  • 3.Node
  • 4.NodeInstall
  • 5.REPL
  • 6.NodeCore
  • 7.module&NPM
  • 8.Encoding
  • 9.Buffer
  • 10.fs
  • 11.Stream-1
  • 11.Stream-2
  • 11.Stream-3
  • 11.Stream-4
  • 12-Network-2
  • 12.NetWork-3
  • 12.Network-1
  • 13.tcp
  • 14.http-1
  • 14.http-2
  • 15.compress
  • 16.crypto
  • 17.process
  • 18.yargs
  • 19.cache
  • 20.action
  • 21.https
  • 22.cookie
  • 23.session
  • 24.express-1
  • 24.express-2
  • 24.express-3
  • 24.express-4
  • 25.koa-1
  • 26.webpack-1-basic
  • 26.webpack-2-optimize
  • 26.webpack-3-file
  • 26.webpack-4.tapable
  • 26.webpack-5-AST
  • 26.webpack-6-sources
  • 26.webpack-7-loader
  • 26.webpack-8-plugin
  • 26.webpack-9-hand
  • 26.webpack-10-prepare
  • 28.redux
  • 28.redux-jwt-back
  • 28.redux-jwt-front
  • 29.mongodb-1
  • 29.mongodb-2
  • 29.mongodb-3
  • 29.mongodb-4
  • 29.mongodb-5
  • 29.mongodb-6
  • 30.cms-1-mysql
  • 30.cms-2-mysql
  • 30.cms-3-mysql
  • 30.cms-4-nunjucks
  • 30.cms-5-mock
  • 30.cms-6-egg
  • 30.cms-7-api
  • 30.cms-8-roadhog
  • 30.cms-9-yaml
  • 30.cms-10-umi
  • 30.cms-12-dva
  • 30.cms-13-dva-ant
  • 30.cms-14-front
  • 30.cms-15-deploy
  • 31.dva
  • 31.cms-13-dva-antdesign
  • 33.redis
  • 34.unittest
  • 35.jwt
  • 36.websocket-1
  • 36.websocket-2
  • 38.chat-api-1
  • 38.chat-api-2
  • 38.chat-3
  • 38.chat-api-3
  • 38.chat
  • 38.chat2
  • 38.chat2
  • 39.crawl-0
  • 39.crawl-1
  • 39.crawl-2
  • 40.deploy
  • 41.safe
  • 42.test
  • 43.nginx
  • 44.enzyme
  • 45.docker
  • 46.elastic
  • 47.oauth
  • 48.wxpay
  • index
  • 52.UML
  • 53.design
  • index
  • 54.linux
  • 57.ts
  • 56.react-ssr
  • 58.ts_react
  • 59.ketang
  • 59.ketang2
  • 61.1.devops-linux
  • 61.2.devops-vi
  • 61.3.devops-user
  • 61.4.devops-auth
  • 61.5.devops-shell
  • 61.6.devops-install
  • 61.7.devops-system
  • 61.8.devops-service
  • 61.9.devops-network
  • 61.10.devops-nginx
  • 61.11.devops-docker
  • 61.12.devops-jekins
  • 61.13.devops-groovy
  • 61.14.devops-php
  • 61.15.devops-java
  • 61.16.devops-node
  • 61.17.devops-k8s
  • 62.1.react-basic
  • 62.2.react-state
  • 62.3.react-high
  • 62.4.react-optimize
  • 62.5.react-hooks
  • 62.6.react-immutable
  • 62.7.react-mobx
  • 62.8.react-source
  • 63.1.redux
  • 63.2.redux-middleware
  • 63.3.redux-hooks
  • 63.4.redux-saga
  • 63.5.redux-saga-hand
  • 64.1.router
  • 64.2.router-connected
  • 65.1.typescript
  • 65.2.typescript
  • 65.3.typescript
  • 65.4.antd
  • 65.4.definition
  • 66-1.vue-base
  • 66-2.vue-component
  • 66-3.vue-cli3.0
  • 66-4.$message组件
  • 66-5.Form组件
  • 66-6.tree
  • 66-7.vue-router-apply
  • 66-8.axios-apply
  • 66-9.vuex-apply
  • 66-10.jwt-vue
  • 66-11.vue-ssr
  • 66-12.nuxt-apply
  • 66-13.pwa
  • 66-14.vue单元测试
  • 66-15.权限校验
  • 67-1-network
  • 68-2-wireshark
  • 7.npm2
  • 69-hooks
  • 70-deploy
  • 71-hmr
  • 72.deploy
  • 73.import
  • 74.mobile
  • 75.webpack-1.文件分析
  • 75.webpack-2.loader
  • 75.webpack-3.源码流程
  • 75.webpack-4.tapable
  • 75.webpack-5.prepare
  • 75.webpack-6.resolve
  • 75.webpack-7.loader
  • 75.webpack-8.module
  • 75.webpack-9.chunk
  • 75.webpack-10.asset
  • 75.webpack-11.实现
  • 76.react_optimize
  • 77.ts_ketang_back
  • 77.ts_ketang_front
  • 78.vue-domdiff
  • 79.grammar
  • 80.tree
  • 81.axios
  • 82.1.react
  • 82.2.react-high
  • 82.3.react-router
  • 82.4.redux
  • 82.5.redux_middleware
  • 82.6.connected
  • 82.7.saga
  • 82.8.dva
  • 82.8.dva-source
  • 82.9.roadhog
  • 82.10.umi
  • 82.11.antdesign
  • 82.12.ketang-front
  • 82.12.ketang-back
  • 83.upload
  • 84.graphql
  • 85.antpro
  • 86.1.uml
  • 86.2.design
  • 87.postcss
  • 88.react16-1
  • 89.nextjs
  • 90.react-test
  • 91.react-ts
  • 92.rbac
  • 93.tsnode
  • 94.1.JavaScript
  • 94.2.JavaScript
  • 94.3.MODULE
  • 94.4.EventLoop
  • 94.5.文件上传
  • 94.6.https
  • 94.7. nginx
  • 95.1. react
  • 95.2.react
  • 96.1.react16
  • 96.2.fiber
  • 96.3.fiber
  • 97.serverless
  • 98.websocket
  • 100.1.react-basic
  • 101.1.monitor
  • 101.2.monitor
  • 102.java
  • 103.1.webpack-usage
  • 103.2.webpack-bundle
  • 103.3.webpack-ast
  • 103.4.webpack-flow
  • 103.5.webpack-loader
  • 103.6.webpack-tapable
  • 103.7.webpack-plugin
  • 103.8.webpack-optimize1
  • 103.9.webpack-optimize2
  • 103.10.webpack-hand
  • 103.11.webpack-hmr
  • 103.11.webpack5
  • 103.13.splitChunks
  • 103.14.webpack-sourcemap
  • 103.15.webpack-compiler1
  • 103.15.webpack-compiler2
  • 103.16.rollup.1
  • 103.16.rollup.2
  • 103.16.rollup.3
  • 103.16.vite.basic
  • 103.16.vite.source
  • 103.16.vite.plugin
  • 103.16.vite.1
  • 103.16.vite.2
  • 103.17.polyfill
  • 104.1.binary
  • 104.2.binary
  • 105.skeleton
  • 106.1.react
  • 106.2.react_hooks
  • 106.3.react_router
  • 106.4.redux
  • 106.5.redux_middleware
  • 106.6.connected-react-router
  • 106.6.redux-first-history
  • 106.7.redux-saga
  • 106.8.dva
  • 106.9.umi
  • 106.10.ketang
  • 106.11.antdesign
  • 106.12.antpro
  • 106.13.router-6
  • 106.14.ssr
  • 106.15.nextjs
  • 106.16.1.cms
  • 106.16.2.cms
  • 106.16.3.cms
  • 106.16.4.cms
  • 106.16.mobx
  • 106.17.fomily
  • 107.fiber
  • 108.http
  • 109.1.webpack_usage
  • 109.2.webpack_source
  • 109.3.dll
  • 110.nest.js
  • 111.xstate
  • 112.Form
  • 113.redux-saga
  • 114.react+typescript
  • 115.immer
  • 116.pro5
  • 117.css-loader
  • 118.1.umi-core
  • 119.2.module-federation
  • 119.1.module-federation
  • 120.create-react-app
  • 121.react-scripts
  • 122.react-optimize
  • 123.jsx-runtime
  • 124.next.js
  • 125.1.linux
  • 125.2.linux-vi
  • 125.3.linux-user
  • 125.4.linux-auth
  • 125.5.linux-shell
  • 125.6.linux-install
  • 125.7.linux-system
  • 125.8.linux-service
  • 125.9.linux-network
  • 125.10.nginx
  • 125.11.docker
  • 125.12.ci
  • 125.13.k8s
  • 125.14.k8s
  • 125.15.k8s
  • 125.16.k8s
  • 126.11.react-1
  • 126.12.react-2
  • 126.12.react-3
  • 126.12.react-4
  • 126.12.react-5
  • 126.12.react-6
  • 126.12.react-7
  • 126.12.react-8
  • 127.frontend
  • 128.rollup
  • 129.px2rem-loader
  • 130.health
  • 131.hooks
  • 132.keepalive
  • 133.vue-cli
  • 134.react18
  • 134.2.react18
  • 134.3.react18
  • 135.function
  • 136.toolkit
  • 137.lerna
  • 138.create-vite
  • 139.cli
  • 140.antd
  • 141.react-dnd
  • 142.1.link
  • 143.1.gulp
  • 143.2.stream
  • 143.3.gulp
  • 144.1.closure
  • 144.2.v8
  • 144.3.gc
  • 145.react-router-v6
  • 146.browser
  • 147.lighthouse
  • 148.1.basic
  • 148.2.basic
  • 148.3.basic
  • 148.4.basic
  • 148.5.basic
  • 149.1.vite
  • 149.2.vite
  • 149.3.vite
  • 149.4.vite
  • 150.react-window
  • 151.react-query
  • 152.useRequest
  • 153.transition
  • 154.emotion
  • 155.1.formily
  • 155.2.formily
  • 155.3.formily
  • 155.3.1.mobx.usage
  • 155.3.2.mobx.source
  • 156.vue-loader
  • 103.11.mf
  • 157.1.react18
  • 158.umi4
  • 159.rxjs
  • 159.rxjs2
  • 160.bff
  • 161.zustand
  • 162.vscode
  • 163.emp
  • 164.cors
  • 1.CICD
  • 2. 服务器
  • 3. 构建机CI
    • 3.1 安装docker
    • 3.2 安装 git
    • 3.3 安装 Jenkins
      • 3.3.1 安装java
      • 3.3.2 安装jenkins
      • 3.2.3 启动 Jenkins
      • 3.3.4 开放端口
      • 3.3.5 打开浏览器访问
      • 3.3.6 查看密码
      • 3.3.7 修改插件镜像
      • 3.3.8 添加到docker用户组里
      • 3.3.9 新建任务
    • 3.3 安装Nodejs
    • 3.4 集成 Git 仓库
      • 3.4.1 生成公钥私钥
      • 3.4.2 Gitee 配置公钥
      • 3.4.3 在Jenkins 配置私钥
    • 3.5 构建镜像
      • 3.5.1 编写 Dockerfile
      • 3.5.2 Jenkins配置脚本
      • 3.5.3 执行任务
    • 3.6 上传私有镜像库
      • 3.6.1 部署 Nexus 服务
      • 3.6.2 配置 Nexus
      • 3.6.3 创建Docker私服
      • 3.6.4 添加访问权限
      • 3.6.5 登录制品库
      • 3.6.6 推送镜像到制品库

1.CICD #

  • CI 的意思是 持续构建 。负责拉取代码库中的代码后,执行用户预置定义好的操作脚本,通过一系列编译操作构建出一个 制品 ,并将制品推送至到制品库里面。常用工具有 Gitlab CI,Github CI,Jenkins 等。这个环节不参与部署,只负责构建代码,然后保存构建物。构建物被称为 制品,保存制品的地方被称为 制品库
  • CD 则有2层含义: 持续部署(Continuous Deployment) 和 持续交付(Continuous Delivery) 。 持续交付 的概念是:将制品库的制品拿出后,部署在测试环境 / 交付给客户提前测试。 持续部署 则是将制品部署在生产环境。

2. 服务器 #

配置 技术栈 类型 标签
2核4G Jenkins + Nexus + Docker Cloud 构建机
2核4G Docker + Kubernetes Cloud kubernetes Master
1核1G Docker + Kubernetes Cloud kubernetes Node

3. 构建机CI #

0cafb0ad2ba216ef1c566ea98ce8cb30

3.1 安装docker #

yum install -y yum-utils device-mapper-persistent-data lvm2
sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
yum install docker-ce -y
systemctl start docker
systemctl enable docker

配置阿里云镜像源

sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": ["https://fwvjnv59.mirror.aliyuncs.com"]
}
EOF
# 重载所有修改过的配置文件
sudo systemctl daemon-reload
sudo systemctl restart docker

3.2 安装 git #

yum install git -y

3.3 安装 Jenkins #

  • Jenkins 是一个基于 Java 语言开发的持续构建工具平台,主要用于持续、自动的构建/测试你的软件和项目。它可以执行你预先设定好的设置和构建脚本,也可以和 Git 代码库做集成,实现自动触发和定时触发构建

3.3.1 安装java #

yum install -y java

3.3.2 安装jenkins #

sudo wget -O /etc/yum.repos.d/jenkins.repo https://img.zhufengpeixun.com/jenkins.repo
sudo rpm --import https://img.zhufengpeixun.com/jenkins.io.key
yum install jenkins -y

3.2.3 启动 Jenkins #

 systemctl start jenkins.service

3.3.4 开放端口 #

firewall-cmd --zone=public --add-port=8080/tcp --permanent
firewall-cmd --zone=public --add-port=50000/tcp --permanent
systemctl reload firewalld

3.3.5 打开浏览器访问 #

http://8.136.218.128:8080/

3.3.6 查看密码 #

cat /var/lib/jenkins/secrets/initialAdminPassword

3.3.7 修改插件镜像 #

sed -i 's/http:\/\/updates.jenkins-ci.org\/download/https:\/\/mirrors.tuna.tsinghua.edu.cn\/jenkins/g' /var/lib/jenkins/updates/default.json && sed -i 's/http:\/\/www.google.com/https:\/\/www.baidu.com/g' /var/lib/jenkins/updates/default.json

3.3.8 添加到docker用户组里 #

sudo gpasswd -a jenkins docker  #将当前用户添加至docker用户组
newgrp docker                 #更新docker用户组

3.3.9 新建任务 #

  • http://8.136.218.128:8080/view/all/newJob
  • 新建任务=>构建一个自由风格的软件项目=>配置>增加构建步骤
docker -v
docker pull node:latest

3.3 安装Nodejs #

  • 系统管理 => 插件管理 => 可选插件 =》 安装NodeJS插件
  • 全局工具配置 => NodeJS => 新增NodeJS
  • 任务的配置=>构建环境=>选中 Provide Node & npm bin/ folder to PATH

默认会拉取这个地址的安装包,但有可能会失败,失败之后可以重复,这个只需要执行一次就可以了

Unpacking https://nodejs.org/dist/v15.11.0/node-v15.11.0-linux-x64.tar.gz to /var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/nodejs15.11.0 on Jenkins

3.4 集成 Git 仓库 #

  • 项目仓库

3.4.1 生成公钥私钥 #

ssh-keygen -t rsa -C "zhufengnodejs@126.com"

3.4.2 Gitee 配置公钥 #

  • 设置=>安全设置 => SSH公钥
cat ~/.ssh/id_rsa.pub 

3.4.3 在Jenkins 配置私钥 #

  • 在 Jenkins 中,私钥/密码 等认证信息都是以 凭证 的方式管理的
  • 一定要确保先安装git yum install git -y
  • 配置 => 源码管理 => Git => Repositories
  • Credentials => 添加 => SSH Username with private key
    • Username zhufengnodejs@126.com

3.5 构建镜像 #

3.5.1 编写 Dockerfile #

Dockerfile

FROM nginx:1.15
COPY build /etc/nginx/html
COPY conf /etc/nginx/
WORKDIR /etc/nginx/html

conf\site

server {
    listen       80;
    server_name  _;
    root         /etc/nginx/html;
}

3.5.2 Jenkins配置脚本 #

  • 构建 => 执行Shell
#!/bin/sh

npm install --registry=https://registry.npm.taobao.org
npm run build
docker build -t react-project .

3.5.3 执行任务 #

3.6 上传私有镜像库 #

  • 镜像库就是集中存放镜像的一个文件服务
  • 镜像库在 CI/CD 中,又称 制品库
  • 构建后的产物称为制品,制品则要放到制品库做中转和版本管理
  • 常用平台有Nexus、Jfrog和Harbor或其他对象存储平台

3.6.1 部署 Nexus 服务 #

  • nexus-3.29.0-02 是nexus主程序文件夹
  • sonatype-work 则是数据文件
cd /usr/local
wget https://dependency-fe.oss-cn-beijing.aliyuncs.com/nexus-3.29.0-02-unix.tar.gz
tar -zxvf ./nexus-3.29.0-02-unix.tar.gz
cd nexus-3.29.0-02/bin
./nexus start

firewall-cmd --zone=public --add-port=8081/tcp --permanent
firewall-cmd --zone=public --add-port=8082/tcp --permanent

http://8.136.218.128:8081/

nexus 还支持停止,重启等命令。可以在 bin 目录下执行 ./nexus help 查看更多命令

3.6.2 配置 Nexus #

  • 可以使用admin用户登录Nexus
  • 注意请立即更改密码
  • Enable anonymous access
cat /root/sonatype-work/nexus3/admin.password 

3.6.3 创建Docker私服 #

  • 登录 => 齿轮图标 => Repositories => Create repository => docker(hosted) => HTTP(8082)

  • proxy: 此类型制品库原则上只下载,不允许用户推送

  • hosted:此类型制品库和 proxy 相反,原则上 只允许用户推送,不允许缓存。这里只存放自己的私有镜像或制品
  • group:此类型制品库可以将以上两种类型的制品库组合起来

3.6.4 添加访问权限 #

  • 齿轮图标 => Realms => Docker Bearer Token Realm => 添加到右边的 Active =>保存
  • copy http://118.190.142.109:8081/repository/dockcer-repository/

3.6.5 登录制品库 #

vi /etc/docker/daemon.json

{
  "insecure-registries" : [
    "8.136.218.128:8082"
  ],
  "registry-mirrors": ["https://fwvjnv59.mirror.aliyuncs.com"]
}
systemctl restart docker
docker login 8.136.218.128:8082 //注意此处要和insecure-registries里的地址一致
Username: admin
Password: 123456

3.6.6 推送镜像到制品库 #

  • 设置界面 => 构建环境 => 勾选 Use secret text(s) or file(s) => 新增选择 => Username and password (separated)
    • DOCKER_LOGIN_USERNAME
    • DOCKER_LOGIN_PASSWORD
  • 接着在下面指定凭据=>添加jenkins=>选择类型Username with password,输入用户名和密码然后点添加确定
#!/bin/sh -l

npm install --registry=https://registry.npm.taobao.org
npm run build
docker build -t 8.136.218.128:8082/react-project .
docker login -u $DOCKER_LOGIN_USERNAME -p $DOCKER_LOGIN_PASSWORD 8.136.218.128:8082
docker push 8.136.218.128:8082/react-project
  • 然后就可以查看镜像了,注意端口是8081
  • http://8.136.218.128:8081/#browse/browse:docker-repository

访问验证

请输入访问令牌

Token不正确,请重新输入