前言
对 IT 稍微重视的企业,都会有自己的一套代码管理、测试、上线的流程和规范,一般都由团队的 Leader 和运维的小伙伴来搭建部署。而「自动化部署」,一般是整个流程最后一环,把项目打包,并部署到测试环境或者生成环境中。
身为前端渣渣,对这方面了解比较有限,只见过两种组合「Gitea + jekenis」以及「GitLab + GitLab CI/CD」。好奇心使然决定自己动手试试,以下是这两三天踩坑的成果。也算是入门了。
这篇文章主要介绍「GitLab + GitLab CI/CD」方案的实现流程, 为了照顾没接触过 Linux 的朋友,会有些关于 Linux 的基本使用内容,熟悉 Linux 的朋友可以跳过 Linux 部分
注意:文章中所有的服务器IP,需要更换成自己的
Linux 系统服务器
现实开发中,服务器基本都是Linux
,所以没有Windows
,本人服务器系统版本为:Centos 7 64位
。
服务器选择:
本地虚拟机 「推荐使用, 自己装系统,比较繁琐,只要电脑内存足够,可更具需要调整内存,穷人必备」
云主机 「GitLab 至少要 3G 以上内存, 很占用内存,emmmm~ 不便宜」
自家的服务器 「大佬带带我」
不会 Linux
的小伙伴,不要怕,我也是半桶水,推荐 B 站找些linux 的入门视频看一下。把常用的一些命令,特别是文件编辑保存。忘记了就查,用着用着就熟悉了。
本地虚拟机
没有搞过虚拟机的朋友看这里,可以去网上找一下教程,很多。
本地虚拟机系统初始化配置(很重要)
设置网卡
本地虚拟机, 默认是访问不了网络的,所以需要进行配置。网络适配器选择NAT
模式,编辑网卡配置文件ONBOOT=yes
。
# 编辑 vi /etc/sysconfig/network-scripts/ifcfg-ens33
接着把,ONBOOT=no
改成 ONBOOT=yes
,然后保存,接着运行下面的命令
# 重启网络 systemctl restart network.service # ping 一下,能通就证明可以访问网络了。 ping www.baidu.com
一些必须的配置和软件(命令依次执行)
net-tools: ifconfig 查看 ip 时需要
vim: vi 的升级版 vim,文件编辑时候需要
wget: 下载安装包时需要
# 启用 ssh , 使用 Xshell 时需要 systemctl start sshd.service # 安装相关依赖 yum -y install net-tools vim wget # 系统语言改成中文(非必须) # 编辑,修改 LANG="en_US.UTF-8" 为 LANG="zh_CN.UTF-8" vim /etc/locale.conf # 重启系统,生效 reboot
本地虚拟机执行向命令 ifconfig
来查看服务器的IP
云主机
控制台,一般都会显示 IP ,也会有对应的 SSH
连接教程。
XShell 连接服务器
建议使用 XShell
之类的工具来管理和操作服务器。「下载安装包」
连接服务器
具体操作参考下图:
前端项目自动化部署需要的环境依赖
Node
安装项目依赖、打包都需要Nginx web
项目部署必须「正向代理、方向代理、负载均衡等等」、 GitLab 也会用到 Nginx(默认自动安装)Git
自动化部署,需要拉取代码。GitLab
没啥好说GitLab-Runner
配合 GitLab CI/CD 使用的应用程序
安装 Node
下载和解压
# 下载安装包,需要哪个版本,在url中修改就可以了 wget https://nodejs.org/dist/v12.9.0/node-v12.9.0-linux-x64.tar.xz # 解压 tar xf node-v12.9.0-linux-x64.tar.xz # 复制 cp -rf /root/node-v12.9.0-linux-x64 /usr/local/node
编辑配置文件
# 打开编辑配置文件 vim /etc/profile
在文件的最后,加上下面的内容
export PATH=$PATH:/usr/local/node
重载系统配置文件
source /etc/profile
测试 node 环境变量是否生效
运行下面的代码,看到版本号,就说明环境变量生效了。
node -v
安装 Git
Gitlab
自动化部署需要拉取代码,需要用到 Git
。尽量安装Git 2.x.x
版本,不然新版的 GitLab
自动化部署无法拉取代码。
本人安装的是 Git 2.24.4
版本,其他版本请自行尝试
查看依赖
yum list git224
如果看到一下的安装包,证明可以通过 yum 安装
如果没有,可以使用 IUS 仓库(yum源),执行完下面的命令,应该就能安装了。
yum -y install \ https://repo.ius.io/ius-release-el7.rpm \ https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
安装 Git
yum -y install git224
测试是否安装成功
# 查看版本号 git --version
安装 Nginx
手动安装(方式一,个人使用的方式)
版本:nginx 1.18.0
安装相关依赖
zlib 开启 gzip 需要
openssl 开启 SSL 需要
pcre rewrite模块需要
gcc-c++ C/C++ 编译器
yum -y install gcc-c++ zlib zlib-devel openssl openssl-devel pcre pcre-devel
下载和解压 nginx 压缩包
# 下载压缩包 wget https://nginx.org/download/nginx-1.18.0.tar.gz # 解压 tar -zxvf nginx-1.18.0.tar.gz
编译安装
分别执行下面的命令
cd ./nginx-1.18.0 ./configure make make install
配置环境变量
查看安装路径
运行下方的命令查看安装路径,不出意外的话,应该是/usr/local/nginx
whereis nginx
配置
# 编辑 vim /etc/profile # 文件最后加上这两句,然后保存并退出(:wq) export NGINX_HOME=/usr/local/nginx export PATH=$NGINX_HOME/sbin:$PATH # 重载配置文件(运行才能生效) source /etc/profile
测试环境变量是否生效
# 查看版本号 nginx -v
开放 80 端口
# 开放 80 端口 firewall-cmd --permanent --zone=public --add-port=80/tcp # 重载防火墙 firewall-cmd --reload
启动 nginx
# 启动 nginx
默认情况下nginx
已经配置好了,80端口
可以访问 nginx
的欢迎页。浏览器直接访问服务器的 IP 就可以了。Nginx 1.18.0 和 1.20.0 版本的欢迎页不同。能显示就证明 Nginx 正常运行了。
使用 Yum 安装 Nginx
注意:yum 安装的版本 Nginx 是 1.20 版本
查看是否存在安装包
yum list nginx
如果没有对应的安装包,则运行下面代码添加 yum源
sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
安装
yum install -y nginx
启动 nginx
systemctl start nginx.service
测试 Nginx 是否安装成功
同上
nginx 常用的命令
# 启动 nginx # 停止 nginx stop # 安全退出 nginx -s quit # 重新加载配置文件 nginx -s reload # 查看nginx进程 ps aux|grep nginx
防火墙配置(注意)
页面访问不了的时候,很可能是防火墙的原因,有两种方式可以解决, 开发端口
者直接关闭防火墙
,二选一(本地环境怎么折腾都无所谓),后面GitLab
和部署的项目
也同样有防火墙的问题,解决方式一样的。
注意:阿里云的话,需要到「控制台」——>「防火墙」———>「添加规则」,打开对应的端口。(没记错的话,80端口默认是打开的)
开放 80 端口
# 设置 firewall-cmd --permanent --zone=public --add-port=80/tcp # 重载 firewall-cmd --reload
关闭防火墙
根据自己需要,选择关闭防火墙的方式。
重启后防火墙恢复原样
service iptables stop
永久关闭
chkconfig iptables off
中场休息一会,到这里也就做好了前期准备而已。下面才是主角
安装 GitLab
版本:gitlab 14.3.0
# 安装 GitLab,需要的时间比较长 yum -y install https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/gitlab-ce-14.3.0-ce.0.el7.x86_64.rpm #编辑配置文件 vim /etc/gitlab/gitlab.rb
找到,external_url
, 修改 gitlab
访问地址。可以是域名(请确保确定域名正确解析了),服务器IP,也可以加上端口。设置端口时,请确保自己开放了对应的端口。可以参考上面提到防火墙问题
# 192.168.26.139 对应的就是服务器的IP,端口为 1874 external_url 'http://192.168.26.139:1874'
虚拟机没有设置静态ip的话,重启IP可能会变,最好还是设置一下,参考:「虚拟机网络NAT模式配置静态IP - 陆小呆 - 博客园」
#重载配置文件,需要的时间比较长 gitlab-ctl reconfigure # 开放 1874 端口 firewall-cmd --permanent --zone=public --add-port=1874/tcp # 重载防火墙 firewall-cmd --reload
gitlab 常用命令
# 启动gitlab服务 sudo gitlab-ctl start # gitlab服务停止 sudo gitlab-ctl stop # 重启gitlab服务 sudo gitlab-ctl restart
测试 GitLab 是否成功
浏览器里打开,GitLab,第一次打开首页,一般都会提示你修改密码,如果没有,可以通过命令行的方式修改,参考这篇文章 ———— 「GitLab第一打开没有修改密码提示」
测试仓库项目是否可以正常提交和拉取
这个步骤就不演示了,用过 GitHub
的应该基本都清楚,创建个新项目 -> 通过http仓库链接克隆项目 -> 修改项目的内容 -> 提交 ->推送
。
我们的重点的是 CI/CD
,至于 SSL、邮箱
等等,GitLab 一些其他的配置和功能我就不赘述了,大家可以网上了解下。
题外话:我安装 GitLab「切换中文」的时候,没法保存(按钮变灰了,却没有保存成功提示),不知道是什么原因,有碰到过同样问题的朋友,求解答。
配置 CI/CD
安装 gitlab-runner
# 下载 wget -O /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64 # 分配运行权限 chmod +x /usr/local/bin/gitlab-runner # 创建用户 useradd --comment 'GitLab Runner' --create-home gitlab-runner --shell /bin/bash # 安装 gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner # 运行 gitlab-runner start
新建 runner
# 注册 runner gitlab-runner register # 输入 gitlab 的访问地址 http://192.168.26.139:1874 # 输入 runner token,把开 http://192.168.26.139:1874/admin/runners 页面查看 63AyFAthj7s7sNy3JDwu # runner 描述,随便填 测试webpack-vue项目部署 # runner tag webpack-vue-cicd # 输入(选择) shell shell
注册完成后,就可以在 http://192.168.26.139:1874/admin/runners 里面看到创建的 runner。
nginx 配置项目访问地址
「广告时间,猝不及防」这里演示部署的项目是小弟之前写的项目,可以到这里拉取一下。 ——「webpack4 从零搭建 vue 项目开发环境 —— 附上demo」、「Webpack 4 项目常用的优化技巧 —— 附上demo」,感兴趣的可以看一下。自认为写得还算全面,入门 webpack 比较适用。
# 创建目录 mkdir -pv /www/wwwroot/webpack_vue_demo # 分配权限 chown gitlab-runner /www/wwwroot/webpack_vue_demo/ # 开放 3001 端口 firewall-cmd --permanent --zone=public --add-port=3001/tcp # 重载防火墙 firewall-cmd --reload # 打开 nginx 配置文件 vim /usr/local/nginx/conf/nginx.conf # 在第一个 server 下方 (nginx 默认的,端口为80),加上下面的内容 server { listen 3001; # 端口号 server_name localhost; # 服务器地址 location / { root /www/wwwroot/webpack_vue_demo; # 项目存放目录 index index.html index.htm; # 默认访问的主页 } } # 重新加载配置文件 nginx -s reload
编写 .gitlab-ci.yml 文件
.gitlab-ci.yml
文件是存放在项目的根目录下的,要提交到gitlab
上面,runner
会根据 .gitlab-ci.yml
编写的规则自动部署项目。下面文件看注释,每一步是干嘛, 都写得比较了,基本都能看明白。yml 的具体语法和关键词,可以查看 gitlab 官网,就不赘述。
新建 .gitlab-ci.yml
,添加下面的内容
# 阶段 stages: - build - deploy # 缓存 node_modules 减少打包时间,默认会清除 node_modules 和 dist cache: paths: - node_modules/ # 拉取项目,打包 build: stage: build # 阶段名称 对应,stages tags: # runner 标签(注册runner时设置的,可在 admin->runner中查看) - webpack-vue-cicd script: # 脚本(执行的命令行) - cd ${CI_PROJECT_DIR} # 拉取项目的根目录 - npm install # 安装依赖 - npm run build # 运行构建命令 only: - main #拉取分支 artifacts: # 把 dist 的内容传递给下一个阶 paths: - dist/ # 部署 deploy: stage: deploy # 阶段名称 对应,stages tags: # runner 标签(注册runner时设置的) - webpack-vue-cicd script: # 脚本(执行的命令行) - rm -rf /www/wwwroot/webpack_vue_cicd/* - cp -rf ${CI_PROJECT_DIR}/dist/* /www/wwwroot/webpack_vue_cicd/ # 把包完成,复制 dist 下的文件到对应的项目位置
见证奇迹的时候到了! 浏览器输入192.168.26.139:3001
,能访问项目就证明 OK 了。你可以尝试项目内容,提交 gitlab 发现,他会自己打包了
文章没用到 Docker ,待我学习学习之后,再出一篇。