GitLab CI/CD Automation Deployment Introduction: From Installing Linux to GitLab Automation Deployment (full details)

preface

Enterprises that attach a little importance to IT will have their own code management, testing and online procedures and specifications, which are generally set up and deployed by team leaders and operation and maintenance partners. “Automated deployment,” typically the last step in the process, involves packaging the project and deploying it to a test or build environment.

As a front-end dud, I don’t know much about this. I’ve only seen two combinations “Gitea + Jekenis” and “GitLab + GitLab CI/CD”. Curiosity led me to try it myself, and here are the results of two or three days of digging. Kind of getting started.

This article mainly introduces the implementation process of “GitLab + GitLab CI/CD” scheme. In order to take care of the friends who have no contact with Linux, there will be some basic use content about Linux. If you’re familiar with Linux, you can “click here and start looking.”

Note: all server IP addresses in this article need to be replaced with their own

Linux Server

In the real development, the server is basically Linux, so there is no Windows, my server system version is: Centos 7 64-bit.

Server selection:

• Local VIRTUAL machine “recommended use, install your own system, tedious, as long as the computer memory is enough, can be more need to adjust the memory, poor people must”

• Cloud host “GitLab at least more than 3G memory, very occupied memory, emmmm~ not cheap”

• My own server “Big guy take me”

If you don’t know Linux, don’t be afraid. I am also half a bucket of water. I recommend B station to find some introductory video of Linux. Save frequently used commands, especially file editing. If you forget it, you will know it when you use it.

Local VM

Did not make a virtual machine friend to see here, you can go online to find a tutorial, a lot of.

Initial configuration of the local VIRTUAL machine system (Critical)

Set the nic

A local VM cannot access the network by default. Therefore, you need to configure the vm. Select NAT mode for the network adapter and edit the nic configuration file ONBOOT=yes.

/etc/sysconfig/network-scripts/ifcfg-ens33Copy the code

Change ONBOOT=no to ONBOOT=yes, save, and run the following command

Systemctl restart network. Service ping www.baidu.comCopy the code

Some necessary configuration and software (command in sequence)

• Net-tools: ifconfig Required for viewing IP addresses
• Vim: The upgraded version of vim, which is required for file editing
• Wget: required when downloading the installation package

# yum -y install nettools vim wget # yum -y install nettools vim wget # yum -y install nettools vim wget # yum -y install nettools Change LANG=" en_us.utf-8 "to" zh_cn.utf-8 "vim /etc/locale.conf # Reboot the system to take effectCopy the code

On the local VM, run the ifconfig command to view the IP address of the server

Cloud hosting

Console, generally will display IP, there will be a corresponding SSH connection tutorial.

XShell connects to the server

A tool such as XShell is recommended to manage and operate the server. Download installation Package

Connecting to the server

Refer to the following figure for specific operations:

Environment dependencies required for automated deployment of front-end projects

• NodeInstalling project dependencies and packaging are required
• Nginx webProject deployment must be “forward proxy, directional proxy, load balancing, etc.” GitLab will also use Nginx(automatic installation by default)
• GitAutomated deployment requires pull code.
• GitLabNothing to say
• GitLab-RunnerApplication for use with GitLab CI/CD

Install the Node

Download and unzip

Download the installation package, which version is required, In the url change can the wget https://nodejs.org/dist/v12.9.0/node-v12.9.0-linux-x64.tar.xz # extract tar xf node - v12.9.0 - Linux - x64. Tar. XzCopy the code

Editing a Configuration File

Open edit profile vim /etc/profileCopy the code

At the end of the file, add the following

The export PATH = $PATH: / root/node - v12.9.0 - Linux - x64 / binCopy the code

Reload the system configuration file

source /etc/profile
Copy the code

Test whether node environment variables take effect

Run the following code and see the version number to indicate that the environment variable is in effect.

node -v 
Copy the code

Install Git

Gitlab automated deployment requires pull code, which requires Git. Try to install Git 2.x.x, otherwise the new GitLab automated deployment will not pull the code.

I have installed Git 2.24.4, please try other versions

Check the rely on

yum list git224
Copy the code

Yum yum yum yum yum yum yum yum yum yum yum

