一套基础自动化部署搭建过程(vue实战防坑版) 一套基础自动化部署搭建过程

点击上方“肉眼品世界”，选择“设为星标”

回复”666“加入启明星技术社群
文章图片

文章图片

导读: 我是小编品品，把一个创业公司需要的基础环境特别是发布环境梳理一下，对创业公司或者更升职的leader或者想要升职的开发同学还是比较重要的，说得更直白一些：这个东西是基础环境，大家都会使用你这个，使用你的东西频次高了，是不是公司就会感觉你越来越重要当然要是你作为创业公司Leader自己搭建一套，个人觉得比运维搭建一套好；至于为什么，这里就不展开。网上的一些资料有一些常规的操作，但是在具体操作过程中有一些坑需要自己去找原因，这里就从搭建实施过程分享以下个人经验。
更多优质内容请关注微信公众号“肉眼品世界”（ID： find_world_fine），发现世界之美好运维是一个有很久历史的职业，但是随着技术和工具的成熟，运维更加趋向于自动化运维，架构运维；一个好的开发会运维，会在通过工具监控，服务器排查问题，并能指导运维就更好了，这样老板已经预备好升职加薪的计划了，非你莫属，就等你来帮他解决困惑。

为什么要自动化部署 【一套基础自动化部署搭建过程(vue实战防坑版)】大公司这个体系相对比较成熟，我们在长沙一个公司遇到过一个情况，有一个自称是某du回来的同学，说我们发布代码都是脚本，git pull，jenkins太大麻烦，我们不需要部署， git pull是能实现，每次shell到服务器pull不累吗，jenkins大吗？jenkins和中国的jenkins 瓦力我们都用过，各有有点，瓦力的界面很漂亮，但是在功能上和扩展性上不得不说jenkins是比较成熟的。一些可能会遇到的注意事项，本文会以红字标示出来
因为上线是一个频繁的操作，有一套工具来保障他每次无误的执行，能很大程度上提升效率；用自动化部署的好处是：

1:gitlab的代码与服务器代码高度保持一致，避免代码不一致造成的神奇bug
2:发布几十台机器和发布一台机器都是点一下就可以，发布编译过程可追踪
3:良好的权限控制，权责明确可追溯（瓦力在权限控制上做得不错，分空间，master,主管和发布者）
资源服务器一台，CentOS的就足够，一般部署内网，因为无论jenkins还是gitlab你的代码是完全暴露的，这个机器最好不要放在外网，有的同学会说，内网的gitlab我如何git pull到线上远程服务器，这里就不需要git pull了，jenkins配置好会直接从内网机器发布到外网机器。当然你非想把gitlab部署在外网也可以，做好防火墙安全防护只对对应机器开放权限，包括你的端口（一般还是放内网）。
思考：如果我用传统的yum来安装，肯定会被我装乱七八糟，还不方便自己管理维护，左右为难的情况下我选择了Dokcer，可能有些小伙伴问Docker是啥怎么用，不要慌这里有传送门：

https://segmentfault.com/a/1190000016254236#articleHeader0

测试环境搭建 Laradock 是为 Docker 提供的完整 PHP 本地开发环境,先要用 Laradock也得安装，可以查看链接：https://yq.aliyun.com/articles/673611java版 jenkins搭建清查看「Jenkins+Git+Maven+Shell+Tomcat持续集成」经典教程
为了快速搭建一套PHP测试环境我决定用laradock了，虽然文件很多，但是里面封装的东西也是比较全的，后期开发不知道会用到什么技术，就决定先用这个，随时可以启动
laradock官方文档给的介绍也很全面，我这里采用的方式是部署多套项目方式目录结构如下：

+ laradock + project-1 + project-2

开始使用：
1.git clone https://github.com/laradock/laradock
2.cp env-example .env
env 里面的配置可以修改的，可以根据自己情况进行调整
3.docker-compose up -d nginx php-fpm mysql redis
后面可以加上你要启动的程序，像rabbitmq、mongo等等，需要的时候追加在尾部就可以启动，首次启动时间有点长
4.docker-compose exec --user=laradock workspace bash
像laravel等项目肯定少不了composer，执行这个命令进入工作区，就可以执行composer了
5.docker-compose exec nginx nginx -s reload
肯定有人会问我更改了nginx配置是不是每次都要进入nginx容器去重启，或者把整个容器都重启了呀，不用的，执行这个命令就可以重启nginx了。nginx站点配置文件在哪里呢：./laradock/nginx/sites/
先运行下试试吧。
GitLab 一.GitLab是什么 GitLab 是一个用于仓库管理系统的开源项目。使用Git作为代码管理工具，并在此基础上搭建起来的web服务。
可通过Web界面进行访问公开的或者私人项目。它拥有与Github类似的功能，能够浏览源代码，管理缺陷和注释。可以管理团队对仓库的访问，随着git的流行，越来越多的技术团队通过在自己的服务器搭建gitlab来实现代码的管理。
安装流程：

