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 🛫🛫🛫🛫🛫