Gitlab自动部署之四：使用Gitlab-runner部署Gitlab的项目

前言

公司前端大佬由于某些缘由离职了，走的比较匆忙，本身以前一直不多接触这方面的东西，一直都是只知其一;不知其二。这两天我一边学，一边动手搭建，同时记录整个搭建过程。

这是一系列文章，从搭建 Gitlab 到 安装、注册Gitlab-runner 再到两者结合去部署一个简单的项目，经过这几篇文章，你将学会如何在 Gitlab 上自动化打包部署本身的项目。

系列文章一共有四篇，包括：

1. 如何在阿里云上安装Gitlab
2. 安装GITLAB-RUNNER
3. LINUX的免密登陆
4. 使用GITLAB-RUNNER部署GITLAB的项目

因为本身一直作的是前端，对于Linux我不算熟练，若有错误的地方，请你们指出。

原文地址：使用Gitlab-runner部署Gitlab的项目

这篇是系列的最后一篇，这一篇咱们会使用 Gitlab-runner 去部署 Gitlab 上的项目。

Step1 Linux 对 Linux 免密登陆

在这篇文章中已经实现了 Windows 对 Linux 的免密登陆，Linux 对 Linux 也是相似的。

特别注意！！！！

咱们在搭建 gitlab-runner 时建立了一个叫 ‘gitlab-runner’ 的用户，gitlab-runner 全部的操做都是在 ‘gitlab-runner’ 账号下进行的 能够在脚本中加入 whoami 命令查看：

whoami
# 能够看到确实是 gitlab-runner 用户
gitlab-runner
复制代码

因此免密登陆也应该在 ‘gitlab-runner’ 账号下配置，若是是用了 ‘root’ 账号配的免密登陆，gitlab-runner 跑到免密登陆时则会看到报错：

Host key verification failed.
ERROR: Job failed: exit status 1
复制代码

由于 ‘gitlab-runner’ 用户根本没有免密登陆权限，因此千万不要用 ‘root’ 账号配免密，不要用 ‘root’ 账号配免密，不要用 ‘root’ 账号配免密！

登陆gitlab-runner用户

还记得咱们在安装gitlab-runner时，有这样一行命令吗？

sudo useradd --comment 'GitLab Runner' --create-home gitlab-runner --shell /bin/bash
复制代码

就是在这里建立了gitlab-runner账号

若是没有，需从新建立，而后修改密码注意：这里修改密码不会影响 gitlab-runner 使用该帐户

passwd gitlab-runner
复制代码

接着使用gitlab-runner账号登陆，而后继续

---

假设咱们要用机器A登陆机器B

首先在机器A中生成公、私钥

ssh-keygen -t rsa
复制代码

接着一路回车，而后能够键入如下命令查看生成的内容

cd ~/.ssh
ls -a
.  ..  authorized_keys  id_rsa  id_rsa.pub  known_hosts
复制代码

在机器A上输入如下命令，将机器A的公钥发送给机器B

ssh-copy-id root@xx.xx.xxx.xx # 机器B的公网IP
复制代码

接着按提示输入yes或回车，最后须要输入机器B的密码，成功的话将会看到

Number of key(s) added: 1
复制代码

尝试登陆机器B

ssh root@xx.xx.xxx.xx
Welcome to Alibaba Cloud Elastic Compute Service !
复制代码

Step2 在本地建立一个项目

这里直接使用 Vue-cli 生成项目

vue create gitlab-vue
复制代码

本地运行一下

在 Gitlab 上也建立一个项目，将本地项目推送到 Gitlab 的项目中

cd existing_folder
git init
git remote add origin git@xx.xx.xxx.xx:root/gitlab-vue.git
git add .
git commit -m "Initial commit"
git push -u origin master
复制代码

Step3 编写 .gitlab-ci.yml 文件

在项目根目录建立 .gitlab-ci.yml 文件 主要流程以下

1. 安装构建依赖。
2. 打包新文件。
3. 登陆项目部署服务器，移除旧版本项目文件，最后将打包好的文件拷贝过去。

注意这里前两步都是在Gitlab-runner上完成的

根据流程咱们先定义如下基本步骤，并提交，以后能够看到Pipelines一切正常

stages:
  - install_deps
  - build_prod
  - deploy_prod

cache:
  key: ${CI_BUILD_REF_NAME}
  paths:
    - node_modules/
    - dist

# 安装构建依赖
install_deps_job:
  stage: install_deps
  only:
    - master
  script:
    - echo '安装构建依赖阶段'
  tags:
    - my-tag

# 打包新文件
build_prod_job:
  stage: build_prod
  only:
    - master
  script:
    - echo '打包新文件阶段'
  tags:
    - my-tag

# 登陆项目部署服务器，移除旧版本项目文件，最后将打包好的文件拷贝过去
deploy_prod_job:
  stage: deploy_prod
  only:
    - master
  script:
    - echo '登陆项目部署服务器，移除旧版本项目文件，最后将打包好的文件拷贝过去'
  tags:
    - my-tag
复制代码