卸载本机gitliab以及相关文件
安装相关依赖
启动postfix，并设置为开机启动
防火墙设置
获取安装包
安装rpm包
修改配置文件gitlab.rb
加载配置文件并启动
访问gitlab
更改密码
gitlab创建一个项目
导入客户端公钥
查找客户端公钥
将客户端公钥添加进gitlab
提交本地项目到gitlab
报错处理
查看gitlab日志修正报错

卸载本机gitliab以及相关文件

sudo gitlab-ctl uninstall sudo rpm -e gitlab-ce find / -name gitlab|xargs rm -rf

安装相关依赖

yum install curl openssh-server openssh-clients postfix cronie policycoreutils-python –y

启动postfix，并设置为开机启动

systemctl start postfixsystemctl enable postfix

防火墙设置

#此命令需在防火墙开启后使用firewall-cmd --add-service=http --permanentfirewall-cmd --reload

获取安装包

wget https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/gitlab-ce-8.6.7-ce.0.el7.x86_64.rpm

安装rpm包

rpm -ivh gitlab-ce-8.6.7-ce.0.el7.x86_64.rpm

修改配置文件gitlab.rb
vim /etc/gitlab/gitlab.rb
查找到
external_url 这个属性，将其改为ip+地址
加载配置文件并启动

gitlab-ctl reconfiguregitlab-ctl restart

访问gitlab

文章图片

更改密码
首次进入会提示更改密码，在界面直接操作即可，也可以使用命令行操作。如果忘记密码不用着急有shell root 权限什么事都好办

用户sph忘记密码了，需要重置密码，那么先进入gitlab管理后台： sudo gitlab-rails console production当出现前缀大概是irb(main)的时候，输入查找指令看看当前是否存在该用户： user=User.where(name: "sph").first下面出现该用户信息提示的时候就表示该用户存在，可以继续操作，否则自己检查一下用户名和其他问题。重置密码： user.password=12345678确认密码： user.password_confirmation=12345678保存新密码： user.save!退出即可。 quit

gitlab创建一个项目

文章图片

创建了一个jpa_test项目
导入客户端公钥
点击项目上方的add an SSH key超链，即可进入导入客户端秘钥界面

文章图片

查找客户端公钥
公钥存在地址路径为 ~/.ssh
查看公钥

cat ~/.ssh/id_rsa.pub

将客户端公钥添加进gitlab

文章图片

提交本地项目到gitlab

cd existing_foldergit initgit remote add origin git@47.104.225.224:root/jpa_test.gitgit add .git commit -m 'first commit'git push -u origin master

如遇报错
如果遇到clone和push都ok了，发现提交后的文件在线无法查看，页面显示500错

文章图片

文章图片

查看gitlab日志查看错误并修正

这是一台阿里云的新机器，内容为2G，已经满足gitlab最小内存1G的需求，通过free -h命令发现Swap为0

文章图片

于是根据网上资料通过增加swap来看看效果

文章图片

修改后在线查看文件正常

文章图片
如果你搭在外网，gitlab暴露的web页面端口单独指定ip可以访问吧，如果是阿里云直接添加ip段即可，如果是独立机房centos可以用firewall-cmd或者在nginx里配置好，代码安全第一

至此gitlab搭建完美结束！
Jenkins
实现自动化部署有很多种方式如：webhook、Jenkins、Travis CI,瓦力等等，我的选择是Jenkins，因为之前部用过好几个还是觉得jenkins强大好用
1:安装jdk

yum install -y java

2、安装jenkins

添加Jenkins库到yum库，Jenkins将从这里下载安装。

1 wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo 2 rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key 3 yum install -y jenkins

如果不能安装就到官网下载jenkis的rmp包，官网地址（http://pkg.jenkins-ci.org/redhat-stable/）

1 wget http://pkg.jenkins-ci.org/redhat-stable/jenkins-2.7.3-1.1.noarch.rpm 2 rpm -ivh jenkins-2.7.3-1.1.noarch.rpm

配置jenkis的端口

vi /etc/sysconfig/jenkins

找到修改端口号：

JENKINS_PORT="8080"此端口不冲突可以不修改

3、启动jenkins

service jenkins start/stop/restart

安装成功后Jenkins将作为一个守护进程随系统启动
系统会创建一个“jenkins”用户来允许这个服务，如果改变服务所有者，同时需要修改/var/log/jenkins, /var/lib/jenkins, 和/var/cache/jenkins的所有者
启动的时候将从/etc/sysconfig/jenkins获取配置参数
默认情况下，Jenkins运行在8080端口，在浏览器中直接访问该端进行服务配置
Jenkins的RPM仓库配置被加到/etc/yum.repos.d/jenkins.repo
初始化

