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
复制代码

总结

若是建议，欢迎斧正。