Multigraph warning!

preface

This image is constantly updated, please check docker-Hub for details.

Docker pull Xmolan/Ubuntu :0.3 Please pay attention to the docker-Hub link above for details.

In the previous chapter I explained how to build a Vue self-build deployment image out of the box.

If you haven’t seen the previous chapter, you can get the image in one of the following ways.

I’ve pushed this image to docker.io, through

docker search xmolan

# NAME DESCRIPTION STARS OFFICIAL AUTOMATED
# xmolan/ubuntu 0Docker pull xmolan/ubuntu 0.1# 0.1: Pulling from xmolan/ubuntu
# caa1f254f516: Pull complete 
# Digest: sha256:02293915dca751224398c90eb3dacab9441ac0f14dc39de617176ccd727caafb
# Status: Downloaded newer Image for Xmolan/Ubuntu :0.1
# docker. IO/xmolan/ubuntu: 0.1

docker images
# REPOSITORY TAG IMAGE ID CREATED SIZE
# xmolan/ Ubuntu 0.1 181648df79b5 18 hours ago 1.17GB
Copy the code

You can find the image and pull it down.

Or, I also put this image on baidu cloud disk

Link: https://pan.baidu.com/s/1ymCtbSPAdFaD5NGiMHZDWQ extraction code: yshwCopy the code

If you are using an image captured on a cloud disk, be sure to upload the image to the environment you want to deploy.

The image file name is vue_deploy.tar

In front of the warning

This image is based on Docker, your system should have Docker installed. If not, please go to the site I described below to install.

docker -v
# Docker version 20.10.3, build 48d30b5
Copy the code

I’m going to use the Vue + Gitee approach to explain, Github readers don’t have to worry, it is much easier than using Gitee, you first follow me through Gitee, then search for Github+Jenkins build solution on the Internet.

I strongly recommend domestic users to use Gitee as an alternative to Github, as domestic sites can significantly improve efficiency compared to foreign sites.

Install the Docker

For the installation and use of Docker, you can refer to Docker – from getting Started to Practice this book, although you do not need to have too much Docker knowledge to use this image, I still recommend you to read until the visit to the warehouse section.

In addition, I recommend you to set Docker to domestic source, the specific setting method is described in this book, do not forget to execute Docker info to check whether the image configuration is successful.

Be careful not to copy the code block on this site by clicking on the upper right corner; it copies the annoying $prompt as well.

The body of the

After putting the image into the server via XFTP or other means and configuring the Docker, we can start unboxing.

Import mirror

If you are through baidu network disk download image, then you need to import first. (Not necessary if you are using Docker pull to get the image)

Cat vue_deploy. Tar | docker import - xmolan/ubuntu: 0.1Copy the code

This will take a bit of time (10 seconds or so) because the mirror image is a bit large.

check

docker images
# REPOSITORY TAG IMAGE ID CREATED SIZE
# xmolan/ Ubuntu 0.1 3609fd8eda43 36 seconds ago 1.17GB <-
# hello-world latest bf756fb1ae65 13 months ago 13.3KB
Copy the code

Mirror container

Open the container

Docker run -d -p 8080:8080 -p 80:80 --name vue-deploy-1 it xmolan/ Ubuntu :0.1 /bin/bash docker run -d -p 8080:80 -p 80:80 --name vue-deploy-1 it xmolan/ Ubuntu :0.1 /bin/bash# A string of alphanumeric ids
Copy the code

check

docker ps

# CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
# b6ba2210f9b7 xmolan/ Ubuntu :0.1 "/bin/bash" 49 seconds ago Up 48 seconds 0.0.0.0:80->80/ TCP, 0.0.0.0:8080-8080 / TCP vue - > deploy - 1
Copy the code

Into the container

docker exec -it vue-deploy-1 bash

# root@b6ba2210f9b7:/# 
Copy the code

Enable nginx and Jenkins

nginx
systemctl start jenkins
Copy the code

Open your browser, generate two tabs, enter your server IP address (hereinafter referred to as IP) and IP :8080. Note that your server has ports 80 and 8080 open, and that both ports are available.

You should see these two pages

Configuration Jenkins

For now we can close the Nginx page and focus on the Jenkins page.

First we need to find the password

cat /var/lib/jenkins/secrets/initialAdminPassword

# 1c1c5f50a6b3428bb640a22aa3133367
Copy the code

Copy and paste the password and click Continue. Then wait a while, it takes some time to get to the next page.

The configuration is loaded for the first time

Here I have configured the Jenkins plugin for you to update the image as a domestic source, you can rest assured to install.

If some of your plug-ins fail to install, don’t worry, just try again.

If there is a retry failure, continue to retry, about 2 or 3 times to be able to complete the successful installation, a good luck, do not try 3 or 4 times.

Create an administrator user. Be sure to remember the username and password of the user, otherwise login will cause major problems

The configuration sample page is just as good as the default, but you can change it later anyway.

Install the Gitee plug-in

After entering, enter the management interface first.

It’s not unusual to encounter mixed Chinese and English when entering the Jenkins interface for the first time.

If you encounter an error with Plugins, don’t worry, it’s normal. Go to Manage Jenkins > Manage Plugins > Update Center /Update Center

Click restart on the line, after the restart to refresh the page, if still error, restart several times on the line. These are everyday problems, and rebooting will help you reinstall them.

In the Plug-in management screen, we click upload a Gitee plug-in. Plug-in download address

Go to the installation page and restart after installation.

Wait for Jenkins to reboot and log in (enter the username and password we just created).

Find the Gitee configuration, this part refer to the explanation of the Gadee-Jenkins plug-in, mainly to obtain the Gitee APIV5 private token.

Custom credential content, ID, and description

After typing as I did, click on the test link and be prompted success.

Then save the configuration

At this point, all of your Jenkins + Gitee system configuration is complete.

summary

This article is a bit too graphic because I have detailed and illustrated each step, so I split the content into two parts, and the rest of the new task will be covered in the next chapter.