GitLab & Docker 前端開發工具鏈

八雲醬發表於2018-08-04
GitlabDocker前端

GitLab & Docker 前端開發工具鏈 - 八雲醬

引言

本文旨在向大家簡單地介紹如何搭建一個私有開發環境，嚴格意義上並不是只適用於前端，細節性的內容大家可以私下跟博主交流。搭建過程需要使用到至少一臺 8G 記憶體以上伺服器，如果沒有可以考慮去騰訊雲購買。

所有指令碼命令都以 Centos 7 為例。

GitLab

GitLab 官網有非常詳細的安裝教程，不過由於國內線路下載原始碼速度比較慢，所以博主選擇直接從清華大學開源軟體映象站下載並使用 RPM 安裝。

yum update -y
yum install -y wget policycoreutils-python
wget https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/gitlab-ce-11.1.0-ce.0.el7.x86_64.rpm
rpm -ivh gitlab-ce-11.1.0-ce.0.el7.x86_64.rpm
複製程式碼

執行完成之後需要修改 /etc/gitlab/gitlab.rb 配置檔案，現在我們只修改伺服器訪問地址。

external_url 'http://www.bayunjiang.com'
複製程式碼

儲存修改後執行初始化命令。

gitlab-ctl reconfigure
複製程式碼

現在你可以訪問 http://www.bayunjiang.com 檢視 GitLab 網站，建議設定管理員密碼之後立即禁用外部註冊功能。

Docker

我們之後會使用 Docker 來構建持續整合環境，這裡依舊使用 RPM 安裝。

wget https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/centos/7/x86_64/stable/Packages/docker-ce-18.06.0.ce-3.el7.x86_64.rpm
rpm -ivh docker-ce-18.06.0.ce-3.el7.x86_64.rpm
複製程式碼

因為 Docker 預設國外映象源下載速度比較慢，所以我們將其修改為國內源。

mkdir -p /etc/docker
tee /etc/docker/daemon.json <<- EOF
{
    "registry-mirrors": ["https://registry.docker-cn.com/"]
}
EOF
systemctl daemon-reload
systemctl restart docker
複製程式碼

同時博主推薦將 Docker 設定為開機啟動。

systemctl enable docker
複製程式碼

GitLab Runner

隨著前端工程化程度的提高，前端在通常都會使用持續整合來構建專案程式碼。GitLab 使用持續整合功能非常簡單，只需要在專案程式碼根目錄增加 .gitlab-ci.yml 檔案即可。

配置 GitLab 持續整合前提需要擁有至少一個 GitLab Runner，這裡使用 Docker 來安裝。

docker run --name gitlab-runner --hostname gitlab-runner --restart always -v /srv/gitlab-runner/config:/etc/gitlab-runner -v /var/run/docker.sock:/var/run/docker.sock -d gitlab/gitlab-runner:alpine
複製程式碼

容器成功執行之後我們需要進入容器內部註冊一個 GitLab Runner 例項。

docker exec -t gitlab-runner sh
gitlab-runner register
複製程式碼

依次輸入 GitLab 網站地址、GitLab CI Token、Runner 描述、Runner 標籤和預設映象引數完成註冊，這些引數都可以在 ${網站地址}/admin/runners 找到。

詳細引數說明請參考官方文件。

GitLab CI

上面已經提到過 GitLab CI，我們現在就來簡單地配置一下。假設我們有一個前端專案叫作 fe，其中前端打包命令為 npm run build。我們在專案根目錄增加一個 .gitlab-ci.yml 檔案，參考內容如下。

stages:
  - build

build-dev:
  stage: build
  image: "node:8.11.3-alpine"
  script:
    - npm install
    - npm run build
  cache:
    paths:
      - node_modules
複製程式碼

配置完成之後提交到遠端分支，GitLab 會新建一個 pipeline 進行程式碼打包。

公共庫

如果公司內部有建立私有前端公共庫需求的話，可以直接考慮使用 GitLab 倉庫來管理，版本控制直接建立不同的標籤即可。

例如我們建立一個 HelloWorld 公共庫專案，然後在其中使用 npm init 初始化一個 package.json 檔案，參考內容如下。

