前端自动化部署：Github/Gitlab的CI/CD

背景

部门相当于新成立，前端积累为零，就和小伙伴们在业余时间把前后端的自动化部署、git hooks、技术栈等等做了一些规范，以下是前端的自动化部署方案。

技术栈

部门做的是大数据、人工智能方向，前端工程兼容主流浏览器即可，同时团队对VUE比较熟悉，故我们所有的前端技术栈采用VUE3+Element-plus+vite+TypeScript+Eslint+pinia全家桶；小程序采用uniapp（小程序业务非常简单）；同时，一些比较独立的小项目采用react，算是技术储备吧；前端自动化部署是由前端小伙伴搭建的，故我们没有使用Jenkins，而是采用了Github/Gitlab的CI/CD。下面对自动化部署做一下总结分享。

前端自动化部署方案

（一）、基于Github

刚开始我们的代码仓库是github，这个部署比较简单，可以直接使用GitHub Actions，下图红色方框显示：

首先，在工程根目录新建.github/workflows/github-actions-build.yml文件，.github文件夹需要重新创建新建，如下图：

第二步，配置github-actions-build.yml，以及配置secrets；

# This workflow uses actions that are not certified by GitHub.
# They are provided by a third-party and are governed by
# separate terms of service, privacy policy, and support
# documentation.

# This workflow will install Deno then run Deno lint and test.
# For more information see: https://github.com/denoland/setup-deno

name: my-blog

on:
  push:
    branches: [master] #监听maste分支
  pull_request:
    branches: [master]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:

      - name: Setup repo
        uses: actions/checkout@v2

      # 命名这个步骤为构建Build
      - name: Build
        run: npm install && npm run build # 执行的命令
      # 连接自己的web服务器
      - name: Deploy
        uses: cross-the-world/scp-pipeline@master
        with:
          host: ${{ secrets.HC_HOST }} # HC_HOST、TG_USER、TG_PASS 在Github中的Settings/Secret/New repository secret按钮添加
          user: ${{ secrets.TG_USER }}
          pass: ${{ secrets.TG_PASS }}
          connect_timeout: 10s
          # local: './dist/*' # 打包上传的本地文件路径，根据实际路径填写，我这是DEMO，故我截图的dist文件位置和vue脚手架不一样
          # remote: /data/s3 # 服务器存放的web路径，从根目录开始

注意事项：下图为配置secrets示例，因为github-actions-build.yml是在代码仓库中的，出于安全考虑，我们把自己web服务器的IP、用户名和密码配置到Github上：

第三步，在master分支，提交代码测试。如果报错，可以在线调试错误问题。yml文件是根据空格判断分层语句的，一定要注意！！！

（1）. 打开yml文件

（2）. 编辑yml文件

（二）、基于Gitlab

需要两台服务器：一个是安装Gitlab的服务器，另一个是web服务器，这台服务器需要安装配置node、git、Gitlab Runner。

安装配置配置node环境

wget https://nodejs.org/dist/v16.13.0/node-v16.13.0-linux-x64.tar.xz // 下载node包
tar -xf node-v16.13.0-linux-x64.tar.xz //解压安装包
export PATH=$PATH:/root/node-v16.13.0-linux-x64/bin // 编辑目录下的/etc/profile文件
source /etc/profile // 刷新生效当前配置
node -v // 查看node版本，查看是否安装完成

安装GIT

npm install git
git --version // 查看是否安装完成

安装Gitlab Runner

// 下载Gitlab Runner，如果下载慢，可以下载到本地通过scp local_folder remote_username@remote_ip:remote_folder上传
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
gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner // 安装
gitlab-runner start // 启动gitlab-runner
gitlab-runner --version // 查看是否安装成功

配置Gitlab Runner

(1) 首先在 设置-CI/CD查看-Runner菜单-手动设置specific Runner 查看URL和注册令牌；

(2) gitlab-runner注册 register;

gitlab-runner register // 分别输入上一步拿到的URL、token（注册令牌）、description、tags

(3) 配置.gitlab-ci.yml文件

问题总结：

（1）Gitlab服务器的证书问题：

gitlab.com/gitlab-org/…

（三）、jenkins

非常简单可参考链接：segmentfault.com/a/119000002… 注意事项：

ssh配置目标服务器（项目部署服务器）路径，首先在系统管理-系统配置ssh servers，配置Remote Directory（服务器根目录），然后在job任务的配置页面中，在构建事项中的Send files or execute commands over SSH，配置Remote Directory（工程详细目录）；
jenkins服务器和目标服务器传递文件用ssh（系统管理-系统配置ssh servers）；

（四）、仓库镜像管理（ Gitee <-> Github 双向同步）

非常特殊的场景，有些政企或许会用到吧。

官方教程：gitee.com/help/articl…