前端自动化集成部署交付实践

时间  2020-08-07
标签 前端 自动化 集成 部署 交付 实践 栏目 测试自动化 繁體版
原文   原文链接

image

前言

随着先后端分离应用模式的推广，前端项目可独立部署维护上线，再也不仅仅将前端开发后打包的文件直接丢到一个文件目录下就完事大吉了，如今对前端来讲也须要了解运维的相关知识，本文旨在介绍一些相关的运维概念以及一些前端运维的实践。html

CI/CD

cicd

持续集成

continuous integration 持续集成是一种软件实践，流程为：开发 => 打包 => 集成 => 测试

持续交付

continuous delivery 持续交付是一种软件工程手法，流程为：测试 => 发布

持续部署

continous deployment 持续部署是在持续交付的管道中发布版本给最终用户的一种软件工程流程，流程为：发布 => 部署上线

持续集成、持续交付、持续部署是发布流程的不一样阶段前端

Docker

docker

容器 + 镜像

docker 是一个开源的应用容器引擎。开发者能够打包本身的应用到容器里面，而后迁移到其余机器的 docker 应用中；开发者能够快速制做一个本身自定义的镜像，快速分享，也能够上传到镜像库进行存取和管理；容器之间相互隔离不冲突，硬件资源共享。

Docker in Docker

容器内仅部署 docker 命令行工具（做为客户端），实际执行交由宿主机内的 docker-engine（服务器）

Jenkins

jenkins

概念

Jenkins 是一个基于Java语言开发的CI持续构建工具，主要用于持续、自动的构建/测试软件项目。它能够执行你预先设定好的设置和脚本，也能够和 Git工具作集成，实现自动触发和定时触发器构建。

Gitlab

gitlab

概念

gitlab既是一种服务，也是一种软件。既能够在gitlab.com上去租用服务，也能够下载gitlab阮籍你本身搭建服务

Nginx

nginx

概念

Nginx采用C进行编写，处理静态文件，索引文件以及自动索引;打开文件描述符缓冲。无缓存的反向代理加速，简单的负载均衡和容错。FastCGI，简单的负载均衡和容错。模块化的结构。

Nginx是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务vue

Nexus

nexus

概念

制品仓库: 构建过程的输出物，包括软件包，测试报告，应用配置文件等可在服务器上直接 运行或可查看二进制形式的文件，一般称之为二进制软件制品。具备版本管理，历史管理，权限校验等功能。

Nexus可在本身的局域网内搭建本身的远程仓库服务器，称为私服，私服服务器便是公司内部的maven远程仓库，私服还充当一个代理服务器，可从互联网中央仓库自动下载node

  • proxy 本地仓库，一般咱们会部署本身的构件到这一类型的仓库。好比公司的第二方库
  • hosted 代理仓库，它们被用来代理远程的公共仓库，如maven中央仓库
  • group 仓库组，用来合并多个hosted/proxy仓库，当你的项目但愿在多个repository使用资源时就不须要屡次引用了，只须要引用一个group便可

Ansible

ansible

概念

ansible是基于Python开发的自动化运维工具。其优点在于能够批量操做，基本原理是经过ansible的核心进行经过ssh传输的通讯进行相关的分发处理，进行user与host的通讯

Modules

执行命令的功能模块，Ansible2.3版本为止，共有1039个模块。还能够自定义模块react

Inventory

管理主机的清单，默认是/etc/ansible/hosts文件linux

Playbook

任务剧本（又称任务集），编排定义Ansible任务集的配置文件，由Ansible顺序依次执行，yaml格式nginx

Plugins

插件，模块功能的补充，常有链接类型插件，循环插件，变量插件，过滤插件，插件功能用的较少git

API

提供给第三方程序调用的应用程序编程接口github

实践

操做环境： linux/centos7web

操做内容： 一台 gitlab + jenkins + ansible 服务器推送多台 nginx 服务器

docker

  1. 安装依赖
yum install -y yum-utils device-mapper-persistent-data lvm2
  1. 使用阿里云源安装
sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

yum install docker-ce
  1. 启动docker
systemctl start docker

systemctl enable docker
  1. 可配置阿里云容器镜像加速器

阿里云容器镜像服务

gitlab + jenkins + ansible

安装jenkins

  1. 安装防火墙
yum install firewalld systemd -y
service firewalld start
firewall-cmd --permanent --add-service=http
firewall-cmd --permanent --add-rich-rule="rule family="ipv4" source address="xxx.xx.x.x/16" accept"
systemctl reload firewalld
  1. 编写Dockerfile
FROM jenkins/jenkins
USER root
# 清除了基础镜像设置的源，切换成阿里云源
RUN echo '' > /etc/apt/sources.list.d/jessie-backports.list \
  && echo "deb http://mirrors.aliyun.com/debian jessie main contrib non-free" > /etc/apt/sources.list \
  && echo "deb http://mirrors.aliyun.com/debian jessie-updates main contrib non-free" >> /etc/apt/sources.list \
  && echo "deb http://mirrors.aliyun.com/debian-security jessie/updates main contrib non-free" >> /etc/apt/sources.list
