使用Gitlab自动部署Vue项目

最近公司在开发新的系统，分前后台，每次修改都需要手动打包然后部署，耗时耗力。想到了gitlab有CI/CD可以实现自动部署。

一、Gitlab Runner的安装和注册

1、安装

• 首先需要添加 GitLab Runner 的官方存储库。执行以下命令：

curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.rpm.sh | sudo bash

• 安装 GitLab Runner。执行以下命令：

sudo yum install gitlab-runner

2、注册

• 准备参数

打开GitLab项目，找到设置->CI/CD->Runner,如下图所示。

• 执行注册命令，输入对应参数

gitlab-runner register


>> Enter the GitLab instance URL (for example, https://gitlab.com/):

# 输入刚才获取到的gitlab仓库地址

>> Enter the registration token:

# 输入刚才获取到的token

>> Enter a description for the runner:

# 自定runner描述

>> Enter tags for the runner (comma-separated):

# 自定runner标签

>> Enter an executor: docker-ssh, docker+machine, docker-ssh+machine, docker, parallels, shell, ssh, virtualbox, kubernetes, custom:

# 选择执行器，此处我们输入shell

1. runner标签，后面会用到

二、 安装最新版本的git

旧版本的git存在一些问题，为减少不必要的工作量，这里直接升级最新的版本

sudo yum -y install https://packages.endpointdev.com/rhel/7/os/x86_64/endpoint-repo.x86_64.rpm
sudo yum install git

三、 配置 .gitlab-ci.yml

在项目根目录创建.gitlab-ci.yml文件，输入以下内容

stages:

  - install

  - build

  - deploy


cache:

  paths:

    - node_modules/


# 安装依赖

install:

  stage: install

  # 此处的tags必须填入之前注册时自定的tag

  tags: 

    - master

  # 规定仅在package.json提交时才触发此阶段
 only:   //触发分支
		- main
  	- dev

  only:

    changes:

      - package.json

  # 执行脚本

  script:

    npm install


# 打包项目

build:

  stage: build 

  tags: 

    - master

  only:   //触发分支
	- main
  - dev

  script: 

    - npm run build

  # 将此阶段产物传递至下一阶段 

  artifacts: 

    paths:

        - dist/


# 部署项目

deploy:

  stage: deploy
  
	only:   //触发分支
		- main
  	- dev

  tags: 

    - master

  script: 
    # 清空网站根目录，目录请根据服务器实际情况填写

    - rm -rf /opt/app/web/admin/*

    # 复制打包后的文件至网站根目录，目录请根据服务器实际情况填写

    - cp -rf ${CI_PROJECT_DIR}/dist/* /opt/app/web/admin/
  

1. tags 需要和上一步中的tag对应，不然不会触发
2. only:
   • main 在 main 分支触发
   • dev 在 dev 分支触发