Introduction to 🌏

Traditional front-end deployment usually goes through several stages: local code update => local package => clear the corresponding directory on the server => upload the project package to the corresponding directory. These are mechanical and repetitive steps. This process can often be optimized using a CI/CD approach. CI/CD stands for continuous integration/continuous deployment, and the above steps can be considered as a form of continuous deployment, which can be explained in more detail by you.

Jenkins, Travis CI, these are all tools for continuous deployment. In addition, Gitlab CI/CD can also fulfill this requirement well. Here is a detailed introduction.

🌏 Core tools

GitLab Runner

GitLab Runner is the core program that works with GitLab CI/CD. For performance reasons, GitLab Runner should be deployed on a different server from GitLab (GitLab is deployed on a separate warehouse server, GitLab Runner on the server where the Web application is deployed). After associating with GitLab, GitLab Runner can perform various command operations such as project pull, file packaging, resource replication and so on on the server.

Git

Git needs to be installed on the Web server to obtain the remote repository.

Node

Used to do the packaging on the Web server.

NPM or Yarn or pnpm

Use yarn or PNPM to download dependencies on the Web server.

🌏 process

Here I use centOS environment:

1. Install required tools on the Web server

(1) Install the Node

Download the Node packageWget HTTP: / / https://nodejs.org/dist/v16.13.0/node-v16.13.0-linux-x64.tar.xzCopy the code
Unzip the Node packageThe tar xf - node - v16.13.0 - Linux - x64. Tar. XzCopy the code
Add the following to /etc/profile:
export PATH=$PATH: / root/node - v16.13.0 - Linux - x64 / binCopy the code
# refresh shell environment:
source /etc/profile
Copy the code
If the version number is displayed, the installation is successful.
node -v

You can run -v or --version to check whether the subsequent installation is successful
Copy the code

NPM is built into Node. If you want to use YARN or, you can use NPM to install it globally. The command is the same as the command used in our local environment:

npm i yarn -g
#or
npm i pnpm -g
Copy the code

2. Install Git

# yum install Git
yum -y install git
Copy the code
# Check git version
git --version
Copy the code

(3) Install Gitlab Runner

# Install program
wget -O /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64

Wait until the download is complete to assign permissions
chmod +x /usr/local/bin/gitlab-runner

Create a runner user
useradd --comment 'test' --create-home gitlab-runner --shell /bin/bash

# Install program
gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner

# start program
gitlab-runner start

Gitlab-runner --version = gitlab-runner --version
Copy the code

2. Configure the Runner and CI/CD

After the basic installation is complete, the core stage is Runner and CI/CD configuration.

(1) Configure Gitlab Runner

First, open the GitLab repository where automatic deployment is to be added and find Runner configuration information in Settings > CI/CD > Runner.

Configure runner in web server:

gitlab-runner register

>> Enter the GitLab instance URL (for example, https://gitlab.com/):
Enter the gitLab warehouse address you just obtained
>> Enter the registration token:
Enter the token you just obtained
>> Enter a description for the runner:
# Custom runner description
>> Enter tags for the runner (comma-separated):
# custom Runner tag
>> Enter an executor: docker-ssh, docker+machine, docker-ssh+machine, docker, parallels, shell, ssh, virtualbox, kubernetes, custom:
# Select the executor, where we enter shell
Copy the code

Complete example:

(2) Configuration. Gitlab-ci.yml

The.gitlab-ci.yml file is a process file executed by the pipeline, and Runner will complete a specified series of processes according to it.

We create a.gitlab-ci.yml file in the project root directory and then write something in it:

# phase
stages:
  - install
  - build
  - deploy

cache:
  paths:
    - node_modules/

# install dependencies
install:
  stage: install
  Tags must be filled in with the tags that you specified when you registered
  tags: 
    - deploy
  # specify that this phase is triggered only when package.json is committed
  only:
    changes:
      - package.json
  # execute script
  script:
    yarn

# Package projects
build:
  stage: build 
  tags: 
    - deploy
  script: 
    - yarn build
  # Pass the products of this stage to the next stage
  artifacts: 
    paths:
        - dist/

# Deploy the project
deploy:
  stage: deploy
  tags: 
    - deploy
  script: 
    Clear the root directory of the website. Please fill in the directory according to the actual situation of the server
    - rm -rf /www/wwwroot/stjerne/salary/*
    Copy the packed files to the root directory of the website. Please fill in the directory according to the actual situation of the server
    - cp -rf ${CI_PROJECT_DIR}/dist/* /www/wwwroot/stjerne/salary/ 
Copy the code

Once saved and pushed to GitLab, build deployment automatically begins.

The build process can be viewed in the Gitlab CI/CD panel:

After the assembly line JOB is complete, you can go to 🛫🛫🛫🛫🛫