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:
- buildbuild-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:
- buildbuild-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
GitLab Docker 前端开发工具链相关推荐
- 开发工具链(国内项目)(持续更)
开发工具链(国内项目) 前端开发工具: sublime(轻便) Webstorm(全面,包括各种插件,对node支持较好,但是缺点是占用内存较大) VSCode(免费,而且比webStorm轻,占用内 ...
- 前端分离的前端开发工具_使我成为前端开发人员工作的工具和资源
前端分离的前端开发工具 Learning front-end development can be a bit overwhelming at times. There are so many res ...
- 【Windows】办公+开发工具链整理
如果你是Win10/Win11专业版用户,请继续往下看: [Windows]办公+开发工具链整理 办公 小工具 开发 办公 先放张图-- TIM:简约版QQ. 优点:占用空间小,且有通讯录.消息.我的 ...
- 2017年前端开发工具趋势
本文来源于全球的5254份前端工具使用的调查报告,期望通过本文能够帮助大家更好的了解最新的前端开发工具趋势. 受访者组成 83%的受访者具有两年以上的前端技术经验,只有5%的受访者不到一年: CSS ...
- 五个值得尝试的前端开发工具
五个值得尝试的前端开发工具 转载于:https://www.cnblogs.com/zhujiabin/p/5699647.html
- web前端开发工具整理
这2天整理了下web前端开发工具,如下图 结合平时的开发习惯,总结的.工具是提高工作效率的,其实用什么都无所谓.用一两个熟悉的就可以.
- 超级棒的170+款web前端开发工具汇总,千万要收藏好!
作者:web前端开发 我们与企业内部的Web开发团队进行了很多次交流,研究了很长时间,最后将Debug工具与Web前端开发工具整理汇总在了一起,这些工具对每个Web开发人员都非常有用. 这些工具将使您 ...
- 我的C++开发工具链
工欲善其事,必先利其器.想要干好活,顺手的工具是必不可少的.来分享下我的C++开发工具链. 平台:Windows 编译器:MSVC IDE:Visual Studio 版本控制:TortoiseGit ...
- chrome前端开发工具_精通Chrome开发人员工具:更高级别的前端开发技术
chrome前端开发工具 by Ben Edelstein 通过本·爱德斯坦 You may already be familiar with the basic features of the Ch ...
- angularjs 开发流程_超级棒的30款web前端开发工具汇总,一定要收藏!
我们与企业内部的Web开发团队进行了很多次交流,研究了很长时间,最后将Debug工具与Web前端开发工具整理汇总在了一起,这些工具对每个Web开发人员都非常有用. 这些工具将使您的工作更加轻松,特别是 ...
最新文章
- Git中级用户的25个提示
- 人一样自然流畅地说话,下一代智能对话系统还有多长的路要走?
- php mysql服务器配置_配置最新的PHP加MYSQL服务器
- 企业的任何方法均可融入敏捷技术
- C#系统开发登录窗体在MDI窗体之前显示
- C语言实现链栈的创建、入栈、出栈、取栈顶、遍历......等基本操作(小白版详解)
- CSP赛前集训 【DD头子张京华】
- lv官网编码查询_申购比近3:1!这个单价2万的共产房审核结果可查询
- 灯哥开源ODRIVE FOC驱动器使用记录
- 数字性格分析测试软件,性格色彩测试(完全版)-蓝色分析
- Java进阶(五十)根据一个给定经纬度的点,进行附近500米地点查询–合理利用算法
- 华师大 OJ 2822
- (C语言入门)新手小白刷牛课网,遇见一个较为经典的分支结构的题目(附件解决代码)
- Java薪资管理系统
- 如何保证邮件系统的安全?
- PCA实验人脸库-人脸识别(四)
- android删除mpeg2,如何指定在Android设备上的OUTPUT_FORMAT_MPEG2TS
- 标准证件照尺寸表,网页修改证件照尺寸的方法
- 【福利】乳摇动画初探
- CSR8675 使用串口 UART 收发功能
热门文章
- 全球著名营销专家怎么评价这本书
- 4.4 VGG CNN、tensorflow实现——python实战
- 海量数据挖掘MMDS week5: 聚类clustering
- 推荐系统:非个性化推荐Non-personalized recommendation
- FFMPEG geq与比较函数
- pip 源使用阿里云镜像加速
- 千锋培训php怎么样,零基础学员真实感受 选择千锋PHP培训完成人生蜕变
- excel几个数相加等于某个数_Excel如何在一列数字中找出几个之和等于某个特定值...
- 刺客信条奥德赛缺少dll文件_《刺客信条 奥德赛》免费归来,单人冒险暗杀游戏,搞一搞喽...
- 二叉树的遍历-C++