The child coughs old bad, see source code analysis again, absorb again hard, forget again fast, how to do?

Why don’t you stop coding and play with toys?

Purpose of this article: You can learn without trying

Tools:

  • A computer
  • The server
  • A hands

Just so you know

First of all, IT was my first time to do this, because we used to have operation and maintenance arrangement. Next, we completely adopted the method of Jenkins + GitLab + Docker + Nignx to deploy the server for a front-end project, and the front-end project demo here uses UMI.

In addition, I also learned from more than 10 articles to complete the whole operation of this paper, some articles are always strange, only a general step, a variety of problems, about 16 or 7 times before the first successful construction.

The general answer is divided into three parts:

  1. Jenkins + GitLab + Nginx can first achieve the purpose of automatic code integration deployment. (this paper)
  2. Join docker, and finally build and deploy the image on the basis of the previous step.
  3. Add rollback, multi-environment, multi-branch, pipelining and other details

start

Assuming that you have purchased a server, and learned to log in your server through baidu, this paper adopts tianyi Cloud server, the system is Centos8

Docker installation

Install using yum

Run the following command on the server to install dependencies:

sudo yum install -y yum-utils

Due to domestic network problems, we use domestic sources

sudo yum-config-manager \ --add-repo \ https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

sudo sed -i 's/download.docker.com/mirrors.aliyun.com\/docker-ce/g' /etc/yum.repos.d/docker-ce.repo

Install the docker

sudo yum install docker-ce docker-ce-cli containerd.io

CentOS8 Additional Settings

Because used nftables CentOS8 firewall, but are not support nftables Docker, we can use the following Settings using iptables: change the/etc/firewalld/firewalld. Conf

FirewallBackend=iptables
Copy the code

Start the Docker

sudo systemctl enable docker

sudo systemctl start docker

Test whether Docker is installed correctly

This step automatically pulls a Hello-world Docker image from the DockerHub

docker run --rm hello-world

Configure image acceleration for Docker

Run the following command to check whether the image address is configured in the docker.service file.

systemctl cat docker | grep '\-\-registry\-mirror'

If the command has output, run systemctl cat docker to see where ExecStart= appears, modify the corresponding file contents to remove the –registry-mirror parameter and its value, and configure it as follows.

If the above command does not produce any output, you can write the following to /etc/docker-daemon. json (if the file does not exist, please create a new file) :

{
  "registry-mirrors": [
    "https://hub-mirror.c.163.com"."https://mirror.baidubce.com"]}Copy the code

Then restart the service.

So I have the Docker on my server that we need, and then Jenkins.

Start the Jenkins

Download Jenkins Mirror

docker pull jenkins/jenkins:jdk11

