孩子咳嗽老不好，又看源码解析，又难吸收，又忘的快，怎么办？
不如别学代码了，耍耍玩具？
本文宗旨：没有试过的也能跟着学会
准备工具：
- 一台电脑
- 服务器
- 一双手
话说在前头
首先，我也是第一次搞，因为以前都是有运维布置，接下来，我们就是完全采用有手就行的方法，使用jenkins+gitlab+docker+nignx的方式去对一个前端项目进行服务器部署，这里的前端项目demo使用umi。
另外我也是借鉴了10几篇文章的情况下才完成了本文的全程操作，有些文章总是怪怪的，只有个大体步骤，出现各种问题，第一次构建成功之前大约构建失败16，7次。
大致回首先分成3个部分：
- 使用jenkins+gitlab+nginx能首先达成代码自动集成部署的目的。（本文）
- 加入docker，最终在上一步的基础上达到构建成镜像，部署成镜像。
- 加入回滚，多环境，多分支，流水线（暂时没想到太多）等其他细节操作
开始
假设你已经购入一台服务器，且通过一顿百度学会了登入你的服务器，本文采用天翼云的服务器，系统为centos8
docker安装
使用 yum 安装
在服务器中执行以下命令安装依赖：
sudo yum install -y yum-utils
由于国内网络问题，我们使用国内源
sudo yum-config-manager \ --add-repo \ https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
sudo sed -i 's/download.docker.com/mirrors.aliyun.com\/docker-ce/g' /etc/yum.repos.d/docker-ce.repo
安装docker
sudo yum install docker-ce docker-ce-cli containerd.io
CentOS8 额外设置
由于 CentOS8 防火墙使用了 nftables，但 Docker 尚未支持 nftables， 我们可以使用如下设置使用 iptables： 更改 /etc/firewalld/firewalld.conf
FirewallBackend=iptables
复制代码启动 Docker
sudo systemctl enable docker
sudo systemctl start docker
测试 Docker 是否安装正确
这一步会自动从DockerHub拉取一个hello-world的docker镜像
docker run --rm hello-world
为 Docker 配置镜像加速
请首先执行以下命令，查看是否在 docker.service 文件中配置过镜像地址。
systemctl cat docker | grep '\-\-registry\-mirror'
如果该命令有输出，那么请执行 systemctl cat docker 查看 ExecStart= 出现的位置，修改对应的文件内容去掉 --registry-mirror 参数及其值，并按接下来的步骤进行配置。
如果以上命令没有任何输出，那么就可以在 /etc/docker/daemon.json 中写入如下内容（如果文件不存在请新建该文件）：
{
"registry-mirrors": [
"https://hub-mirror.c.163.com",
"https://mirror.baidubce.com"
]
}
复制代码之后重新启动服务。
这样我的服务器上已经具有了我们需要的docker，接下来是jenkins。
启动jenkins
下载jenkins镜像
docker pull jenkins/jenkins:jdk11
设置端口为9090并映射jenkins_home到宿主机/home/jenkins_home (目录端口因人而已，/home/jenkins_home就是我自己服务器的jenkins目录，简单来说这一步就是要让你可以使用你的ip+端口的方式去访问jenkins界面)
docker run -d --name jenkins -p 9090:8080 -v /home/jenkins_home:/var/jenkins_home -u 0 jenkins/jenkins
登录jenkins
然后你就可以使用你的服务器的ip+端口来访问，在地址栏输入140.171.172.172:9090（假的，后面都以此地址为例吧）来访问jenkins。
提示：
- 访问不了，先ping地址看通不通
- 通了还访问不了检查服务器的访问安全策略，以天翼云为例，9090端口默认是不能访问的。
- 还不行，检查上述所有步骤
下面是天翼云修改增加端口的方法实例，各个平台稍有差别，自己找。
假设，你进入了jenkins的界面（如果这还没进来，请关闭您浏览的当前窗口，看点别的吧）
首次启动jenkins需要输入密码，需要进入容器内获取密码。
密码位于/var/jenkins_home/secrets/initialAdminPassword。
进入容器
docker exec -it jenkins /bin/bash
获取密码
cat /var/jenkins_home/secrets/initialAdminPassword
另外在教个工具transmit，当然win上可以使用winscp，可以直接查看服务器文件
然后下一步下一步就好了，如果有一些插件安装失败先不管，下一步一直到进入主界面。
可能是由于我的jenkins版本新一些的问题，我的界面要和他们的文章稍微不一样 但是演示过程中对比着操作界面基本一致。
更插件源
我们先来更新一下jenkins的插件源，这样我们的插件安装会更顺利一些，系统设置->插件管理->高级->升级站点,修改为：
https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json
配置全局环境
以下的操作都在系统设置->全局工具配置中进行
配置JDK
进入Jenkins容器，查看java安装路径。
docker exec -it jenkins /bin/bash /bin/bash $JAVA_HOME
我的是/opt/java/openjdk
然后在JDK中配置
配置Git
git同理，进入容器内执行whereis git即可查询到git安装路径。
whereis git
配置maven，配置node
maven和node我直接使用自动安装了（服务器没装node环境的也要装一下，自行百度总要用，不说了）。
系统设置
以下操作都在jenkins的系统设置->系统配置中进行
Publish over SSH中新增一个SSH Servers
这里是配置的你的服务器地址，点击
高级，设置密码，选中Use password authentication, or use a different key 复选框，然后设置password就好。
最后配置完成以后点击Test Configuration按钮，如果配置正常会出现Success。
GitLab配置集成
Jenkins配置GitLab插件
首先在插件管理中安装gitlab插件，然后我们转到你的gitlab中去操作，
-
你需要先获取一个给jenkins用的gitlab的token令牌，这个就不细说了
-
配置jenkins 系统设置->系统配置 设置gitlab
-
点击添加->jenkins,配置你的gitlab的token令牌
-
点击 Test Connection按钮测试连接，出现Success就表示配置成功
若报Gitlab通知事件发生时，403响应码错误，则需要 将 “Enable authentication for '/project' end-point” 取消钩选即可
创建任务
接下来我们创建一个简单的jenkins任务，在jenkins面板中点击新建任务
- 输入任务名称
- 选择构建一个自由风格的项目
- 进入项目配置
配置项
- 源码管理
设置你的gitlab地址和toekn，同时可以选择需要触发任务的分支（此处test分支）。
- 构建触发器
选择Build when a change is pushed to GitLab，下面的选项都是用来配置jenkins在gitlab的何种代码操作下执行，比如你希望分支被push执行构建就把push勾选。
知识点，划重点，点击图中右下角的高级按钮， 点击Generate按钮，生成一个SecretToken，复制生成的令牌，然后到gitLab中，为你的项目创建一个webhook，网址输入触发jenkins任务url（例如
http://140.171.172.173:9090/project/umi），并将SecretToken粘贴到webhook的SecretToken令牌字段中。
添加webhook后，单击测试按钮，可以测试各种gitlab事件，Success之后回到jenkins任务继续配置。
- 构建环境
构建环境勾选Provide Node & npm bin/ folder to PATH，采用默认设置
- 构建
点击增加构建步骤，先添加一个执行ssh，再添加一个Send filse or execute commands over SSH
ssh脚本中我们的主要任务是安装依赖，打包，压缩。
node -v
npm install -g yarn -registry=https://registry.npm.taobao.org
yarn -v
yarn install --pure-lockfile
yarn build
tar -zcvf dist.tar ./dist
复制代码Send filse or execute commands over SSH主要用来配置要传输的服务器，目标文件，服务器接收的路径（我使用的是/data/project，里面的结构大概就是/data/project/project1，/data/project/project2），和接受后执行的脚本
cd /data/project
tar xvf dist.tar
mv -n dist/* ./project-umi
rm -rf dist.tar
rm -rf dist
复制代码完成上述步骤之后，你去你的gitlab随便修改一下test分支的README.md，然后提交，来到jenkins是否触发了我们创建的任务自动构建。
如果构建完成，可以到服务器文件下查看你的/data/project/project1中是否有你的打包后的前端部署文件
如果构建失败，可以到改次构建历史中，查看控制台输出，查看错误原因。 回顾上述所有步骤还失败，可以把你的错误贴在评论区讨论（这个时候总不能让你关窗口走人了，临门一脚了，再给气死，哈哈哈哈哈）。
配置Nginx
没错，上面检查完成之后，你确保你修改代码触发了任务，并最后将打包文件存放在了你的项目目录中，那么我们最后一步就是为我们的服务器配置nginx。
可能这一步很多前端也都了解，所以也不说什么了，你只需要在服务器上安装好nginx。
然后找到你的nginx配置文件，我的文件在/etc/nginx/nginx.conf，然后我以一个最基础的安装后的默认文件为例添加我们的前端项目代理，我们只需要在里面添加一个sever代理我们的3000接口：
server {
listen 3000;
# gzip config
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
# 这行是重点，代理到你的前端项目，其他都是umi官方提供的配置
root /data/project/project-umi;
location / {
# 用于配合 browserHistory使用
try_files $uri $uri/ /index.html;
# 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
# rewrite ^/(.*)$ https://preview.pro.ant.design/$1 permanent;
}
location /api {
proxy_pass https://ant-design-pro.netlify.com;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Real-IP $remote_addr;
}
}
复制代码然后重新加载你的nginx配置
nginx -s reload
最后
在你的gitlab的test分支提交一个commit，回到jenkins面板就会发现自动触发了项目的一条编译任务，可以进入项目查看控制台输出，可以看到编译过程的输出，查看jenkins的编译任务最后状态未Success表示你已经简陋的将该项目部署到服务器了。
然后，请在你的浏览器输入你的服务器ip+3000端口。 good job!
总结一下
然后我们来梳理一下我们的整体的任务思路：
对于第一部分，我们基本已经完成，但是中间还有很多思考需要放到我们完成第二部分之后去实践，比如多环境多分支，镜像打包是否可以利用缓存对比依赖，甚至是如果没有依赖更新我们直接跳过yarn安装的步骤。
还有对于如何开展第二步的一些思考，比如docker事直接放在代码里还是内置到任务的全局变量执行，又或者专门放置在服务器指定文件，如何保证运行的docker镜像最小化等等。
答应我，别让它在你收藏夹吃灰好吗？好吗？？