GitLab & Docker 前端開發工具鏈

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
複製代碼

總結

若是建議，歡迎斧正。