Set port to 9090 and map jenkins_home to /home/jenkins_home (directory port is a person, /home/jenkins_home is the Jenkins directory of my own server, This step is simply to allow you to access the Jenkins interface using your IP + port.

docker run -d --name jenkins -p 9090:8080 -v /home/jenkins_home:/var/jenkins_home -u 0 jenkins/jenkins

Login Jenkins

You can then access Jenkins using your server’s IP + port number by typing 140.171.172.172:9090 in the address bar.

Tip:

  • No, ping the address to see if it works
  • The access security policy of the server is checked. For example, port 9090 is inaccessible by default.
  • Not yet. Check all the steps above

The following is tianyi cloud modified to add port method example, each platform is slightly different, find their own.

Let’s say you enter Jenkins’ screen (if you haven’t already, close the current window you’re browsing and look elsewhere).

You need to enter a password to start Jenkins for the first time. You need to enter the container to obtain the password.

Passwords in the/var/jenkins_home/secrets/initialAdminPassword.

Into the container

docker exec -it jenkins /bin/bash

To get the password

cat /var/jenkins_home/secrets/initialAdminPassword

In addition to teaching a tool transmit, of course, win can use winscp, you can directly view the server file

Then the next step is the next step, if some plug-ins fail to install first ignore, the next step until the main interface.

Maybe because my Jenkins version is newer, my interface is slightly different from their article, but the operation interface is basically the same during the demonstration.

More plug-in source

System Settings -> Plugin Management -> Advanced -> Upgrade site, change it to:

https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json

Configuring the Global Environment

The following operations are performed in System Settings -> Global Tools Configuration

Configure the JDK

Enter the Jenkins container and view the Java installation path.

docker exec -it jenkins /bin/bash /bin/bash $JAVA_HOME

My is/opt/Java/its

Then configure it in the JDK

Configure Git

Git similarly, go to whereis git in the container to find the Git installation path.

whereis git

  

Configure Maven and Node

Maven and Node are installed automatically by default. Maven and Node are installed automatically by default.

System Settings

The following is done in Jenkins system Settings -> System Settings

Add SSH Servers to Publish over SSH

Here is the configuration of your server address, clickseniorTo set the password, select Use Password Authentication, or Use a different key check box, and then set password.

Click the Test Configuration button after the Configuration is complete. If the Configuration is normal, Success will appear.

GitLab configuration integration

Jenkins configures the GitLab plugin

First install the GitLab plugin in plugin Manager, then we’ll go to your GitLab,

  1. You will need to obtain a GitLab token for Jenkins, but I won’t go into details

  2. Configure Jenkins System Settings -> System Settings Setup GitLab

  3. Click Add -> Jenkins to configure your GitLab token

  4. Click the Test Connection button to Test the Connection. If Success appears, the configuration is successful

If the 403 response code is incorrect when the Gitlab notification event occurs, you need to uncheck “Enable authentication for ‘/project’ end-point”

Create a task

Next we will create a simple Jenkins task by clicking New Task in the Jenkins panel

  1. Enter the task name
  2. Choose to build a free-style project
  3. Enter project Configuration

Configuration items

  • Source code management

Set your GitLab address and TOEKN, and select the branch you want to trigger the task (test branch here).

  • Build trigger

Select Build when a change is Pushed to GitLab. The following options are used to configure Jenkins to execute the code operation under GitLab. For example, if you want the branch to be pushed to execute the Build, push is selected.

Click the advanced button in the lower right corner of the picture.Click the Generate button, Generate a SecretToken, copy the generated token, then go to gitLab and create a Webhook for your project, url input triggers Jenkins task URL (e.ghttp://140.171.172.173:9090/project/umi) and paste the SecretToken into the SecretToken field of Webhook.

After adding Webhooks, click the Test button to test various GitLab events. After Success, go back to the Jenkins task to continue configuration.

  • Build environment

Select Provide Node & NPM bin/ Folder to PATH and keep the default Settings

  • build

Click Add Build Steps to add an execute SSH and Send Filse or execute Commands over SSHOur main task in SSH scripts is to install dependencies, package, and compress.

node -v
npm install -g yarn -registry=https://registry.npm.taobao.org
yarn -v
yarn install --pure-lockfile
yarn build
tar -zcvf dist.tar ./dist
Copy the code

Send filse or execute Commands over SSH is used to configure the server to be transmitted, the target file, and the path to be received by the server. /data/project/project2), and the script to execute upon acceptance

cd /data/project
tar xvf dist.tar 
mv -n dist/* ./project-umi
rm -rf dist.tar
rm -rf dist
Copy the code

After completing the above steps, you go to your GitLab and casually modify the readme.md of the Test branch, then commit to see if Jenkins triggers the automatic build of the task we created.

If the build is complete, go to the server files to see if your /data/project/project1 contains your packaged front-end deployment files

If the build fails, you can go to the next build history and view the console output to see the cause of the error. If all of the above steps fail, you can post your mistakes in the comments section.

Configure Nginx

Yes, after checking above, you made sure you changed the code to trigger the task, and finally saved the package file in your project directory, so our last step is to configure nginx for our server.

This step is probably understood by many front-end users, so there is no need to say anything, you just need to install Nginx on the server.

Then go to your nginx configuration file, my file is in /etc/nginx/nginx.conf, and I will use a basic installed default file as an example to add our front-end project proxy. We just need to add a server proxy to it:

server { listen 3000; # gzip config gzip on; gzip_min_length 1k; gzip_comp_level 9; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on; gzip_disable "MSIE [1-6]\."; Umi: root /data/project/project-umi; Try_files $uri $uri/ /index.html; # if there is a resource, it is recommended to use HTTPS + http2, cooperate with on-demand load can obtain better experience # rewrite ^ / (. *) $https://preview.pro.ant.design/$1 permanent; } location /api { proxy_pass https://ant-design-pro.netlify.com; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Real-IP $remote_addr; }}Copy the code

Then reload your Nginx configuration

nginx -s reload

The last

Commit a commit in the Test branch of your GitLab. If you go back to the Jenkins panel, you will find that a compile task for your project has been automatically triggered. Checking the final status of Jenkins’ build task without Success indicates that you have poorly deployed the project to the server.

Then, enter yours in your browserServer IP +3000 port. good job!

To summarize

Then let’s sort out our overall task idea:

We are almost done with part 1, but there is still a lot to think about after we finish Part 2, such as multi-environment multi-branch, whether image packaging can use caching to compare dependencies, and even if there is no dependency update we just skip the YARN installation step.

There are also some thoughts about how to carry out the second step, such as docker things directly in the code or built into the task of global variable execution, or specifically placed in the server specified file, how to ensure that the operation of the Docker image is minimized and so on.

Promise me you won’t let it eat ashes in your collection, okay? Ok??