[系统运维] 前端自动化 Jenkins/TravisCI/CiecleCi

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 系统运维 -> 前端自动化 Jenkins/TravisCI/CiecleCi -> 正文阅读

[系统运维]前端自动化 Jenkins/TravisCI/CiecleCi

前端自动化

介绍

在这里插入图片描述

git push origin master -f

强制覆盖先前提交

CI/CD工具介绍

Jenkins搭建

搭建要点

在这里插入图片描述

dockerhub

https://hub.docker.com/
在这里插入图片描述

课程架构

在这里插入图片描述

docker run --name jenkins_zero -itd -p 11005:8080 -p 50000:50000 jenkins/jenkins:lts

在这里插入图片描述

docker logs -f jenkins_zero

在这里插入图片描述

firewall-cmd --add-port=11005/tcp --permanent

永久放行端口号

firewall-cmd --reload

重新加载防火墙规则

本地打开jenkins

在这里插入图片描述

出现错误重新来几次即可

jekins全局地址后面与gihub连接

离线安装插件方法(没有选择默认插件)

在这里插入图片描述

局域网安装插件

在这里插入图片描述

安装常用插件

在这里插入图片描述

备份镜像

在这里插入图片描述

tmp目录linux重启后数据会重置

在这里插入图片描述

备份容器方式2

在这里插入图片描述

备份完成

在这里插入图片描述

解压

在这里插入图片描述

备份容器方式3(最终方案)

在这里插入图片描述

搭建小结

在这里插入图片描述

Jenkins权限管理

全局安全配置

在这里插入图片描述

Role-Based Strategy

在这里插入图片描述

安全矩阵

在这里插入图片描述

一定要添加否则很麻烦

在这里插入图片描述

gilab(gitlab登录jenkins,用户记得密码更少)

在这里插入图片描述

部分用户无法登陆
在这里插入图片描述

退出jenkins登录

权限管理总结

Role-based Aurthorization Strategy

在这里插入图片描述

Jenkins与gitlab对接

创建gitlab项目(私有)

在这里插入图片描述

配置jenkins凭据

在这里插入图片描述

jenkins设置私钥

在这里插入图片描述

gilab设置公钥

在这里插入图片描述

配置

在这里插入图片描述

集成gitlab

在这里插入图片描述

jenkins

在这里插入图片描述

模拟

在这里插入图片描述

总结

在这里插入图片描述

DockerFile

方式一

在这里插入图片描述

前端项目配置Dockerfile

# build stage
FROM node:14 as build-stage

LABEL maintainer=rollsroycewkk@qq.com

# 创建一个工作目录
WORKDIR /app
COPY . .
RUN yarn install --registry=https://registry.npm.taobao.org

RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

在这里插入图片描述

前端项目配置.dockerignore

# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
.DS_Store
dist

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
.dockerignore
Dockerfile
*docker-compose*

# Logs
logs
*.log

# Runtime data
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
pids
*.pid
*.seed
.git
.hg
.svn

后端项目配置Dockerfile

FROM node:14

LABEL maintainer=rollsroycewkk@qq.com

# 创建一个工作目录
WORKDIR /app
COPY . .
RUN yarn install --registry=https://registry.npm.taobao.org

# 这里产生了dist目录,及server.bundle.js
RUN npm run build

EXPOSE 12005

# 上传配置一些静态图片资源
VOLUME ["/app/public"]

# 运行node
CMD ["node","dist/server.bundle.js"]

后端项目配置.dockerignore

# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
.DS_Store
dist

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
.dockerignore
Dockerfile
*docker-compose*

# Logs
logs
*.log

# Runtime data
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
pids
*.pid
*.seed
.git
.hg
.svn

在这里插入图片描述

端口号更改/与dockerfile暴露端口一直

在这里插入图片描述

前端项目生产地址配置

在这里插入图片描述

docker build -t web:1.0 .

打包前端镜像 -t就是 -tag .就是根目录下的dockerfile
在这里插入图片描述

Docker Desktop

在这里插入图片描述

镜像构建过程

在这里插入图片描述

docker images

在这里插入图片描述

docker run -itd --name web -p 11000:80 web:1.0

在这里插入图片描述