4、打开jenkins
在浏览器中访问
首次进入会要求输入初始密码如下图，
初始密码在：/var/lib/jenkins/secrets/initialAdminPassword

文章图片

输入你上面获取到的初始化密码，下一步我选择的是推荐安装，后面自己需要的自己可以再去插件库安装。
插件安装
初始化成功之后前往系统设置->插件管理安装几个必要插件：

Publish Over SSHGitLab Plugin #因为是使用的Gitlab所以要安装这个NodeJS Plugin #我们前端使用的Vue所以要用到node

开始征程
一、基础配置
安装完插件之后需要配置一些基础内容如jdk、node、ssh等
1.ssh安装
进入：Manage Jenkins-> Configure System

文章图片

点击高级：

文章图片

点击Test Configuration测试是否连接成功,这里最好不要用root相关账户来操作，因为通过jenkins也能执行shell,就指定目录限定发布代码目录即可
2.jdk、git
进入：Manage Jenkins-> Global Tool Configuration

文章图片

我这里jdk、git采用自动安装，jdk安装时候需要一个账号，去注册下就可以
3.nodejs安装

文章图片

二、创建工程

文章图片

新建一个工程
选择自由风格

三、配置工程

文章图片

设置最多保留几个版本构建

文章图片

使用git源码工具，输入git地址、添加git用户

文章图片

if [ -f test.tar.gz ]; then rm testv.tar.gz fi tar -zcvf test.tar.gz ./*

这里为什么要把项目打包呢，因为下面要配置的ssh不支持文件夹传输，所以需要先将内容进行打包然后去服务器进行解包

文章图片

全部保存好就可以去构建了,这里只是将一个简单的test.tar.gz文件从jenkins服务器发送到远程服务器的操作， test.tar.gz包含编译过后需要全部发送的内容，至于这个test.tar.gz 怎么来的，java maven 就在execute shell里增加命令 maven clean，maven install ,vue就npm install ,npm run build，更详细的java版查看「Jenkins+Git+Maven+Shell+Tomcat持续集成」经典教程
如果你在ssh server 里配置了目录的话，这里的Remote directory就是为ssh server配置的相对目录
按照一般的教程这个时候可能觉得大功告成了，那不是，常常会遇见一些小问题，比如在添加源码git的时候：Jenkins源码管理git报错：Host key verification failed
首先进入jenkins账号，直接sudo su jenkins还不行，看cat /etc/passwd 是把shell禁了的

sudo su -s /bin/bash jenkins

执行命令：

git ls-remote -h git@ip:xxx.git HEAD

点击然后下一步，点击yes ,ok，这时，ip就已经添加到~/.ssh/known_hosts。
记住一点，jenkins的相关操作都是以jenkins默认启动用户jenkins来操作的，这样遇到一些问题就好办了
耶~
vue项目配置:
vue现在在各个创业公司中用到比较多，用jenkins来部署vue其实很不错，最重要的思想就是编译打包都在内网jenkins机器完成，发布到服务器端的都是打包过后的html，这样技能提升效率，也能保障源码的安全:

1:部署vue先得安装node.js,在插件管理里安装好NodeJS plugin的插件,然后选择版本配置

文章图片

这样我们就能在自动构建发布的配置里看到nodejs的编译选项了

文章图片

二、发布配置首先新建一个自由风格的项目

文章图片

同上填写上构建源码：

文章图片

在构建的时候execute shell

文章图片

echo $PATH node -v npm -v npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver npm install npm run build cd dist rm -rf vue-mall.tar.gz tar -zcvf vue-mall.tar.gz * cd ../

然后代码会从jenkins机器拉取下来，然后发送到已经配置好的服务器(ssh server)

文章图片

cd /usr/local/nginx/html rm -rf mall mkdir mall tar -zxvf vue-mall.tar.gz -C mall/ rm -rf vue-mall.tar.gz

ok,以上就可以顺利用jenkins发布vue了，前端的同学是不是感觉瞬间爽了呢谢谢观赏如果觉得有帮助就帮忙点个赞；这个篇幅较长，谢谢耐心阅读，希望对您有所帮助，也希望大家留言提供下不同的意见，找到更有效的方式来完成，谢谢！
肉眼品世界
发现世界之美好（ID：find_world_fine），独立理性之观点，从技术架构，到研发管理再到商业视觉再到创业人生的升级之路，深厚的技术、研发管理体系价值观与互联网商业分析输出，助力每个个人与企业高速发展。愿景：通过合作共赢的推动社会知识创新，释放社会创新活力