前言
这是一篇属于面向 前端 的关于 CICD 的入门文章，其旨在：
- 入门掌握 CI CD 的用法
- 学习 CI 和 CD 的含义及其实现细节
- 基于 GitLab 展示如何给自己手上的项目添加 CICD 的流程
学习本文你需要 注意 的事情
- 你的项目必须是支持Node版本 16.20.0
- 读者的CentOS安装Node18以上的版本底层库不支持，如果你想安装高版本的Node请先解决CentOS版本低的问题
- 本文采用的是 CentOS Linux操作系统
- 本文的操作系统版本截图在下方
#技术分享OK 如果你已经明白了我上面说的注意事项 那我们事不宜迟，直接开始本文的内容吧。
安装 Node
安装 NVM
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
更新环境变量
source ~/.bashrc
验证NVM是否安装成功
command -v nvm
使用NVM安装Node.js：
nvm install node
安装指定版
nvm install 16.20.0
使用 NVM 切换到安装的 Node.js 版本
nvm use node nvm use node 16.20.0
验证安装：
node -v npm -v npx -v
安装 Nginx
安装相关依赖
- zlib 开启 gzip 需要
- openssl 开启 SSL 需要
- pcre rewrite模块需要
- gcc-c++ C/C++ 编译器
yum -y install gcc-c++ zlib zlib-devel openssl openssl-devel pcre pcre-devel
下载压缩包
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
查看安装路径
whereis nginx
编辑环境变量
vim /etc/profile
在文件最下面添加这两行
export NGINX_HOME=/usr/local/nginx
export PATH=$NGINX_HOME/sbin:$PATH
更新配置文件
source /etc/profile
查看nginx是否安装完成
nginx -v
开放 80 端口 如果不想一次性一个一个的放行端口，可以关闭防火墙
firewall-cmd --permanent --zone=public --add-port=80/tcp
重载防火墙
firewall-cmd --reload
启动
nginx
安装 GitLab
安装 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
修改配置文件
重载配置文件，
gitlab-ctl reconfigure
开放 1874 端口
firewall-cmd --permanent --zone=public --add-port=1874/tcp
重载防火墙
firewall-cmd --reload
修改gitlab的root用户密码
1.进入到gitlab控制面板中 gitlab-rails console -e production
2.执行命令： user = User.where(id: 1).first，此 user 则表示 root 用户
3、修改密码 执行命令：user.password = '12345678'修改密码 再次执行 user.password_confirmation = '12345678' 确认密码
4、保存密码 执行命令：user.save!
5、退出控制台 执行命令：exit
验证是否修改成功
http://192.168.80.130:1874/users/sign_in 把Ip换成自己的Ip 输入root的用户名和密码尝试进行登录,正常创建项目进行测试
C 配置 CI/CD
下载
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
安装 在 /usr/local/bin/gitlab-runner 这个目录下
gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner
运行
gitlab-runner start
新建 runner
注册 runner
gitlab-runner register
输入 gitlab 的访问地址
http://192.168.80.130:1874
输入 runner token
打开
http://192.168.80.130:1874/admin/runners 页面查看 63AyFAthj7s7sNy3JDwu
runner 描述，随便填
测试 webpack-vue 项目部署
runner tag
webpack-vue-cicd
Enter optional maintenance note for the runner:
直接回车走过
输入（选择） shell 最后一步选择执行的脚本
shell
注册完成后，就可以在
http://192.168.80.130/admin/runners 里面看到创建的 runner。
nginx 配置项目访问地址
创建目录
mkdir -pv /www/wwwroot/dist
分配权限 如果后面执行脚本命令提示没有权限那就是这个地方有问题
chown gitlab-runner /www/wwwroot/dist/
(备用)如果权限有问题可以使用这个命令单独给这个目录设置上gitlab-runner用户权限
sudo chown -R gitlab-runner:gitlab-runner /www/wwwroot/
开放 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 80
server_name localhost
location / { root html index index.html index.htm }
error_page 500 502 503 504 /50x.html location = /50x.html { root html } }
server { listen 3001 server_name localhost location / { root /www/wwwroot/dist index index.html index.htm } error_page 500 502 503 504 /50x.html location = /50x.html { root html } }
重新加载配置文件 nginx -s reload
C 编写 .gitlab-ci.yml 文件
# 阶段
stages: - build - deploy
# 缓存 node_modules 减少打包时间，默认会清除 node_modules 和 dist
cache: paths: - node_modules/
# 拉取项目，打包
build: stage: build tags: - ceshi before_script: # - export PATH=/usr/local/bin:$PATH
- node --version
- npm --version
- echo "开始构建"
script:
- cd ${CI_PROJECT_DIR}
- npm install
- npm run build
only:
- main
artifacts:
paths:
- dist/
# 部署
deploy: stage: deploy tags: - ceshi script: - rm -rf /www/wwwroot/dist
浏览器打开3001端口
提交代码到 main 分支上，如果想改为提交到其他分支上也可以进行自动部署就需要改 only 参数为分支名称