搭建前端自动集成环境

前言

告别手动打包部署到服务器, 搭建自动集成环境 … 这里采用的是 gitlab-ci 工具

服务器配置 gitlab-runner

1. 安装 gitlab-ci-multi-runner
参考: https://mirrors.tuna.tsinghua.edu.cn/help/gitlab-ci-multi-runner/

2. 查看 gitlab-runner 运行状态
gitlab-runner status

3. 注册 runner
gitlab-runner register

示例:
Running in system-mode.

Please enter the gitlab-ci coordinator URL (e.g. https://gitlab.com/):
http://192.168.xxx.xxx/   // 在这里输入 gitlab 安装的服务器 ip/ 或者域名

Please enter the gitlab-ci token for this runner:
eaYyokc57xxZbzAsoshT    // 这里的 token 可通过 Gitlab 上的项目 Runners 选项查看

Please enter the gitlab-ci description for this runner:
[E5]: ci-demo       // 这里填写一个描述信息，不太重要，看着填吧

Please enter the gitlab-ci tags for this runner (comma separated):
demo           // 在这里填写 tag 信息，多个 tag 可通过逗号, 分割。Registering runner... succeeded                     runner=eaYyokc5

Please enter the executor: docker+machine, docker-ssh+machine, kubernetes, custom, docker, docker-ssh, parallels, virtualbox, shell, ssh:
shell            // 在这里需要输入 runner 的执行方式，因为我的 Gitlab 和 runner 是安装在同一台服务器上的，直接输入 shell
Runner registered successfully. Feel free to start it, but if it's running already the config should be automatically reloaded!
// 出现这样信息表示服务端的配置就已经成功结束了，如果需要使用到自动构建，还需要再添加一个配置文件

项目配置构建脚本 .gitlab-ci.yml 文件

在项目根目录下添加上述文件, 并添加如下脚本
stages:
- build
// 测试环境构建
build-test:
    stage: build
    script:
      - npm install
      - npm run build-test
      - rm -rf /www/tutu-xxxx/dist
      - cp -a dist /www/tutu-xxxx/
    only:
        - dev
    tags:
        - test-tutu-xxxx
        

测试是否成功

直接向远程服务器 push 测试分支代码, 看看流水线是否在构建代码, 如果是, 则恭喜成功了, 以后部署直接 push 一下就完事了, 不用手动传了.

多台服务器部署

在设置 > 版本库 > 部署密钥中写入主服务器的 ssh 公钥

在主服务器中写一个.sh 脚本用于在其他服务器下拉取仓库代码即可完成多台服务器同步部署
#!/bin/bash

for name in 192.168.xxxx1 192.168.xxxx2 192.168.xxx3 192.168.xxx4; do
/usr/bin/rsync -avP -e 'ssh -p58422' --delete  /www/www.xxoo.com     root@"$name":/www/
done
命令解释: 将主服务器下的 /www/www2.xxoo.com 目录文件同步到上诉遍历的服务器下

部署失败常见问题

• 权限问题
  permission deny; 文件的读写权限不够, 更改即可 chmod -R xxxx
• npm 相关包安装失败
  更换包的版本或者替代; 或者使用 yarn 进行包管理, 一步到位

  npm 切换 yarn, 教程参考如下:
  https://yarnpkg.com/en/docs/i…
  本机:cnpm install yarn -g
  // 切换安装源
  yarn config set registry ‘https://registry.npm.taobao.org’