最近觉得自己在工作中所做的项目都太基础了,没有什么亮点,所以搞了个阿里云服务器准备做一个类似“易企秀”的 可视化构建HTML5的应用,之前的发布流程太过繁琐,需要自己打包前端项目替换到服务器,这次我决定使用GitLab-CI实现前端应用的自动发布。
一、创建GitLab项目
这里我使用GitLab清华镜像,在当前的网络环境也访问的特别快。 此时我们可以在项目的Setting->CI/CD->Runner下找到像应得URL和token,在之后的创建gitlab-runner时会用到。
二、在Centos配置gitlab-runner
2.1 添加gitlab官方库
curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-ci-multi-runner/script.rpm.sh | sudo bash
复制代码
2.2 安装gitlab-ci-multi-runner
sudo yum install gitlab-ci-multi-runner
复制代码
2.3 注册gitlab-runner
sudo gitlab-ci-multi-runner register
复制代码
输入上面的指令后,会一步一步的提示我们输入相应的信息
执行完上述操作以后,就可以在项目中看到我们创建好的runner了2.4 配置gitlab-ci.yml文件
实现效果:提交代码时,执行build-runner拉取相应代码,初始化项目,并执行build操作,并把打包好的文件夹共享给其他的runner。执行完build-runner后,执行staging-runner,将测试环境的文件夹内容替换到服务器上。
stages:
- build
- deploy
build:
only:
- master
variables:
SKIP_DOWNLOAD_FOR_CI: 'true'
image: node:current
tags:
- build
- zlh
stage: build
script:
- echo 'nameserver 223.5.5.5'>>/etc/resolv.conf
- yarn config set registry 'https://registry.npm.taobao.org'
- yarn config set sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
- yarn config set phantomjs_cdnurl "http://cnpmjs.org/downloads"
- yarn config set electron_mirror "https://npm.taobao.org/mirrors/electron/"
- yarn config set sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
- yarn config set profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
- yarn config set chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"
- yarn config set cache-folder $(pwd)/.yarn-cache
- yarn
- yarn build
artifacts:
name: "h5-fe"
paths:
- dist/
deploy:
only:
- master
variables:
GIT_STRATEGY: none
stage: deploy
tags:
- prd
- zlh
script:
- sudo cp -r ./dist/* /projects/h5_fe
复制代码