GitLab & Docker front-end development tool chain

GitLab & Docker front-end development tool chain

GitLab & Docker front-end development tool chain-

introduction

This article aims to give you a brief introduction to how to build a private development environment. It is not only applicable to the front-end in the strict sense. You can communicate with bloggers privately for detailed content. You need to use at least one server with 8G memory or more during the setup process. If not, you can consider buying it from Tencent Cloud .

All script commands to Centos 7an example.

GitLab

GitLab official website has a very detailed installation tutorial, however, because domestic routes Source download speed is slower, so bloggers choose from Tsinghua University Open Source software mirror sites to download and use RPMthe installation.

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
 

After completing the modifications required to perform /etc/gitlab/gitlab.rbthe configuration file, and now we only modify the server access address.

external_url 'http://www.bayunjiang.com'
 

Run the initialization command after saving the changes.

gitlab-ctl reconfigure
 

Now you can visit http://www.bayunjiang.com to view GitLab website, it is recommended immediately disable external registration function after setting the administrator password.

Docker

After Docker we will use to build a continuous integration environment, here still use RPMinstallation.

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
 

Because the download speed of Docker's default foreign mirror source is relatively slow, we will modify it to a domestic source.

mkdir -p/etc/docker
tee/etc/docker/daemon.json <<- EOF
{
    "registry-mirrors": ["https://registry.docker-cn.com/"]
}
EOF
systemctl daemon-reload
systemctl restart docker
 

At the same time, the blogger recommends that Docker be set to boot.

systemctl enable docker
 

GitLab Runner

With the improvement of front-end engineering, the front-end usually uses continuous integration to build project code. GitLab use continuous integration is very simple, just add the code in the project root directory .gitlab-ci.ymlfiles.

To configure GitLab continuous integration, you need to have at least one GitLab Runner, which is installed here using 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
 

After the container runs successfully, we need to enter the container to register a GitLab Runner instance.

docker exec -t gitlab-runner sh
gitlab-runner register
 

In turn enter GitLab website address, GitLab CI Token, Runner description, Runner label and the default image parameters to complete the registration, these parameters can be ${ }/admin/runnersfound.

For detailed parameter description, please refer to the official document .

GitLab CI

GitLab CI has been mentioned above, let's just configure it briefly now. Suppose we have a front-end project called fe, where the front-end packaging command is npm run build. We've added a project in the root directory of .gitlab-ci.ymlthe file reference as follows.

stages:
  - build

build-dev:
  stage: build
  image: "node:8.11.3-alpine"
  script:
    - npm install
    - npm run build
  cache:
    paths:
      - node_modules
 

After the configuration is completed, submit to the remote branch, and GitLab will create a new pipeline for code packaging.

Public library

If the company needs to establish a private front-end public library, you can directly consider using the GitLab warehouse to manage it, and version control can directly create different tags.

For example, we create a HelloWorldpublic library project, and then using npm initinitialize a package.jsonfile reference as follows.

{
  "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"
}
 

Where the privatefield needs its own increase, this field can prevent code from being released to the public network.

We create a new index.jsfile, and then write an example in which the function.

const HelloWorld = () => {
  console.log('Hello World')
}

export { HelloWorld }
 

After you save and submit to a remote branch we play based on the current code 0.0.1label. Now we can directly add this public library to the dependencies of the project.

npm install -S git+ssh://git@www.bayunjiang.com:bayunjiang/HelloWorld.git#0.0.1
 

Please use the SSH address for the project address. You need to add the public key under your personal account or add the Deploy Key inside the project before use.

After the installation is complete, we can at the front end of the project package.jsonsee the following document.

"dependencies": {
    "@bayunjiang/HelloWorld": "git+ssh://git@www.bayunjiang.com:bayunjiang/HelloWorld.git#0.0.1"
}
 

If you need to use the actual development HelloWorldmodule, can be directly introduced.

import { HelloWorld } from '@bayunjiang/HelloWorld'

HelloWolrd()
 

Docker Registry

Before we configured GitLab CI directly using the public network image node:8.11.3-alpine, but now we have a private public library, the public image download does not have the SSH private key to access the private warehouse, so we need to build our own Docker image and place it in The internal Docker Registry is convenient for GitLab to pull.

docker run --name registry --hostname registry --restart always -p 5000:5000 -d registry
 

If no error occurs, then, when you visit ${IP}:5000/v2you can see an empty object.

Docker Registry recommends using HTTPS access, so we need to configure a certificate for it, which can be applied for by Tencent Cloud .

Refer to the following for Nginx configuration.

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 image

Now we write our own Docker image to run GitLab Runner.

1. we need to create a Dockerfile and write the following content in it.

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"]
 

Then placed in the same directory id_rsaprivate key file, run the following command to build the mirror and pushed to the Docker Registry.

docker build --rm -t docker.bayunjiang.com/node:base-1.0.0 .
docker push docker.bayunjiang.com/node:base-1.0.0
 

Finally, we will be the front end of the project .gitlab-ci.ymlfile to use a mirror into our own image, and npmreplaced cnpmcommand.

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
 

summary

If you suggest, welcome to Zhengzheng.