作为前端你必须要会的CICD

前言

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

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

OK 如果你已经明白了我上面说的注意事项 那我们事不宜迟，直接开始本文的内容吧。

安装Node

（第一种）安装 NVM

请注意 如果使用这种安装方式在后面执行runner的时候在gitlab-runner账户会报错找不到Node 这是因为Linux的系统的用户环境隔离问题

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

（第二种）使用系统级 Node.js 安装

wget https://nodejs.org/dist/v16.20.0/node-v16.20.0-linux-x64.tar.xz

解压

tar xf node-v12.9.0-linux-x64.tar.xz

复制

cp -rf /root/node-v16.20.0-linux-x64 /usr/local/node

打开编辑配置文件

vim /etc/profile

在文件的最后一行加上这句话

export PATH=$PATH:/usr/local/node/bin

重载系统配置文件

source /etc/profile

这次在切换用户到gitlab-runner就可以查看到你安装的版本了

安装 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

查看防火墙的状态

systemctl status firewalld.service

关闭防火墙的状态

systemctl stop firewalld.service

查看已经放行的端口

firewall-cmd --zone=public --list-ports

重载防火墙

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 --zone=public --list-ports

重载防火墙

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 页面查看

runner 描述，随便填

测试vue项目部署

runner tag

ceshi

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参数为分支名称