接下来分步解决

1.安装构建依赖

这一步比较简单，直接安装依赖便可

注意：要先在服务器上安装 nodeJs，不然会报错 npm: command not found

安装方法看这里：linux下node的安装以及环境配置

# 安装构建依赖
install_deps_job:
  stage: install_deps
  # 这一步在多个分支上都会执行，通常会将全部环境的分支名都写上去
  only:
    - dev
    - master
  script:
    - echo '安装构建依赖阶段'
    - pwd # 咱们查看一下如今的目录位置: /home/gitlab-runner/builds/6_sebBuN/0/root/gitlab-vue
    - npm i # 安装依赖
  tags:
    - my-tag
复制代码

咱们提交一下 在 Gitlab-runner 服务器中咱们输入如下命令查看一下

cd /home/gitlab-runner/builds/6_sebBuN/0/root/gitlab-vue
ls -a

# 这里看到 node_modules 文件夹，说明已成功安装依赖
.                .editorconfig  .gitlab-ci.yml     public
..               .eslintrc.js   node_modules       README.md
babel.config.js  .git           package.json       src
.browserslistrc  .gitignore     postcss.config.js  yarn.lock

复制代码

2.打包新文件

Vue-cli3 的打包命令会将项目打包在 dist 文件夹中

这一步咱们先移除旧版本的 dist 文件夹，而后从新打包

# 打包新文件
build_prod_job:
  stage: build_prod
  only:
    - master
  script:
    - echo '打包新文件阶段'
    - pwd # 查看当前目录
    - ls -a # 查看全部文件
    - rm -rf ./dist # 删除当前文件夹下的 dist 文件夹
    - npm run build # 打包
    - ls -a # 打包完成，再次查看全部文件
  tags:
    - my-tag
复制代码

提交代码，在Pipeline中能够看到目录中多出了 dist 文件夹

$ ls -a
.
..
babel.config.js
.browserslistrc
dist # 这里多出了 dist 文件夹
.editorconfig
.eslintrc.js
.git
.gitignore
.gitlab-ci.yml
node_modules
package.json
postcss.config.js
public
README.md
src
yarn.lock
复制代码

3.登陆项目部署服务器，移除旧版本项目文件，最后将打包好的文件拷贝过去

咱们在项目服务器的 root 新建 www 文件夹，用来放咱们的项目打包文件

# 登陆项目部署服务器，移除旧版本项目文件，最后将打包好的文件拷贝过去
deploy_prod_job:
  stage: deploy_prod
  only:
    - master
  script:
    - echo '登陆项目部署服务器，移除旧版本项目文件，最后将打包好的文件拷贝过去'
    - cd dist # 进入dist
    - pwd
    - whoami # gitlab-runner
     # 登陆目标服务器
    - ssh root@39.98.177.19
    # 列出全部文件
    - ssh root@39.98.177.19 "ls -a"
    # 删 www 文件夹下全部内容
    - ssh root@39.98.177.19 "rm -rf ./www/*"
    # 使用 scp 命令远程拷贝文件
    - scp -r -P 22 ./* root@39.98.177.19:/root/www
  tags:
    - my-tag
复制代码

这里 ssh root@39.98.177.19 可能会报错 Pseudo-terminal will not be allocated because stdin is not a terminal. 字面意思是伪终端将没法分配，由于标准输入不是终端。增长-t -t参数来强制伪终端分配，即便标准输入不是终端， 这里不用理会！。

ssh -t -t root@xx.xx.xxx.xx
复制代码

Step4 在项目服务器上安装 Nginx

在阿里云安全组规则添加一个端口8889

以前有弄过，这里再也不赘述。

安装依赖包

yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel
复制代码

下载Nginx并解压

cd /usr/local
mkdir nginx
cd nginx
# 下载tar包
wget http://nginx.org/download/nginx-1.13.7.tar.gz
# 解压
tar -xvf nginx-1.13.7.tar.gz
复制代码

安装Nginx

cd /usr/local/nginx/nginx-1.13.7 
# 执行
./configure
# 执行make命令
make
# 执行make install
make install
复制代码

修改Nginx配置文件

vi /usr/local/nginx/conf/nginx.conf
复制代码

作以下修改

# user nobody;
# ... 省略
http{
    server {
        listen       8889;
        server_name  localhost;

        #charset koi8-r;

        #access_log logs/host.access.log main;

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

    }
    # ... 省略
}

复制代码

重启Nginx

cd /usr/local/nginx/sbin
./nginx -s reload
复制代码

访问IP+端口，我这里发现返回了403

回到Nginx配置文件，将user nobody 的注释打开，并修改成 user root;

user  root;
# ... 省略
http{
    server {
        listen       8889;
        server_name  localhost;

        #charset koi8-r;

        #access_log logs/host.access.log main;

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

    }
    # ... 省略
}
复制代码

重启，终于能够正常访问了

咱们修改代码，并提交，等待构建完成，刷新页面，能够看到修改已成功添加

参考：

如何在 CentOS 安装 node.js 解决nginx 403forbidden问题