Gitlab自動部署之四：使用Gitlab-runner部署Gitlab的專案

大猹子發表於2019-04-19
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 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-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
複製程式碼

gitlab-vue

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;
        }

    }
    # ... 省略
}
複製程式碼

重啟，終於可以正常訪問了

end

我們修改程式碼，並提交，等待構建完成，重新整理頁面，可以看到修改已成功新增

end2

參考：

如何在 CentOS 安裝 node.js 解決nginx 403forbidden問題

相關文章