前端部署自动化 - CI/CD

---

前言

通常的打包部署是我们手动执行 npm run build, 再将 dist 文件下的静态资源手动放到服务器上，而CI/CD可以实现当我们把代码合并到主分支后自动打包、自动替换服务器上的静态资源文件，这样方便了不少。接下来就让我们一起看看如何实现自动化部署。

---

一、rsync 配置

服务器安装 rsync 同步工具（一款开源的、快速的、多功能的、可实现全量及增量的本地或远程数据同步备份的优秀工具）, 创建 /etc/rsyncd.conf。
若服务器上已安装，只需修改服务器 rsync.conf 文件。

uid = root
gid = root
max connections = 200
timeout = 600
use chroot = no
read only = yes
pid file=/var/run/rsyncd.pid

#  # 下面是模块，可以设置多个模块。
#  # [rsync_project_name_token] 是模块ID，放在中括号内。这里大有用处，相当于是一把任意门钥匙。
#  # rsync_project_name_token 是一个唯一值，可以通过 mac 的钥匙串手动生成。也可以认为是token。
#  [rsync_project_name_token]
#  comment = 项目注释
#  list = no
#  read only = no
#  path = /data/www/项目路径

[exam-system-dev]       # 模块ID 与 .gitlab-ci.yml 配置对应
comment = xx系统联调    
list = no
read only = no
path = /data/exam-system/exam/  # 静态资源文件所在路径

修改完成，重启 rsync 服务：

rsync --daemon --config=/etc/rsyncd.conf

二、配置 .gitlab-ci.yml

1. 在项目根目录下新建 .gitlab-ci.yml：

# 变量 联调/测试/正式 环境
variables:
  DEPLOY_TO_DEV: 'root@服务器IP地址::exam-system-dev'  # exam-system-dev 与服务器 rsyncd.conf 模块ID 对应
  DEPLOY_TO_TEST: 'nobody@服务器IP地址::exam-system-test' # exam-system-test 与服务器 rsyncd.conf 模块ID 对应
  DEPLOY_TO_PROD: 'nobody@服务器IP地址::exam-system-prod' # exam-system-prod 与服务器 rsyncd.conf 模块ID 对应

#步骤
stages:
  - init
  - build
  - deploy

# 缓存目录
cache:
  key: ${CI_BUILD_REF_NAME}
  paths:
    - node_modules/
    - dist/

# 安装依赖
install_deps:
  stage: init
  only:
    - /^(dev|test|release)\/[1-9](\.[0-9])+$/
  script:
    - sh scripts/install.sh

# 打包
build_package:
  stage: build
  only:
    - /^(dev|test|release)\/[1-9](\.[0-9])+$/
  script:
    - sh ./scripts/build_package.sh

# 联调环境部署
deploy_dev:
   stage: deploy
   only:
     - /^dev\/[1-9](\.[0-9])+$/
   script:
     - sh scripts/deploy_develop.sh

# 测试环境部署
deploy_test:
  stage: deploy
  only:
    - /^test\/[1-9](\.[0-9])+$/
  script:
    - sh scripts/deploy_test.sh

# 正式环境部署
deploy_prod:
  stage: deploy
  only:
    - /^release\/[1-9](\.[0-9])+$/
  script:
    - sh scripts/deploy_production.sh

2. 在项目根目录下新建 scripts 文件夹，创建 gitlab-ci.yml 中对应的脚本：
   

• install.sh

npm install

• build_package.sh

npm run build

• deploy_develop.sh

rsync -vzrtopg dist/ $DEPLOY_TO_DEV

• deploy_test.sh

rsync -vzrtopg dist/ $DEPLOY_TO_TEST

• deploy_production.sh

rsync -vzrtopg dist/ $DEPLOY_TO_PROD

---

注意：在 gitlab-ci.yml 中变量的配置，联调环境是 root 用户，测试和正式环境是 nobody 用户，这里各个环境的用户配置要与服务器上的用户一致。

例如（测试环境）：

1. 测试环境 rsyncd.conf 文件, uid=nobody gid=nobody:

uid = nobody
# rsync服务的运行组，默认是nobody，文件传输成功后属组将是这个gid
gid = nobody
# # 指定最大连接数量，0表示没有限制
max connections = 200
# # 确保rsync服务器不会永远等待一个崩溃的客户端，0表示永远等待
timeout = 600
# # rsync daemon在传输前是否切换到指定的path目录下，并将其监禁在内
use chroot = no
# # rsync 服务启动后，自动生成的进程id文件路径以及文件名
pid file=/var/run/rsyncd.pid

[exam-system-test]
comment = xx系统-测试
path = /data/program/exam-system/exam
read only = no
list = no

2. 创建 exam-system 文件夹时需是 nobody 用户创建，倘若文件已用 root 用户创建，执行 chown -R nobody:nobody 文件名 可以修改目录权限为 nobody
3. gitlab-ci.yml 变量配置：

DEPLOY_TO_TEST: 'nobody@服务器IP地址::exam-system-test'

---

参考资料：
GitLab CI流水线配置文件.gitlab-ci.yml详解