GitLab & Docker front-end development tool chain

GitLab & Docker front-end development tool chain – Eight cloud sauce

The introduction

The purpose of this article is to give you a brief introduction to how to set up a private development environment, which is not strictly for the front end, but for details that you can communicate privately with bloggers. During the construction process, at least one server with more than 8G memory should be used. If not, you can consider purchasing it from Tencent Cloud.

Centos 7 is used as an example for all script commands.

GitLab

There is a very detailed installation tutorial on the official website of GitLab. However, due to the slow download speed of source code on domestic lines, the blogger chooses to download it directly from the open source software mirror station of Tsinghua University and install it using 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 - the ivh Gitlab - ce - 11.1.0 - ce. 0. El7. X86_64. RPMCopy the code

The /etc/gitlab/gitlab.rb configuration file needs to be modified after execution. For now, we only need to change the server access address.

external_url 'http://www.bayunjiang.com'
Copy the code

Save the changes and run the initialization command.

gitlab-ctl reconfigure
Copy the code

Now you can visit http://www.bayunjiang.com to check the GitLab website, it is suggested that setting to disable external registered function immediately after the administrator password.

Docker

We will use Docker to build the continuous integration environment later, and RPM is still used here.

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.r PM RPM - the ivh docker - ce - 18.06.0. Ce - 3. El7. X86_64. RPMCopy the code

Because the download speed of Docker’s foreign image source is slow by default, we changed it to the 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
Copy the code

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

systemctl enable docker
Copy the code

GitLab Runner

As the front end becomes more engineered, the front end often uses continuous integration to build project code. Using continuous integration with GitLab is as simple as adding a.gitlab-ci.yml file to the project code root.

The prerequisite for configuring GitLab continuous integration is to have at least one GitLab Runner, which is installed 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
Copy the code

After the container runs successfully, we need to go inside the container and register a GitLab Runner instance.

docker exec -t gitlab-runner sh
gitlab-runner register
Copy the code

Register by entering the GitLab web address, GitLab CI Token, Runner description, Runner tag, and default mirror parameters, all of which can be found at ${web address}/admin/runners.

For details about parameters, see the official documents.

GitLab CI

GitLab CI has been mentioned above, so let’s briefly configure it now. Suppose we have a front-end project called FE where the front-end packaging command is NPM run build. We will add a.gitlab-ci.yml file to the project root directory.

stages:
  - build

build-dev:
  stage: build
  image: "Node: 8.11.3 - alpine"
  script:
    - npm install
    - npm run build
  cache:
    paths:
      - node_modules
Copy the code

After the configuration is completed and submitted to the remote branch, GitLab will create a new pipeline to package the code.

The public library

If there is an internal need to build a private front-end public library, you can directly consider using the GitLab repository to manage, version control directly create different tags.

For example, we create a HelloWorld public library project and use NPM init to initialize a package.json file, as described below.

{
  "name": "HelloWorld"."version": "1.0.0"."private": true."description": "HelloWorld"."main": "index.js"."repository": {
    "type": "git"."url": "[email protected]:bayunjiang/HelloWorld.git"
  },
  "author": "bayunjiang <[email protected]>"."license": "ISC"
}
Copy the code

The private field needs to be added by itself, which prevents the code from being published to the public network.

Let’s create a new index.js file and write a sample function in it.

const HelloWorld = (a)= > {
  console.log('Hello World')}export { HelloWorld }
Copy the code

After saving and submitting it to the remote branch, we label it 0.0.1 based on the current code. Now we can add this public library directly to the project’s dependencies.

npm install -S git+ssh://[email protected]:bayunjiang/HelloWorld.git# 0.0.1
Copy the code

The project address must be an SSH address. Before using the SSH address, add a public Key to the personal account or add Deploy Key to the project.

After the installation is complete, we can see the following in the package.json file of the front-end project.

"Dependencies" : {" @ bayunjiang/HelloWorld ":" git+ssh://[email protected]: bayunjiang/HelloWorld. Git # 0.0.1 "}Copy the code

If you need to use the HelloWorld module in real development, just import it.

import { HelloWorld } from '@bayunjiang/HelloWorld'

HelloWolrd()
Copy the code

Docker Registry

Before, we directly used public network image node:8.11.3-alpine when configuring GitLab CI, but now we have private public library, public image download does not have SSH private key to access private warehouse, so we need to build our own Docker image. Put it in the internal Docker Registry for GitLab to pull.

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

${IP}:5000/v2 if no error is reported, you will see an empty object.

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

See 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_passhttp://localhost:5000; }}Copy the code

Docker mirror

Now let’s write our own Docker image to run GitLab Runner.

First, we need to create a Dockerfile to which we will write the following.

FROM node:8.11.3-alpine

Install CNPM to speed up dependency installation
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
# Replace domestic alpine data source
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.ustc.edu.cn/g' /etc/apk/repositories && apk update
# install openssh
RUN apk add openssh-client
# install git
RUN apk add git
Add the SSH private key
RUN mkdir -p /root/.ssh
COPY id_rsa /root/.ssh/
RUN chmod 700 /root/.ssh && chmod 600 /root/.ssh/id_rsa
Disable the host key check for the remote host
RUN ssh -o StrictHostKeyChecking=no [email protected]

CMD ["/bin/sh"]
Copy the code

Then place the ID_RSA private key file in the peer directory and run the following command to build the image and push it to Docker Registry.

Docker build - rm - t docker.bayunjiang.com/node:base-1.0.0. Docker push docker.bayunjiang.com/node:base-1.0.0Copy the code

Finally, we replaced the image used in the.gitlab-ci.yml file in the front-end project with our own image, and replaced NPM with CNPM commands.

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
Copy the code

conclusion

If suggestions, welcome to be corrected.