# 更新源并安装缺乏的包
RUN apt-get update && apt-get install -y libltdl7
ARG dockerGid=999

RUN echo "docker:x:${dockerGid}:jenkins" >> /etc/group
  1. 构建jenkins镜像
docker build -t local/jenkins .
  1. 启动镜像

新建/home/jenkins/目录，将jenkins目录外挂到宿主机内

mkdir /home/jenkins

chown -R 1000 /home/jenkins/

镜像建立容器并启动

docker run -itd --name jenkins -p 8080:8080 -p 50000:50000 \
-v /var/run/docker.sock:/var/run/docker.sock \
-v /usr/bin/docker:/usr/bin/docker \
-v /home/jenkins:/var/jenkins_home \
--restart always \
--user root local/jenkins
  1. 启动jenkins

释放8080和50000端口

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

systemctl reload firewalld
  1. 初始化jenkins配置
修改密码 => 下载插件 => 重启容器

初始化jenkins后会有一个初始密码，可经过docker exec -it jenkins /bin/bash进入容器后查看cat /var/jenkins_home/secrets/initialAdminPassword

  1. 配置公钥私钥

进入jenkins容器，经过ssh-keygen生成公钥私钥

docker exec -it jenkins /bin/bash
ssh-keygen -t rsa

进入~/.ssh查看id_rsa和id_rsa.pub，为jenkins配置

系统管理 => 安全 => Manage Credentials => 全局 => 添加凭据 => 选择SSH Username with private key

cicd01

cicd02

cicd03

  1. 配置node环境
系统管理 => 全局工具配置 => NodeJS

cicd04

  1. 新建任务
首页 => 左侧导航 => 新建任务 => 源码管理 + 构建环境 + 构建

cicd05

cicd06

构建这里选择执行shell，可将命令写入其中，这里镜像名称一般为jenkins服务器地址，后边加时间戳能够避免重名

set -e
timestamp=`date '+%Y%m%d%H%M%S'`

node -v
npm -v

rm -rf node_modules package-lock.json

npm install

npm run build

(docker ps | grep ansible) && (docker rm -f ansible)

# 编译docker镜像
docker build -t xxx.xx.xx.xxx:8082/fe/nginx-fe-$timestamp .

# 推送docker镜像到制品库
docker push xxx.xx.xx.xxx:8082/fe/nginx-fe-$timestamp

docker run -id --name ansible ansible:t1

docker exec -i ansible ansible-playbook --syntax-check /root/playbook.yml

docker exec -i ansible ansible-playbook -e "timestamp=$timestamp" /root/playbook.yml

docker rm -f ansible
  1. 登陆制品库

修改daemon.json

vi /etc/docker/daemon.json

{
    "insecure-registries": [
        "xxx.xx.xx.xxx:8082",
        "xxx.xx.xx.xxx:8081"
    ]
}

重启docker

systemctl daemon-reload
systemctl restart docker

docker login登陆

docker exec -it jenkins /bin/bash

docker login 服务器ip:端口
exit

安装gitlab

  1. 拉取gitlab镜像
docker pull gitlab/gitlab-ce
  1. 建立gitlab容器

建立gitlab工做目录

mkdir /home/gitlab

启动gitlab容器

docker run -itd -p 443:443 \
-p 8899:8899 \
-p 333:333 \
--name gitlab \
--restart always \
-v /home/gitlab/config:/etc/gitlab \
-v /home/gitlab/logs:/var/log/gitlab \
-v /home/gitlab/data:/var/opt/gitlab \
gitlab/gitlab-ce
  1. 修改防火墙
firewall-cmd --zone=public --add-port=333/tcp --permanent
firewall-cmd --zone=public --add-port=8899/tcp --permanent

systemctl reload firewalld
  1. 修改gitlab配置文件

修改配置文件

vi /home/gitlab/config/gitlab.rb

exteranl_url 'http://外部访问域名/地址:端口'
gitlab_rails['gitlab_ssh_host'] = 'SSH外部访问域名/地址'
gitlab_rails['gitlab_shell_ssh_port'] = SSH端口

修改ssh端口

docker exec -it gitlab /bin/bash

vi /assets/sshd_config
vi /etc/ssh/sshd_config

重启gitlab

docker restart gitlab
  1. 启动gitlab
宿主机:端口 => 修改密码

修改gitlab密码

docker exec -it gitlab /bin/bash

gitlab-rails console production

user = Uer.where(id:1).first
user.password = "xxxxx"
user.password_confirmation = "xxxxx"

user.save!

quit
  1. 配置jenkins的公钥
登陆gitlab => 点击头像 => 设置 => SSH密钥

将jenkins中查到的~/.ssh/id_rsa.pub添加到gitlab的ssh密钥中

cicd07

  1. 在前端项目根目录下添加Dockerfile
