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問題