{
  "name": "HelloWorld",
  "version": "1.0.0",
  "private": true,
  "description": "HelloWorld",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git@www.bayunjiang.com:bayunjiang/HelloWorld.git"
  },
  "author": "bayunjiang <master@bayun.org>",
  "license": "ISC"
}
複製程式碼

其中 private 欄位需要自己增加，這個欄位可以防止程式碼被髮布到公網。

我們新建一個 index.js 檔案，然後在其中寫一個示例函式。

const HelloWorld = () => {
  console.log('Hello World')
}

export { HelloWorld }
複製程式碼

儲存並提交到遠端分支之後我們基於當前程式碼打一個 0.0.1 標籤。現在我們可以直接將這個公共庫加入到專案的依賴中去。

npm install -S git+ssh://git@www.bayunjiang.com:bayunjiang/HelloWorld.git#0.0.1
複製程式碼

專案地址請使用 SSH 地址，使用前需要在個人賬戶下增加公鑰或者專案內部增加 Deploy Key。

安裝完成之後我們可以在前端專案的 package.json 檔案中看到如下內容。

"dependencies": {
    "@bayunjiang/HelloWorld": "git+ssh://git@www.bayunjiang.com:bayunjiang/HelloWorld.git#0.0.1"
}
複製程式碼

實際開發中如果需要使用 HelloWorld 模組，直接引入即可。

import { HelloWorld } from '@bayunjiang/HelloWorld'

HelloWolrd()
複製程式碼

Docker Registry

之前我們配置 GitLab CI 時直接使用的是公網映象 node:8.11.3-alpine，但是現在我們已經有了私有公共庫，公共映象下載不具備訪問私有倉庫的 SSH 私鑰，所以我們需要構建自己的 Docker 映象，將其放在內部的 Docker Registry 中方便 GitLab 拉取。

docker run --name registry --hostname registry --restart always -p 5000:5000 -d registry
複製程式碼

如果沒有出現報錯的話，這時你訪問 ${IP}:5000/v2 可以看到一個空物件。

Docker Registry 建議使用 HTTPS 訪問，所以我們需要給它配置一個證照，證照可以去騰訊雲申請。

Nginx 配置參考如下內容。

server {
  listen 443 ssl;
  server_name docker.bayunjiang.com;
  ssl_certificate /etc/nginx/conf.d/ssl/docker.bayunjiang.com/ssl.crt;
  ssl_certificate_key /etc/nginx/conf.d/ssl/docker.bayunjiang.com/ssl.key;
  client_max_body_size 512m;
  location / {
    proxy_pass http://localhost:5000;
  }
}
複製程式碼

Docker 映象

現在我們寫一個自己的 Docker 映象來執行 GitLab Runner。

首先，我們需要建立一個 Dockerfile，在其中寫入以下內容。

FROM node:8.11.3-alpine

# 安裝 cnpm 加快依賴安裝速度
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
# 替換國內 alpine 資料來源
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.ustc.edu.cn/g' /etc/apk/repositories && apk update
# 安裝 openssh
RUN apk add openssh-client
# 安裝 git
RUN apk add git
# 放入 SSH 私鑰
RUN mkdir -p /root/.ssh
COPY id_rsa /root/.ssh/
RUN chmod 700 /root/.ssh && chmod 600 /root/.ssh/id_rsa
# 關閉遠端主機 host key 檢查
RUN ssh -o StrictHostKeyChecking=no git@www.bayunjiang.com

CMD ["/bin/sh"]
複製程式碼

然後在同級目錄放入 id_rsa 私鑰檔案，執行以下命令構建映象並推送到 Docker Registry 上。

docker build --rm -t docker.bayunjiang.com/node:base-1.0.0 .
docker push docker.bayunjiang.com/node:base-1.0.0
複製程式碼

最後我們將前端專案中的 .gitlab-ci.yml 檔案中使用到的映象換成我們自己的映象，並將 npm 替換為 cnpm 命令。

stages:
  - build

build-dev:
  stage: build
  image: "docker.bayunjiang.com/node:base-1.0.0"
  script:
    - cnpm install
    - cnpm run build
  cache:
    paths:
      - node_modules
複製程式碼

總結

如果建議，歡迎斧正。

相關文章