FROM nginx:1.15-alpine
COPY dist /usr/share/nginx/html
WORKDIR /usr/share/nginx/html
  1. 新建仓库 + 配置webhook

新建仓库后，配置webhook，可经过git相关命令进行自动化部署，可参考这篇文章[[后端]gitlab之webhook自动部署](https://www.jianshu.com/p/00b...，github的webhook配置可参考这篇Jenkins与Github集成 webhook配置

安装nexus

  1. 拉取nexus镜像
docker pull sonatype/nexus3
  1. 建立nexus容器

建立nexus工做目录

mkdir /home/nexus && chown -R 200 /home/nexus

启动容器

docker run -d -p 8081:8081 -P 8082:8082 \
--name nexus \
-v /home/nexus:/nexus-data \
--restart always \
sonatype/nexus3
  1. 修改防火墙
firewall-cmd --zone=public --add-port=8081/tcp --permanent
firewall-cmd --zone=public --add-port=8082/tcp --permanent
  1. 启动nexus

查看日志

docker logs -f nexus
  1. 修改配置
进入nexus => 修改密码

cicd08

cicd09

  1. 建立私服
齿轮图标 => Repositories => Create repository => 填写表单

cicd10

cicd11

安装ansible

  1. 建立ansible工做目录
mkdir /home/ansible-file && cd /home/ansible-file

mkdir ssh
touch Dockerfile
touch hosts
touch playbook.yml
  1. 将配置的公钥私钥放入ssh文件夹下
cp -r ~/.ssh/* /home/ansible-file/ssh/
  1. 编辑Dockerfile
FROM centos:7
RUN yum -y install wget curl vim openssh-clients
RUN wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo
RUN yum clean all
RUN yum makecache

COPY ssh /root/.ssh/

RUN chmod 755 ~/.ssh/
RUN chmod 600 ~/.ssh/id_rsa ~/.ssh/id_rsa.pub
RUN yum -y install ansible

COPY hosts /etc/ansible/

RUN sed -i 's/^#host_key_checking = False/host_key_checking = False/' /etc/ansible/ansible.cfg
RUN ansible --version

COPY playbook.yml /root/
  1. 编辑hosts 多台服务器ip
[fe-servers]
xxx.xx.xx.xxx
xxx.xx.xx.xxx
xxx.xx.xx.xxx
  1. 编辑playbook
---
- hosts: all
  remote_user: root
  vars: 
    timestamp: 20200806165833
  tasks:
    - name: docker pull new images
      shell: 'chdir=~ docker pull xxx.xx.xx.xxx:8082/fe/nginx-fe-{{timestamp}}
    - name: docker rmf
      shell: 'chdir=~ docker ps | grep xxx && docker rm -f xxx'
      ignore_errors: true
    - name: docker run
      shell: 'chdir=~ docker run -p 80:80 -itd --name xxx xxx.xx.xx.xxx:8082/fe/nginx-fe-{{timestamp}}'

nginx

  1. 拉取nginx镜像
docker pull nginx
  1. 建立nginx容器

建立nginx工做目录

mkdir /home/nginx

启动容器

docker run -itd -p 80:80 --name xxx \
-v /home/nginx/html:/usr/share/nginx/html \
-v /home/nginx/logs:/var/log/nginx \
--restart always \
nginx
  1. 公钥私钥

使用ssh-keygen建立公钥私钥

ssh-keygen -t rsa

在.ssh文件夹下建立authorized_keys，将jenkins的公钥放入其中

cd .ssh/
touch authorized_keys

vi authorized_keys
  1. 登陆制品库

修改daemon.json

vi /etc/docker/daemon.json

{
    "insecure-registries": [
        "xxx.xx.xx.xxx:8082",
        "xxx.xx.xx.xxx:8081"
    ]
}

重启docker

systemctl daemon-reload
systemctl restart docker

docker login登陆

docker exec -it nginx /bin/bash

docker login 服务器ip:端口
exit

结果

example

总结

前端自动化部署可在内部开发及后续上线工程中进行运维控制，对前端来讲也是愈来愈重要的能力，总体流程：

前端git提交 => gitlab/github更新 => 触发webhook命令 => jenkins构建 => nexus制品库生成 => ansible分发 => 多台nginx交付

对于gitlab来讲还有不一样stage进行的不一样阶段的cicd全流程服务，具体可根据团队的需求进行个性化的定制，若是后期项目庞大，好比采用了微前端架构对不一样框架如angular、react、vue进行不一样层次部署交付，可配合k8s(ps: 感兴趣的同窗，可参看这篇文章[]())等进行更为严格的开发上线流程控制。

总之，在大前端的趋势下，前端延伸的方向也更为多样，对于咱们的要求也会愈来愈多，工程化、智能化、可视化等等，要在某一领域有所建树，咱们都还要不断努力才行，加油！与君共勉！

参考

感谢

在此，特别感谢码云前端王圣松大佬的分享，此为其我的历程分享一位00后前端2年经验的成长历程，感兴趣的同窗能够关注一波

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程