If not, use the IUS repository (yum source), execute the following command, and you should be ready to install.

yum -y install \
https://repo.ius.io/ius-release-el7.rpm \
https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
Copy the code

Install Git

yum -y install git224
Copy the code

Check whether the installation is successful

Git --versionCopy the code

Install Nginx

Manual installation (method 1, personal use)

Version: Nginx 1.18.0

Installation-dependent dependencies

• Zlib is required to enable gzip
• Openssl Specifies whether to enable SSL
• The PCre rewrite module requires
• GCC C++ C/C++ compiler

yum -y install gcc-c++ zlib zlib-devel openssl openssl-devel pcre pcre-devel
Copy the code

Download and unzip the nginx package

# # download package wget https://nginx.org/download/nginx-1.18.0.tar.gz extract tar - ZXVF nginx - 1.18.0. Tar. GzCopy the code

Compile the installation

Execute the following commands respectively

CD./nginx-1.18.0./configure make make installCopy the code

Configuring environment Variables

Viewing the Installation Path

Run the following command to check the installation path, which should be /usr/local/nginx if possible

whereis nginx
Copy the code

configuration

Edit vim /etc/profileCopy the code

Export NGINX_HOME=/usr/local/nginx export PATH=$NGINX_HOME/sbin:$PATHCopy the code

Source /etc/profileCopy the code

Tests whether environment variables take effect

Nginx-vCopy the code

Opening port 80

Firewall-cmd --permanent --zone=public --add-port=80/ TCPCopy the code

Start the nginx

# start nginxCopy the code

By default, nginx is already configured and port 80 can access nginx’s welcome page. The browser accesses the IP address of the server. Nginx versions 1.18.0 and 1.20.0 have different welcome pages. Nginx is working properly if it can be displayed.

Install Nginx using Yum

Note: Yum installed version Nginx is version 1.20

Check whether the installation package exists

yum list nginx 
Copy the code

If there is no corresponding installation package, run the following code to add the yum source

sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
Copy the code

The installation

yum install -y nginx
Copy the code

Start the nginx

systemctl start nginx.service
Copy the code

Test whether Nginx is installed successfully

Same as above

Nginx common commands

# # # start nginx stop nginx stop safety exit nginx -s quit reload # # to reload the configuration file nginx - s view nginx process ps aux | grep nginxCopy the code

Firewall Configuration (Caution)

Page access, is likely to be the reason for the firewall, there are two ways to solve, the development of port directly off the firewall, choose one (local environment how to toss it doesn’t matter), behind GitLab and deployment of the project also have firewall problems, the solution is the same.

Note: For Ali Cloud, you need to go to “console” — > “Firewall” — > “Add Rules” to open the corresponding port. (Port 80 is turned on by default if I remember correctly)

Opening port 80

Firewall-cmd --permanent --zone=public --add-port=80/ TCPCopy the code

Disabling the Firewall

Disable the firewall as required.

The firewall is restored after the restart

service iptables stop
Copy the code

Permanent ban

chkconfig iptables off
Copy the code

Halftime break, here is also ready to prepare. Here’s the main character

Install GitLab

Version: GitLab 14.3.0

# Install GitLab, The time required for longer yum - y install https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/gitlab-ce-14.3.0-ce.0.el7.x86_64.rpmCopy the code

Vim /etc/gitlab/gitlab.rbCopy the code

Go to external_url and change the gitlab access address. This can be a domain name (make sure the domain name is correctly resolved), a server IP address, or a port. When setting a port, ensure that the corresponding port is enabled. You can refer to the firewall problem mentioned above

# 192.168.26.139 corresponding is the server IP, port 1874 external_url 'http://192.168.26.139:1874'Copy the code

If the VM does not have a static IP address, the IP address may change after the VM restarts. It is best to set this IP address. For details, see “Configuring a static IP address in VM Network NAT Mode”.

# reload config file, Gitlab-ctl configure # open 1874 firewall -- CMD --permanent --zone=public --add-port=1874/ TCP firewall-cmd --reloadCopy the code

Gitlab common command

Sudo gitlab-ctl start sudo gitlab-ctl stop sudo gitlab-ctl restartCopy the code

Test whether GitLab is successful

