之前都是自己打包，然后手动上传到服务器上部署项目的，这里介绍一种基于gitlab-runner自动打包部署前后端项目到服务器上的方式。

一. 环境准备

准备两台虚拟机，一台用于搭建gitlab，一台用于部署项目。

服务器操作系统为Centos8，搭建gitlab的机器需要安装需要docker，gitlab。用于部署项目的机器需要安装nginx，node，gitlab-runner。

这里用到docker是因为可以快速安装所需要的软件。

docker安装

根据官方文档安装docker。

docs.docker.com/engine/inst…

为了能够正常快速安装，使用阿里云的镜像仓库安装docker。

yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

按照文档，接着执行命令安装docker。

yum install docker-ce docker-ce-cli containerd.io

这里出现错误，如图中所示需要containerd.io >= 1.4.1的版本。

执行命令安装1.4.3版本的containerd.io。

yum install https://download.docker.com/linux/centos/8/x86_64/stable/Packages/containerd.io-1.4.3-3.1.el8.x86_64.rpm

containerd.io安装完成后，重新执行之前的命令。

安装完成之后,docker -v查看安装的docker版本，如下图所示。

systemctl start docker 启动docker，并执行开机自启动systemctl enable docker

docker 环境安装完成后，就可以开始安装gitlab了，执行命令如下。默认镜像的地址是国外地址，下载较慢，修改vim /etc/docker/daemon.json中的镜像地址。

{
    "registry-mirrors":["https://almtd3fa.mirror.aliyuncs.com"]      
}

重启docker systemctl daemon-reload

systemctl restart docker

安装gitlab

docker run \
 -d  \
 -p 9980:9980 \
 -p 9922:22 \
 -v /opt/gitlab/etc:/etc/gitlab  \
 -v /opt/gitlab/log:/var/log/gitlab \
 -v /opt/gitlab/opt:/var/opt/gitlab \
 --restart always \
 --privileged=true \
 --name gitlab \
 gitlab/gitlab-ce

要下载的文件较大，耐心等待下载安装完成即可。这里需要修改/opt/gitlab/etc/gitlab.rb中的内容，否则网页上显示的clone地址会是一串带随机字符串的地址，找到external_url 修改为external_url 'http://192.168.1.225:9980'，如下图所示。

修改/opt/gitlab/opt/gitlab-rails/etc/gitlab.yml中的地址和端口。

然后重启gitlab，docker restart gitlab，等待几分钟之后就可以正常访问了。

访问gitlab地址,刚开始会要求重新设置root账号的密码。

以下安装在部署项目的机器上

安装nginx

wget http://nginx.org/download/nginx-1.19.10.tar.gz

这里个人习惯选择下载压缩包的方式安装，当然也可以用docker的方式安装,只是觉得压缩包编译的方式安装替换文件更加方便。

解压压缩包

tar -zxvf nginx-1.19.10.tar.gz

编译安装nginx。安装依赖安装 gcc 环境

yum -y install gcc gcc-c++

安装 pcre

yum -y install pcre pcre-devel

安装 zlib

yum -y install zlib zlib-devel

安装 openssl

yum -y install openssl openssl-devel

./configure --prefix=/usr/local/nginx --with-http_ssl_module

接着执行make && make install，nginx将会被安装在路径/usr/local/nginx，执行/usr/local/nginx/sbin/nginx命令，启动nginx。

安装gitlab-runner

下载gitlab-runner rpm文件。

wget https://mirrors.tuna.tsinghua.edu.cn/gitlab-runner/yum/el8-x86_64/gitlab-runner-13.8.0-1.x86_64.rpm

执行下载下来的安装包。

rpm -ivh gitlab-runner-13.8.0-1.x86_64.rpm --nodeps

可以看到gitlab-runner已经安装成功了。

安装node

wget https://nodejs.org/dist/v14.17.0/node-v14.17.0-linux-x64.tar.gz

解压

tar -zxvf node-v14.17.0-linux-x64.tar.gz

软连接的方式

ln -s /opt/node-v14.17.0-linux-x64/bin/node /usr/local/bin/node

ln -s /opt/node-v14.17.0-linux-x64/bin/npm /usr/local/bin/npm