浏览器输入localhost:11000

在这里插入图片描述

Jenkins任务配置

前端项目配Deploy keys/Jenkins

在这里插入图片描述

gitlab项目配置webhooks

在这里插入图片描述

jenkins配置

在这里插入图片描述

模拟

在这里插入图片描述

后端项目配置jenkins

在这里插入图片描述

测试

在这里插入图片描述

注意(私钥)
在这里插入图片描述

gitlab是管理员配置shh 公钥启用即可
在这里插入图片描述

Shell脚本

简单添加变量

#!/bin/bash

CONTAINER=${container_name}
PORT=${port}

echo $CONTAINER
echo $PORT
echo "hello imooc-front"

在这里插入图片描述

docker build --no-cache -t ${image_name}:$ {tag}

在这里插入图片描述

docker run -itd --name $CONTAINER -p $PORT:80 ${image_name}:$ {tag}

在这里插入图片描述

docker run --name jenkins_one -itd -p 11006:8080 -p 50001:50000 -v /var/run/docker.sock:/var/run/docker.sock -v /usr/bin/docker:/usr/bin/docker jenkins/jenkins:lts

jenkins挂载docker

chmod 777 /var/run/docker.sock

授权
在这里插入图片描述

docker inspect 容器名称

所有镜像运行状态

在这里插入图片描述

正在运行就停止

#!/bin/bash

CONTAINER=${container_name}
PORT=${port}

# echo $CONTAINER
# echo $PORT

# 完成了镜像的构建
# docker build -t web:1.0 .
docker build --no-cache -t ${image_name}:${tag} .


# 跑起来我们的服务 -itd 在后台执行
docker run -itd --name $CONTAINER -p $PORT:80 ${image_name}:${tag}


# echo "hello imooc-front"


RUNNING=${docker inspect --format="{{ .State.Running}}" $CONTAINER 2 > /dev/null}

# 条件判断
if[ ! -n $RUNNING ]; then
  echo "$CONTTINER does not exit"
  return 1
fi

在这里插入图片描述

最终判断

#!/bin/bash

CONTAINER=${container_name}
PORT=${port}

# echo $CONTAINER
# echo $PORT

# 完成了镜像的构建
# docker build -t web:1.0 .
docker build --no-cache -t ${image_name}:${tag} .



# echo "hello imooc-front"


RUNNING=`docker inspect --format="{{ .State.Running}}" $CONTAINER `
echo $RUNNING

# 条件判断
if [ ! -n $RUNNING ]; then
  echo "$CONTAINER does not exit"
  return 1
fi

if [ "$RUNNING" == "false" ]; then
  echo "$CONTAINER is not running"
  return 2
else
  echo "$RUNNING is running"
  # delete same name container
  matchingStarted=$(docker ps --filter="name=$CONTAINER" -q | xargs)
  if [ -n $matchingStarted ]; then
    docker stop $matchingStarted
  fi
  
  matching=$(docker ps -a --filter="name=$CONTAINER" -q | xargs )
  if [ -n $matching ]; then
    docker rm $matching
  fi
fi

echo "RUNNING is ${RUNNING}"

# 跑起来我们的服务 -itd 在后台执行
docker run -itd --name $CONTAINER -p $PORT:80 ${image_name}:${tag}

在这里插入图片描述

放行

在这里插入图片描述

Travis CI

github登录travis并且创建github仓库

在这里插入图片描述

创建vue项目关联仓库

在这里插入图片描述

根目录配置travis.yml文件

language: node_js
node_js:
  - "14.15.1"

cache:
  yarn: true

install:
  - yarn intall

script:
  - npm run build

在这里插入图片描述

第一次提交代码

在这里插入图片描述

同步travis

在这里插入图片描述

手动构建一次

在这里插入图片描述

发布到github pages

在这里插入图片描述

deploy:
  provider: pages
  skip_cleanup: true
  local_dir: dist/
  github_token: $GITHUB_TOKEN  # Set in the settings page of your repository, as a secure variable
  keep_history: true
  name: "zeroWk"
  email: xxxxxxxx@163.com
  on:
    branch: master

根目录vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/travisci-demo" : "/"
}

在这里插入图片描述

github申请token

在这里插入图片描述

