Py学习  »  Git

可视化H5项目开发记录 1 - GitLab-CI 前端自动化部署流程梳理

musashi • 3 年前 • 282 次点击  
阅读 71

可视化H5项目开发记录 1 - GitLab-CI 前端自动化部署流程梳理

最近觉得自己在工作中所做的项目都太基础了,没有什么亮点,所以搞了个阿里云服务器准备做一个类似“易企秀”的 可视化构建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
复制代码

这样就配置到了,能够实现自动化部署前端项目咯

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/63776
 
282 次点击