前端自动化 Jenkins/TravisCI/CiecleCi

探鱼不是鱼

于 2021-08-24 23:16:56 发布

阅读量619

点赞数 1

分类专栏： advance 文章标签： jenkins docker 运维

本文链接：https://blog.csdn.net/RollsRoycewk/article/details/119521345

版权

advance 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

前端自动化

介绍

在这里插入图片描述

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

github pages

项目 —> setting -->
在这里插入图片描述

上面的ciecle-demo找不到因为webpack配置原因
在这里插入图片描述

总结

在这里插入图片描述

探鱼不是鱼

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端自动化 Jenkins/TravisCI/CiecleCi

前端自动化介绍git push origin master -f强制覆盖先前提交CI/CDgithub登录github创建仓库要是公共项目才可以本地拉取仓库创建.circleci文件夹/config.ymlversion: 2.1jobs: build: docker: - image: circleci/node:14-browsers steps: - run: echo 'A first hello' - r
复制链接

扫一扫