设置travis变量

在这里插入图片描述

提交代码

在这里插入图片描述

githubPages

在这里插入图片描述

总结

在这里插入图片描述

Ciecle CI

github登录

在这里插入图片描述

github创建仓库

要是公共项目才可以
在这里插入图片描述

本地拉取仓库

在这里插入图片描述

创建.circleci文件夹/config.yml

在这里插入图片描述

version: 2.1
jobs:
  build:
    docker:
      - image: circleci/node:14-browsers
    steps:
      - run: echo 'A first hello'
      - run: npm -v

上传代码

git add .
git commit -m “add”
git remote add origin https://github.com/xxxxx
git branch -M main
git push -u origin main

在这里插入图片描述

刷新circleci

在这里插入图片描述

set Up Project

在这里插入图片描述

vue create circle-demo1

创建一个项目,将demo1中的文件复制到demo中
在这里插入图片描述

设置远程拉取代码分支branchs

在这里插入图片描述

配置config.yml

version: 2.1
jobs:
  build:
    docker:
      - image: circleci/node:14-browsers
    only:
      - main
    steps:
      - add_ssh_keys:
          fingerprintts:
            - "13:12:94:88:0c:94:ec:70:f0:5e:3a:15:71:e9:d4:a0"
      - checkout 
      - run:
        name: Install
        command: yarn install
      - run
        name: Build
        command: yarn build

在这里插入图片描述

提交代码

在这里插入图片描述

缩进

保存/复用缓存

在这里插入图片描述

script文件件/deploy.sh 脚本

sh脚本就相当于一个函数 return不同值

#!/bin/sh
# 构想 https://gist.github.com/motemen/8595451

# 基于 https://github.com/eldarlabs/ghpages-deploy-script/blob/master/scripts/deploy-ghpages.sh
# MIT许可 https://github.com/eldarlabs/ghpages-deploy-script/blob/master/LICENSE

# abort the script if there is a non-zero error
set -e   // 相当与函数回调,如果没有xxx就退出

# 打印当前的工作路径
pwd
remote=$(git config remote.origin.url)   // 设置远程仓库地址

echo 'remote is: '$remote

# 新建一个发布的目录
mkdir gh-pages-branch
cd gh-pages-branch
# 创建的一个新的仓库
# 设置发布的用户名与邮箱
git config --global user.email "$GH_EMAIL" >/dev/null 2>&1
git config --global user.name "$GH_NAME" >/dev/null 2>&1
git init
git remote add --fetch origin "$remote"

echo 'email is: '$GH_EMAIL
echo 'name is: '$GH_NAME
echo 'sitesource is: '$siteSource

# 切换gh-pages分支
if git rev-parse --verify origin/gh-pages >/dev/null 2>&1; then
  git checkout gh-pages
  # 删除掉旧的文件内容
  git rm -rf .
else
  git checkout --orphan gh-pages
fi

# 把构建好的文件目录给拷贝进来
cp -a "../${siteSource}/." .

ls -la

# 把所有的文件添加到git
git add -A
# 添加一条提交内容
git commit --allow-empty -m "Deploy to GitHub pages [ci skip]"
# 推送文件
git push --force --quiet origin gh-pages
# 资源回收，删除临时分支与目录
cd ..
rm -rf gh-pages-branch

echo "Finished Deployment!"

在这里插入图片描述

配置脚本

在这里插入图片描述

circleci配置环境变量

在这里插入图片描述

重新构建

课程完整版config.yml

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:10
    branches:
      only:
        - master
    steps:
      - add_ssh_keys:
          fingerprints:
            - "94:e5:20:73:dd:b1:6a:51:e1:b5:fb:5f:24:82:0d:15"
      - checkout
      - restore_cache:
          keys:
            - dependencies_imooc
      - run:
          name: Install
          command: yarn install
      - save_cache:
          paths:
            - node_modules
          key: dependencies_imooc
      - run:
          name: Build
          command: yarn build
      - run:
          name: Prepare shell commands
          # shell chmod +x 赋予执行权限
          # 执行shell脚本
          command: chmod +x scripts/deploy.sh
      - run:
          name: Run Deploy to Github pages
          command: ./scripts/deploy.sh