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

总结

如果建议，欢迎斧正。