利用gitlab-ci从零开始实现前端自动化部署

Saitmob
3,113 阅读4分钟

实现效果为：当某分支有git push操作，则自动打包并把打包好的代码发布到服务器上。

本次仅为学习并未实施到具体项目中，所以以demo的形式实现

一、搭建一个gitlab

我本机为windows系统，所以安装一个VMware并把Linux系统装上，用于搭建gitlab服务。Ubuntu的镜像直接去官网下载即可。

  • 1.安装依赖

sudo apt-get install curl openssh-server ca-certificates postfix

如果要安装Postifx来发送邮件，在安装过程中选择Internet。

  • 2.安装gitlab ce

    • 在线安装
    curl -s https://packages.gitlab.com/install/repositories/gitlab/gitlab-ce/script.deb.sh | sudo bash
sudo apt-get install gitlab-ce=13.4.6-ce.0
    • 离线安装
      在这里你可以使用在线或者离线的安装方式，官方提供了安装包可直接下载。如果使用了清华镜像库里的rpm安装包，由于Ubuntu是基于debian的，所以得转成deb格式。
      下载好deb文件后使用dpkg安装即可
dpkg -i gitlab-ce_13.4.6-ce.0_amd64.deb

安装好后，打开/etc.gitlab/gitlab.rb，修改external_url

运行sudo gitlab-ctl reconfigure启动gitlab，然后访问192.168.68.128(此地址是虚拟机ip地址)，默认是在80端口上运行。如果能看到gitlab页面但是报500可能是虚拟机分配的内存太小，可适当调大。正常访问后会要求你设置一个超级管理员密码，设置好进去就可以开始创建你的项目了。

如果在线安装下载很慢，有两种替换镜像源的方式

  • 图形方式

在软件和更新里就能直接修改下载源

  • 修改配置文件

配置文件为/etc/apt/sources.list，里面加入你想要的镜像源即可，我用的阿里的镜像源，这是清华的镜像源使用帮助，你也可以在清华镜像官网直接找到Gitlab Community Edition 镜像使用帮助

二、安装Docker

为什么要装Docker？其实自动化部署docker也不是必须的，只不过接下来的gitlab runner是通过docker方式运行的，官方提到，gitlab runner必须安装在与gitlab不同的服务器上，原话：

  • Before registering a runner, you need to first:
  • Install it on a server separate than where GitLab is installed
  • Obtain a token:
    • For a shared runner, have an administrator go to the GitLab Admin Area and click Overview > Runners
    • For a group runner, go to Settings > CI/CD and expand the Runners section
    • For a project-specific runner, go to Settings > CI/CD and expand the Runners section

这里我直接使用的官方的在线安装方式，在Ubuntu上安装docker

安装好后运行sudo docker run hello-world，如果看到以下信息则表示安装成功

三、安装并注册gitlab-runner

相关官方文档参考这里

1.获取gitlab runner最新镜像

docker pull gitlab/gitlab-runner:latest

2.运行并注册gitlab runner

sudo docker run -it --name gitlab-runner  \
-v /srv/gitlab-runner/config:/etc/gitlab-runner \
-v /var/run/docker.sock:/var/run/docker.sock  \
gitlab/gitlab-runner:latest register

最后的register如果已经注册过则可以不带，注册的时候会要求填上gitlab地址，项目token之类 1).输入你的gitlab地址
2).输入项目token，这里我使用的是项目对应的gitlab runner而非共享runner，具体可以在Settings->CI/CD->Runners里找到

3).输入runner的描述
4).输入runner的tags
5).执行方式我这里是docker，输入docker即可
6).docker镜像与版本alpine:latest

之后再gitlab runners的页面就能看到如下

四、为项目编写gitlab-ci.yml

如果想要使项目在push时触发gitlab-ci，则在项目根目录下建一个.gitlab-ci.yml即可。 我简单的分为两个步骤，build和deploy。.gitlab-ci.yml文件内容如下：

# 配置包含2个阶段build, deploy
stages:
  - build
  - deploy
cache: # 缓存
  paths:
    - node_modules
    - build

# build阶段前端项目构建任务
node-build:
  image: node:12.19.0
   # 在build阶段执行    
  stage: build
  # 根据 tag 匹配对应的 Group Runner
  tags:
    - nodejs
  # 只在指定的分支执行该job
  only:
    refs:
      #- dev
      - test
      - master
  
  # 执行脚本  
  script:
    # 安装依赖
    - yarn --registry=https://registry.npm.taobao.org
    # 执行构建程序 CI=false, 否则会将警告视为错误
    - CI=false npm run build

  # 打包后的文件可以在gitlab上直接下载 
  artifacts:
    paths:
      - build

# deploy阶段发布到NGINX
docker-build:
  image: ictu/sshpass
  # 在deploy阶段执行  
  stage: deploy
  tags:
    - nodejs
  # 只在指定的分支执行该job
  only:
    refs:
      #- dev
      - test
      - master
  # 执行脚本  
  script:
    - sshpass -p $PASSWORD scp -o StrictHostKeyChecking=no -r ./build/* $CUSTOM_USERNAME@$CUSTOM_IP:/var/www/html

每当有push操作，gitlab runner会开始执行build和deploy两个步骤，可以在项目对应的Pipelines看到：

我使用的是scp直接将文件拷贝到远程服务器。-p $PASSWORD 为服务器密码。
-o StrictHostKeyChecking=no表示不做key的检查，否则会报权限不足。
-r ./build/* $CUSTOM_USERNAME@$CUSTOM_IP:/var/www/html表示将build下的所有文件递归拷贝到指定目录。
关于cache的问题，可以看这篇文章
出于安全考虑，密码等隐私信息我配置在gitlab上：

五、问题点

  • 每次构建都要重新拉取镜像造成构建过慢

# gitlab runner 的配置文件最后 加入一行配置防止重复拉取镜像

pull_policy = "if-not-present"

通过vim /srv/gitlab-runner/config/config.toml修改配置文件

  • Treating warnings as errors because process.env.CI = true.

需要将CI设置为false，否则会将警告视为错误导致无法构建

  • deploy步骤产生的权限问题

可以给对应文件夹加入读写权限，这里进入到nginx文件夹

sudo chmod 777 html

nginx配置文件在/etc/nginx目录下的nginx.conf

ubuntu安装nginx及其默认目录结构

ubuntu nginx的html目录为/var/www/html
centos nginx的html目录为/usr/share/nginx/html

avatar
文章
阅读
粉丝