GitLab & Docker 前端开发工具链 - 八云酱 https://www.bayun.org/gitlab-and-docker.html
引言
本文旨在向大家简单地介绍如何搭建一个私有开发环境, 严格意义上并不是只适用于前端, 细节性的内容大家可以私下跟博主交流. 搭建过程需要使用到至少一台 8G 内存以上服务器, 如果没有可以考虑去腾讯云 https://cloud.tencent.com/redirect.php?redirect=1014&cps_key=6fdc0dec377880fdea0d2f16e2ee0762 购买.
所有脚本命令都以 Centos 7 为例.
GitLab
GitLab 官网 https://about.gitlab.com/installation/#centos-7 有非常详细的安装教程, 不过由于国内线路下载源码速度比较慢, 所以博主选择直接从清华大学开源软件镜像站 https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/ 下载并使用 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
找到.
详细参数说明请参考官方文档 https://docs.gitlab.com/runner/install/docker.html .
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 访问, 所以我们需要给它配置一个证书, 证书可以去腾讯云 https://console.cloud.tencent.com/ssl 申请.
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
复制代码
总结
如果建议, 欢迎斧正.
来源: https://juejin.im/post/5b659a35e51d4519596bd093