作为前端你必须要会的CICD

前言

这是一篇属于面向前端 的关于CICD的入门文章，其旨在：

1. 入门掌握CI CD的用法
2. 学习CI和CD的含义及其实现细节
3. 基于GitLab展示如何给自己手上的项目添加CICD的流程

学习本文你需要注意的事情

1. 你的项目必须是支持Node版本 16.20.0
2. 读者的CentOS安装Node18以上的版本底层库不支持，如果你想安装高版本的Node请先解决CentOS版本低的问题
3. 本文采用的是CentOSLinux操作系统
4. 本文的操作系统版本截图在下方

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的用户名和密码尝试进行登录,正常创建项目进行测试

配置 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;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        root   html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    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

编写 .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/*
    - cp -rf ${CI_PROJECT_DIR}/dist/* /www/wwwroot/dist/
  only:
    - main

浏览器打开3001端口

提交代码到main分支上，如果想改为提交到其他分支上也可以进行自动部署就需要改only参数为分支名称