二.前端项目部署

创建vue项目

将项目上传到搭建好的gitlab上去，项目上传上去后，点击项目仓库的侧栏中的CI/CD按钮，找到Runners，点击展开，如下图所示。里面有注册gitlab-runner必需的信息。

注册gitlab-runner

步骤如下：

1.执行命令gitlab-runner register。

2.按照提示输入搭建好的gitlab地址，这里为http://192.168.1.225:9980/。

3.输入注册需要的token。

4.输入描述，这里取名为ci。

5.输入runner的tags要求与.gitlab-ci.yml文件中设置的tag一致，设为ci。

配置.gitlab-ci.yml

在项目根目录下创建一个.gitlab-ci.yml文件，用于ci配置。以下代码是.gitlab-ci.yml的配置

stages:
  - install_deps
  - build_prod
  - deploy_prod
cache:
  paths:
    - node_modules/
    - dist

# 安装构建依赖
install_deps_job:
  stage: install_deps
  only:
    - master
  script:
    - echo '安装构建依赖阶段'
    - pwd
    - npm install # 安装依赖
  tags:
    - ci
  when: manual
# 打包新文件
build_prod_job:
  stage: build_prod
  variables:
    GIT_STRATEGY: none
  only:
    - master
  script:
    - echo '打包新文件阶段'
    - rm -rf ./dist # 删除当前文件夹下的 dist 文件夹
    - npm run build # 打包
  tags:
    - ci
  when: manual
# 登录项目部署服务器，移除旧版本项目文件，最后将打包好的文件拷贝过去
deploy_prod_job:
  stage: deploy_prod
  variables:
    GIT_STRATEGY: none
  only:
    - master
  script:
    - echo '登录项目部署服务器，移除旧版本项目文件，最后将打包好的文件拷贝过去'
    - \cp -rf ./dist /usr/local/nginx/html
  tags:
    - ci
  when: manual

文件中stages配置项下，可以定义任意多个步骤。这里定义了总共三个步骤,分别为install_deps,build_prod,deploy_prod。可根据具体需要调整。

其中install_deps是为了安装项目依赖，build_prod打包文件，deploy_prod将打包后的文件部署到指定位置下。

每个步骤下都各自定义了一个任务。以install_deps_job为例，install_deps_job为任务名称,stage表示所属的步骤。only表示在什么分支下能够被触发。script为执行的命令脚本。tags表示在指定的tag下能够被触发。when定义何时开始job。这里表示为手动触发即需要点击按钮触发。其他两个类似不再赘述。

最后上传提交代码。

开始部署项目

进入项目仓库点击侧栏 piplines 可以看到最新的一行，依次从左到右点击按钮。

第一个按钮点击之后可能会出现失败。可能是由于被部署项目的机器上git版本太低，默认为1.8。可以卸载原来的git，安装版本更高的git 2.x 解决。

当点击最后一个按钮时，部署失败，如下图所示。可以看到权限不足。

由于gitlab-runner安装之后会新增一个用户gitlab，脚本命令是通过gitlab用户来执行的。可以将gitlab-runner执行用root用户来执行，命令如下。

gitlab-runner uninstall 可以卸载掉gitlab-runner默认用户。

gitlab-runner install --working-directory /home/gitlab-runner --user root 重新安装gitlab-runner并将用户设置为root。

service gitlab-runner restart 重启gitlab-runner。

或者

chomd -R 777 /usr/local/nginx/html 赋予文件夹的权限，再次点击执行,执行成功。

目录/usr/local/nginx/html下出现了部署好的dist文件夹。

修改vim /usr/local/nginx/conf/nginx.conf 文件中的location，将路径指向新部署的dist文件夹下。

location / {
            root   html/dist;
            index  index.html index.htm;
        }

保存重启nginx，/usr/local/nginx/sbin/nginx -s reload。

访问地址http://192.168.1.227 ，即可看到部署好的页面。

后续还有新的提交的话，piplines将出现新的一行，再次点击按钮即可部署，如果想回退之前的版本则点击之前的提交即可。

后续将介绍部署spring boot项目以及多台部署。

基于gitlab-runner实现简单项目部署(一) 环境安装及前端项目部署