关于nginx:前端自动化集成部署交付实践

前言

随着前后端拆散利用模式的推广，前端我的项目可独立部署保护上线，不再仅仅将前端开发后打包的文件间接丢到一个文件目录下就完事大吉了，当初对前端来说也须要理解运维的相干常识，本文旨在介绍一些相干的运维概念以及一些前端运维的实际。

CI/CD

继续集成

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

继续交付

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

继续部署

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

继续集成、继续交付、继续部署是公布流程的不同阶段

Docker

容器 + 镜像

docker 是一个开源的利用容器引擎。开发者能够打包本人的利用到容器外面，而后迁徙到其余机器的 docker 利用中；开发者能够疾速制作一个本人自定义的镜像，疾速分享，也能够上传到镜像库进行存取和治理；容器之间互相隔离不抵触，硬件资源共享。

Docker in Docker

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

Jenkins

概念

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

Gitlab

概念

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

Nginx

概念

Nginx 采纳 C 进行编写，解决动态文件，索引文件以及主动索引; 关上文件描述符缓冲。无缓存的反向代理减速，简略的负载平衡和容错。FastCGI，简略的负载平衡和容错。模块化的构造。

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

Nexus

概念

制品仓库: 构建过程的输入物，包含软件包，测试报告，利用配置文件等可在服务器上间接 运行或可查看二进制模式的文件，通常称之为二进制软件制品。具备版本治理，历史治理，权限校验等性能。

Nexus 可在本人的局域网内搭建本人的近程仓库服务器，称为私服，私服服务器即是公司外部的 maven 近程仓库，私服还充当一个代理服务器，可从互联网地方仓库主动下载

• proxy 本地仓库，通常咱们会部署本人的构件到这一类型的仓库。比方公司的第二方库
• hosted 代理仓库，它们被用来代理近程的公共仓库，如 maven 地方仓库
• group 仓库组，用来合并多个 hosted/proxy 仓库，当你的我的项目心愿在多个 repository 应用资源时就不须要屡次援用了，只须要援用一个 group 即可

Ansible

概念

ansible 是基于 Python 开发的自动化运维工具。其劣势在于能够批量操作，基本原理是通过 ansible 的外围进行通过 ssh 传输的通信进行相干的散发解决，进行 user 与 host 的通信

Modules

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

Inventory

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

Playbook

工作剧本（又称工作集），编排定义 Ansible 工作集的配置文件，由 Ansible 程序顺次执行，yaml 格局

Plugins

插件，模块性能的补充，常有连贯类型插件，循环插件，变量插件，过滤插件，插件性能用的较少

API

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

实际

操作环境：linux/centos7

操作内容：一台 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

1. 配置 node 环境

系统管理 => 全局工具配置 => NodeJS

1. 新建工作

首页 => 左侧导航 => 新建工作 => 源码治理 + 构建环境 + 构建

构建这里抉择执行 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 密钥中

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 => 批改明码

1. 创立私服

齿轮图标 => Repositories => Create repository => 填写表单

装置 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

后果

总结

前端自动化部署可在外部开发及后续上线工程中进行运维管制，对前端来说也是越来越重要的能力，整体流程：

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

对于 gitlab 来说还有不同 stage 进行的不同阶段的 cicd 全流程服务，具体可依据团队的需要进行个性化的定制，如果前期我的项目宏大，比方采纳了微前端架构对不同框架如 angular、react、vue 进行不同档次部署交付，可配合 k8s(ps: 感兴趣的同学，可参看这篇文章 []()) 等进行更为严格的开发上线流程管制。

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

参考

• [[后端]gitlab 之 webhook 主动部署](https://www.jianshu.com/p/00b…
• Jenkins 与 Github 集成 webhook 配置
• k8s 部署 Vue 前端
• 云前端新物种 - 微前端体系

感激

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