搭建前端自動集成環境

前言

告別手動打包部署到服務器, 搭建自動集成環境...這裏採用的是 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'