前言
对于大部分前端构建来说，前端们都逃离不开：手动编译→FTP上传替换文件的流程。这个部署方式不仅消耗人力，还容易导致错误发生。随着CI/CD和docker的容器化技术的普及与发展，自动化，便捷，图形化的部署方式开始得到大家的关注并实践。事实上如果用CI/CD这种流程化的东西进行部署的话，能减少不少人力成本和人为错误。
安装docker
安装docker比较简单，直接按照官方文档来安装即可。
安装jenkins
使用docker镜像来部署jenkins，省下配置jenkins的烦恼。事实上如果你想安装的东西有docker镜像的话，直接上docker能省去不少配置麻烦。
拉取镜像。
docker pull jenkins:2.60.3
部署jenkins。
docker run \
--env JAVA_OPTS=-Dhudson.model.DownloadService.noSignatureCheck=true \
--name jenkins-test \
-u 0 -d \
-p 7000:8080 \
-p 7001:50000 \
-v /home/jenkins:/var/jenkins_home \
-v /var/run/docker.sock:/var/run/docker.sock \
-v $(which docker):/usr/bin/docker \
jenkins:2.60.3
那么接下来将对一些命令进行解释。
--env JAVA_OPTS=-Dhudson.model.DownloadService.noSignatureCheck=true
设置这个是为了jenkins在更新下载插件时跳过签名认证，如果不设置这个的话，插件会卡在签名认证过不去，导致插件更新失败。
-v /home/jenkins:/var/jenkins_home
这个命令是将jenkins的一些配置文件挂载到宿主机目录中，方便我们更改。
-v /var/run/docker.sock:/var/run/docker.sock \
-v $(which docker):/usr/bin/docker \
jenkins打包肯定是要涉及docker的，因为宿主机已经安装了docker了，所以直接挂载到jenkins容器里面就可以了，不用再在jenkins容器里面安装docker。
查看jenkins是否成功运行
安装完jenkins后，使用docker ps命令可以查看到jenkins的容器成功运行起来了。
因为笔者的服务器在阿里云，80端口已经有nginx服务了，所以在conf.d中增加一个jenkins的conf来让外网能通过域名来访问。
upstream jenkins_container {
server 127.0.0.1:7000;
}
server {
listen 80;
server_name xxx.xxx.xxx; #你的域名
client_max_body_size 20m;
charset utf-8;
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Server $host;
proxy_pass http://jenkins_container;
}
}
如果只是在本地运行的话，可以不用设置这一步而直接通过端口访问。
登录jenkins
通过端口或域名打开后会显示如下页面。
这里根据提示去找到初始密码。因为我们之前已经把jenkins的文件夹给挂载到宿主机了，所以无需再进到容器里面找初始密码。
拿到密码后，复制到输入框就可以点击continue了。
continue后就来到了插件下载页面，因为现在还没配置插件源，用来的插件源在国外，速度可能会比较慢，所以可以直接右上角x来跳过。
切换插件源
插件源笔者使用的是清华源mirrors.tuna.tsinghua.edu.cn/jenkins/upd…来替换，直接替换图下对应位置就好。
升级jenkins
切换好插件源后，我们可以先升级一下jenkins。这是因为维护的jenkins镜像的jenkins版本太低了，所以要升级一下。
安装插件
升级完jenkins后，来到插件中心，安装一些插件，比如docker、nodejs、git相关插件等，这个可以按照自己需求来安装。
安装完插件后，去到全局配置中配置nodejs版本。
新建项目
先新建一个项目。
配置仓库地址和ssh相关的凭证。
如果还没创建过凭证的话可以先创建凭证。凭证类型选择通过ssh的方式拉取代码，把生成的秘钥放到jenkins中，公钥加到对应的代码仓库就可以了（等同于配置gitlab、github、gitee）。
配置好仓库地址和凭证后，选择构建环境。这里选择刚刚配置的node环境。
编写构建脚本。
npm install --registry=https://registry.npm.taobao.org
npm run build
docker build -t jenkins-test .
设置好后就可以save了。
运行任务
通过点击build now按钮就能运行项目了。在Console Output中可以看到当前任务的输出结果。
那么构建的镜像去到了哪里了呢？还记得运行jenkins镜像的时候把宿主机的docker给映射进去了吗？我们可以在宿主机中使用docker images来查看一下。
可以看到构建了的镜像。
结语
通过jenkins的可视化构建方式，能够大大减少人力成本和杜绝手工带来的犯错成本 ，是增加摸鱼时间的利器（不是）。当然在实际项目中，如果要构建到多个环境的话，这些简单配置是不足以满足的，而且打包成镜像也还没push到私有仓库中，所以下一篇会围绕这两个点去进行讲解（挖坑）。
