搭建前端自动集成环境

前言

告别手动打包部署到服务器, 搭建自动集成环境...这里采用的是 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'