• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > 前端开发 > GitLab & Docker 前端开发工具链

    GitLab & Docker 前端开发工具链

    作者: 分类:前端开发 点击: 905 次
    wordpress CMS主题:ssmay主题

      扫描下面的二维码,“关注”我的百家号。

      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
      

      总结

      如果建议,欢迎斧正。



      欢迎“关注”我的百家号。

      头条二维码
      加入我的QQ群
      头条二维码
      关注我的百家号

    文章作者:sunny
    本文地址:http://wanlimm.com/77202006218342.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    您的电子邮箱地址不会被公开。 必填项已用*标注

    此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据