对 IT 稍微重视的企业，都会有自己的一套代码管理、测试、上线的流程和规范，一般都由团队的 Leader 和运维的小伙伴来搭建部署。而「自动化部署」，一般是整个流程最后一环，把项目打包，并部署到测试环境或者生成环境中。

身为前端渣渣，对这方面了解比较有限，只见过两种组合「Gitea + jekenis」以及「GitLab + GitLab CI/CD」。好奇心使然决定自己动手试试，以下是这两三天踩坑的成果。也算是入门了。

这篇文章主要介绍「GitLab + GitLab CI/CD」方案的实现流程, 为了照顾没接触过 Linux 的朋友，会有些关于 Linux 的基本使用内容，熟悉 Linux 的朋友可以 「点击跳转到这里开始看（iphone掘金客户端跳转不了，懵逼）」

注意：文章中所有的服务器IP，需要更换成自己的

Linux 系统服务器

现实开发中，服务器基本都是 Linux ，所以没有 Windows 的，本人服务器系统版本为： Centos 7 64位 。

服务器选择：

本地虚拟机 「推荐使用， 自己装系统，比较繁琐，只要电脑内存足够，可根据需要调整内存，穷人必备」

云主机 「GitLab 至少要 3G 以上内存, 很占用内存，emmmm~ 不便宜」

自家的服务器 「大佬带带我」

不会 Linux 的小伙伴，不要怕，我也是半桶水，推荐 B 站找些 linux 的入门视频看一下。把常用的一些命令，特别是文件编辑保存记住。忘记了就查，用着用着就熟悉了。

本地虚拟机

安装本地虚拟机，略，可以去网上找一下教程，很多。

本地虚拟机系统初始化配置（很重要）

本地虚拟机, 默认是访问不了网络的,所以需要进行配置。网络适配器选择 NAT 模式，编辑网卡配置文件 ONBOOT=yes 。

接着把， 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 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 ，待我学习学习之后，再出一篇。
花了三天时间才把文章写出来的，各位大佬要是觉得有用，多多点赞，谢谢!
参考学习文章：
nginx:
www.kuangstudy.com/bbs/1353634…
juejin.cn/post/700734…
gitlab:
juejin.cn/post/701249…
juejin.cn/post/697101…
  
分类：
 前端
 
标签：
 
GitLab前端
 
  
 

      安装掘金浏览器插件
     
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装
     
 

    不是阿怪的阿怪
        VIP.4 融会贯通