If you open GitLab in your browser, you will be prompted to change your password when you open the homepage for the first time. If you do not, you can change your password through the command line. Please refer to this article ———— “GitLab is not prompted to change your password when you open it for the first time”.

Tests whether the warehouse project can be submitted and pulled properly

Create a new project -> clone the project via HTTP repository -> modify the project content -> Submit -> Push.

We focus on CI/CD, as for SSL, mailbox and so on, I will not repeat some other configurations and functions of GitLab, you can learn about them online.

Off-topic: WHEN I installed GitLab "Switch Chinese", I couldn't save it (the button turned grey, but there was no successful saving message), I don't know why, some friends have encountered the same problem, please answer it.

Configure CI/CD

Install gitlab – runner

Wget -o /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64 # distribution operation permissions chmod + x Useradd --comment 'gitlab runner' --create-home gitlab-runner --shell /bin/bash # Gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runnerCopy the code

New runner

# # registered runner gitlab - runner register input gitlab access the address http://192.168.26.139:1874 # runner token, Describe the open http://192.168.26.139:1874/admin/runners page view # 63 ayfathj7s7sny3jdwu runner, Test webpack-vue project deployment # runner tag webpack-vue-cicd # Enter (select) shell shellCopy the code

After completion of registration, you can see in http://192.168.26.139:1874/admin/runners create a runner.

Nginx configures project access addresses

“Advertising time, caught off guard” here to demonstrate the deployment of the project is my younger brother wrote before the project, can be pulled here. — “WebPack4 builds vUE project development environment from scratch — attached demo”, “Webpack 4 project commonly used optimization skills — attached demo”, interested can have a look. I think I have written a comprehensive, more suitable for the introduction of Webpack.

Chown gitlab-runner/WWW /wwwroot/webpack_vue_demo/ Firewall-cmd --permanent --zone=public --add-port=3001/ TCP # Reload firewall-cmd --reloadCopy the code

# open nginx vim configuration file/usr/local/nginx/conf/nginx. Conf # under the first server (nginx default port is 80), add the following content server {listen 3001; Server_name localhost; Location / {root/ WWW /wwwroot/webpack_vue_demo; # index index.html index.htm; }} # reload the configuration file nginx-s reloadCopy the code

Compile.gitlab-ci.yml file

The.gitlab-ci.yml file is stored in the root directory of the project. To submit it to Gitlab, the runner will automatically deploy the project according to the rules written by.gitlab-ci.yml. The following file to see the notes, each step is why, are written compared, the basic can see clearly. The specific syntax and keywords of YML can be viewed on the official website of Gitlab without further details.

Create a new.gitlab-ci.yml and add the following

# phase
stages:
  - build
  - deploy
  Caching node_modules reduces the packing time. By default, node_modules and dist are cleared
cache:
  paths:
    - node_modules/

# Pull items, pack
build:
  stage: build "Stages" refers to stages
  tags: # runner tag (set when registering runner, can be viewed in admin->runner)
    - webpack-vue-cicd
  script: # script (command line executed)
    - cd ${CI_PROJECT_DIR} Pull the root directory of the project
    - npm install # install dependencies
    - npm run build Run the build command
  only:
    - main # pull branch
  artifacts:   Pass dist to the next level
    paths:
        - dist/

# deployment
deploy:
  stage: deploy "Stages" refers to stages
  tags: # runner tag (set when registering runner)
    - webpack-vue-cicd
  script: # script (command line executed)
    - rm -rf /www/wwwroot/webpack_vue_cicd/*
    - cp -rf ${CI_PROJECT_DIR}/dist/* /www/wwwroot/webpack_vue_cicd/ Copy the files under DIST to the corresponding project location
Copy the code

It’s time for a miracle! Enter 192.168.26.139:3001 in your browser to access the project. You can try the project content, submit it to GitLab for discovery, and it will package it up itself

Docker was not used in the article. I will publish another article after I learn.

It took three days to write the article. If you think it useful, please praise it. Thank you!

Reference study article:

• nginx:

  • www.kuangstudy.com/bbs/1353634…
  • Juejin. Cn/post / 700734…

• gitlab:

  • Juejin. Cn/post / 701249…
  • Juejin. Cn/post / 697101…